sj-miniprogram/unpackage/dist/dev/mp-weixin/pages/chat/chat.wxss

.container.data-v-0a633310 {
  width: 100%;
  height: 100vh;
  background-color: #F4F5F7;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 状态栏占位：高度由 JS 动态注入 */
.status-bar.data-v-0a633310 {
  background: #FFF;
  flex-shrink: 0;
}

/* 导航栏 */
.nav-bar.data-v-0a633310 {
  height: 100rpx;
  background: #FFF;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #F0F0F0;
  flex-shrink: 0;
}
.nav-bar .back-btn.data-v-0a633310 {
  width: 60rpx;
  display: flex;
  align-items: center;
}
.nav-bar .back-btn .back-arrow.data-v-0a633310 {
  font-size: 56rpx;
  color: #333;
  line-height: 1;
  margin-top: -6rpx;
}
.nav-bar .nav-center.data-v-0a633310 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}
.nav-bar .nav-center .nav-title-text.data-v-0a633310 {
  font-size: 32rpx;
  font-weight: bold;
  color: #1A1A1A;
}
.nav-bar .nav-center .online-dot.data-v-0a633310 {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background: #10B981;
}
.nav-bar .nav-right.data-v-0a633310 {
  width: 60rpx;
}
.chat-body.data-v-0a633310 {
  flex: 1;
}
.message-list.data-v-0a633310 {
  padding: 24rpx 30rpx 160rpx;
}
.tip-row.data-v-0a633310 {
  padding: 60rpx 0;
  text-align: center;
}
.tip-row .tip-text.data-v-0a633310 {
  font-size: 26rpx;
  color: #CCC;
}
.time-stamp-row.data-v-0a633310 {
  display: flex;
  justify-content: center;
  margin: 20rpx 0 30rpx;
}
.time-stamp.data-v-0a633310 {
  font-size: 22rpx;
  color: #BBB;
  background: rgba(0, 0, 0, 0.05);
  padding: 4rpx 18rpx;
  border-radius: 8rpx;
}
.msg-row.data-v-0a633310 {
  display: flex;
  margin-bottom: 44rpx;
}
.msg-row .avatar.data-v-0a633310 {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  flex-shrink: 0;
}
.msg-row.left .avatar.data-v-0a633310 {
  margin-right: 18rpx;
}
.msg-row.right.data-v-0a633310 {
  justify-content: flex-end;
}
.msg-row.right .avatar.data-v-0a633310 {
  margin-left: 18rpx;
}
.msg-content.data-v-0a633310 {
  max-width: 520rpx;
  border-radius: 16rpx;
  padding: 22rpx 26rpx;
  font-size: 30rpx;
  line-height: 1.6;
  word-break: break-all;
}
.text-msg.data-v-0a633310 {
  background: #FFF;
  color: #333;
}
.text-msg.shadow.data-v-0a633310 {
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
}
.text-msg.user-bubble.data-v-0a633310 {
  background: #FFB700;
  color: #FFF;
}
.img-msg.data-v-0a633310 {
  padding: 8rpx;
  background: #FFF;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
}
.img-msg .chat-img.data-v-0a633310 {
  width: 360rpx;
  border-radius: 8rpx;
  display: block;
}
.file-msg.data-v-0a633310 {
  display: flex;
  align-items: center;
  gap: 20rpx;
  background: #FFF;
  min-width: 300rpx;
}
.file-msg .file-icon-txt.data-v-0a633310 {
  font-size: 56rpx;
  flex-shrink: 0;
}
.file-msg .file-info.data-v-0a633310 {
  flex: 1;
}
.file-msg .file-info .file-name.data-v-0a633310 {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 6rpx;
  word-break: break-all;
}
.file-msg .file-info .file-size.data-v-0a633310 {
  font-size: 22rpx;
  color: #999;
}

/* 订单卡片 */
.deposit-card.data-v-0a633310 {
  background: #FFF;
  width: 500rpx;
  border-radius: 20rpx;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}
.deposit-card .deposit-header.data-v-0a633310 {
  padding: 28rpx 28rpx 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.deposit-card .deposit-header .d-header-left.data-v-0a633310 {
  flex: 1;
}
.deposit-card .deposit-header .d-header-left .d-title.data-v-0a633310 {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.deposit-card .deposit-header .d-header-left .d-subtitle.data-v-0a633310 {
  font-size: 22rpx;
  color: #BBB;
  margin-top: 6rpx;
  display: block;
}
.deposit-card .deposit-header .d-countdown.data-v-0a633310 {
  display: flex;
  gap: 4rpx;
  align-items: center;
  justify-content: flex-end;
}
.deposit-card .deposit-header .d-countdown .c-time.data-v-0a633310 {
  color: #FF9500;
  font-size: 26rpx;
  font-weight: bold;
}
.deposit-card .deposit-header .d-countdown .c-txt.data-v-0a633310 {
  color: #999;
  font-size: 22rpx;
}
.deposit-card .deposit-header .d-paid-tag.data-v-0a633310 {
  color: #52C41A;
  font-size: 24rpx;
  font-weight: bold;
}
.deposit-card .deposit-body.data-v-0a633310 {
  padding: 8rpx 28rpx 24rpx;
}
.deposit-card .deposit-body .d-row.data-v-0a633310 {
  margin-bottom: 10rpx;
  font-size: 26rpx;
  display: flex;
}
.deposit-card .deposit-body .d-row .label.data-v-0a633310 {
  color: #AAA;
  width: 140rpx;
}
.deposit-card .deposit-body .d-row .val.data-v-0a633310 {
  color: #333;
  flex: 1;
}
.deposit-card .deposit-body .d-row .price.data-v-0a633310 {
  color: #FF3B30;
  font-size: 34rpx;
  font-weight: bold;
}
.deposit-card .deposit-action.data-v-0a633310 {
  margin: 0 28rpx 28rpx;
  height: 76rpx;
  font-size: 28rpx;
  background: #FFB700;
  color: #FFF;
  border-radius: 38rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.deposit-card .deposit-action.paid.data-v-0a633310 {
  background: #EEE;
  color: #999;
}

/* 招聘初始卡片（静态展示用） */
.job-card-msg.data-v-0a633310 {
  background: #FFF;
  border-radius: 20rpx;
  width: 500rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
}
.job-card-msg .card-header.data-v-0a633310 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.job-card-msg .card-header .ch-left.data-v-0a633310 {
  display: flex;
  align-items: center;
  gap: 10rpx;
}
.job-card-msg .card-header .ch-left .card-title.data-v-0a633310 {
  font-weight: bold;
  font-size: 34rpx;
}
.job-card-msg .card-header .ch-left .urgent-tag.data-v-0a633310 {
  border: 1rpx solid #FF4D4F;
  color: #FF4D4F;
  font-size: 20rpx;
  padding: 2rpx 10rpx;
  border-radius: 6rpx;
}
.job-card-msg .card-header .card-salary.data-v-0a633310 {
  color: #1F6CFF;
  font-weight: bold;
  font-size: 32rpx;
}
.job-card-msg .card-tags.data-v-0a633310 {
  display: flex;
  gap: 12rpx;
  margin-bottom: 24rpx;
}
.job-card-msg .card-tags .c-tag.data-v-0a633310 {
  background: #F5F7FA;
  color: #888;
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
}
.job-card-msg .card-meta.data-v-0a633310 {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  margin-bottom: 24rpx;
}
.job-card-msg .card-meta .m-item.data-v-0a633310 {
  display: flex;
  align-items: center;
  gap: 10rpx;
}
.job-card-msg .card-meta .m-item .m-icon.data-v-0a633310 {
  width: 24rpx;
  height: 24rpx;
  opacity: 0.4;
}
.job-card-msg .card-meta .m-item text.data-v-0a633310 {
  font-size: 24rpx;
  color: #666;
}
.job-card-msg .card-company.data-v-0a633310 {
  display: flex;
  align-items: center;
  border-top: 1rpx solid #F5F5F5;
  padding-top: 24rpx;
}
.job-card-msg .card-company .c-logo.data-v-0a633310 {
  width: 80rpx;
  height: 80rpx;
  border-radius: 12rpx;
  margin-right: 16rpx;
}
.job-card-msg .card-company .c-info.data-v-0a633310 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8rpx;
}
.job-card-msg .card-company .c-info .c-name.data-v-0a633310 {
  font-size: 28rpx;
  font-weight: bold;
}
.job-card-msg .card-company .c-info .v-icon.data-v-0a633310 {
  width: 28rpx;
  height: 28rpx;
}
.job-card-msg .card-company .c-loc.data-v-0a633310 {
  font-size: 24rpx;
  color: #999;
}

/* 测评初始卡片 */
.assessment-card-msg.data-v-0a633310 {
  background: #FFF;
  width: 480rpx;
  padding: 24rpx;
  display: flex;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
  border-radius: 16rpx;
}
.assessment-card-msg .card-left.data-v-0a633310 {
  width: 140rpx;
  height: 140rpx;
  margin-right: 20rpx;
}
.assessment-card-msg .card-left .a-cover.data-v-0a633310 {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}
.assessment-card-msg .card-right.data-v-0a633310 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.assessment-card-msg .card-right .a-title.data-v-0a633310 {
  font-weight: bold;
  font-size: 30rpx;
  color: #1A1A1A;
}
.assessment-card-msg .card-right .a-tags.data-v-0a633310 {
  display: flex;
  gap: 10rpx;
  flex-wrap: wrap;
}
.assessment-card-msg .card-right .a-tags .a-tag.data-v-0a633310 {
  font-size: 20rpx;
  color: #999;
  background: #F5F7FA;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
}
.assessment-card-msg .card-right .a-price.data-v-0a633310 {
  color: #FF4D4F;
  font-weight: bold;
  font-size: 32rpx;
}

/* 培训报名初始卡片 */
.training-reg-card.data-v-0a633310 {
  background: #FFF;
  width: 480rpx;
  padding: 30rpx;
  border-radius: 20rpx;
}
.training-reg-card .t-card-header.data-v-0a633310 {
  margin-bottom: 24rpx;
}
.training-reg-card .t-card-header .t-card-title.data-v-0a633310 {
  font-weight: bold;
  font-size: 32rpx;
  color: #1A1A1A;
  display: block;
  margin-bottom: 8rpx;
}
.training-reg-card .t-card-header .t-card-subtitle.data-v-0a633310 {
  font-size: 24rpx;
  color: #999;
}
.training-reg-card .t-card-body.data-v-0a633310 {
  margin-bottom: 30rpx;
}
.training-reg-card .t-card-body .t-item.data-v-0a633310 {
  display: flex;
  font-size: 26rpx;
  margin-bottom: 10rpx;
}
.training-reg-card .t-card-body .t-item .t-label.data-v-0a633310 {
  color: #888;
  width: 140rpx;
}
.training-reg-card .t-card-body .t-item .t-val.data-v-0a633310 {
  color: #333;
}
.training-reg-card .t-card-footer .reg-btn.data-v-0a633310 {
  width: 100%;
  height: 72rpx;
  line-height: 72rpx;
  background: #1F6CFF;
  color: #FFF;
  border-radius: 36rpx;
  font-size: 28rpx;
  font-weight: bold;
}
.training-reg-card .t-card-footer .reg-btn.data-v-0a633310::after {
  border: none;
}

/* API 推送的岗位卡片（客服消息循环中使用）*/
.api-job-card.data-v-0a633310 {
  background: #FFF;
  width: 460rpx;
  padding: 28rpx;
  border-radius: 16rpx;
}
.api-job-card .jc-header.data-v-0a633310 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}
.api-job-card .jc-header .jc-title.data-v-0a633310 {
  font-size: 30rpx;
  font-weight: bold;
  color: #1A1A1A;
  flex: 1;
}
.api-job-card .jc-header .jc-salary.data-v-0a633310 {
  font-size: 28rpx;
  color: #1F6CFF;
  font-weight: bold;
}
.api-job-card .jc-city.data-v-0a633310 {
  font-size: 24rpx;
  color: #888;
}

/* 系统消息 */
.system-msg.data-v-0a633310 {
  width: 100%;
  text-align: center;
  font-size: 24rpx;
  color: #BBB;
  padding: 8rpx 20rpx;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8rpx;
}

/* 底部输入栏 */
.footer-wrap.data-v-0a633310 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFF;
  border-top: 1rpx solid #EEE;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 1001;
}
.input-bar.data-v-0a633310 {
  height: 120rpx;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  gap: 20rpx;
}
.input-bar .bar-icon.data-v-0a633310 {
  width: 60rpx;
  height: 60rpx;
  transition: transform 0.2s;
}
.input-bar .bar-icon.active.data-v-0a633310 {
  transform: scale(1.1);
}
.input-bar .center-area.data-v-0a633310 {
  flex: 1;
}
.input-bar .center-area .chat-input.data-v-0a633310 {
  background: #F7F8FA;
  height: 80rpx;
  border-radius: 12rpx;
  border: 1rpx solid #EEE;
  padding: 0 24rpx;
  font-size: 28rpx;
}
.input-bar .center-area .voice-press-btn.data-v-0a633310 {
  height: 80rpx;
  background: #F7F8FA;
  border: 1rpx solid #DDD;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #666;
}
.input-bar .center-area .voice-press-btn.data-v-0a633310:active {
  background: #E0E0E0;
}
.panel-section.data-v-0a633310 {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}
.panel-section.show.data-v-0a633310 {
  height: 400rpx;
  border-top: 1rpx solid #F2F2F2;
}
.emoji-panel.data-v-0a633310 {
  height: 100%;
}
.emoji-panel .emoji-scroll.data-v-0a633310 {
  height: 100%;
}
.emoji-panel .emoji-grid.data-v-0a633310 {
  display: flex;
  flex-wrap: wrap;
  padding: 30rpx;
  gap: 20rpx;
}
.emoji-panel .emoji-grid .emoji-item.data-v-0a633310 {
  font-size: 50rpx;
  width: 84rpx;
  text-align: center;
}
.plus-panel.data-v-0a633310 {
  height: 100%;
  display: flex;
  padding: 40rpx 60rpx;
  gap: 80rpx;
}
.plus-panel .panel-item.data-v-0a633310 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.plus-panel .panel-item .icon-box.data-v-0a633310 {
  width: 116rpx;
  height: 116rpx;
  background: #FFF;
  border: 1rpx solid #F0F0F0;
  border-radius: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.03);
}
.plus-panel .panel-item .icon-box image.data-v-0a633310 {
  width: 60rpx;
  height: 60rpx;
}
.plus-panel .panel-item text.data-v-0a633310 {
  font-size: 26rpx;
  color: #777;
}