/* 陪聊师详情页面样式 */
page {
  background: #ededed;
  height: 100%;
}

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.status-bar {
  background: #fff;
}

/* 顶部导航栏 - 固定定位 */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 2rpx solid #f3f4f6;
  z-index: 100;
  box-sizing: border-box;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  height: 100%;
}

.nav-back {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-placeholder {
  width: 64rpx;
  height: 64rpx;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
}

.nav-title-wrap {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.nav-title {
  font-size: 32rpx;
  color: #101828;
}

.status-badge {
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
  background: #ff8904;
}

.status-badge.online {
  background: #05df72;
}

.status-badge.busy {
  background: #ff8904;
}

.status-text {
  font-size: 24rpx;
  color: #fff;
}

/* 内容区域 */
.content-scroll {
  flex: 1;
  padding: 16rpx 32rpx;
  padding-bottom: 450rpx; /* 为底部固定区域留出空间 */
  box-sizing: border-box;
}

/* 用户信息卡片 */
.profile-card {
  background: #fff;
  border-radius: 32rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1), 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.profile-header {
  display: flex;
  gap: 24rpx;
  padding: 32rpx;
  background: linear-gradient(152deg, #fce7f3 0%, #f3e8ff 50%, #e9d4ff 100%);
}

.profile-avatar-wrap {
  width: 128rpx;
  height: 160rpx;
}

.profile-avatar-placeholder {
  width: 128rpx;
  height: 160rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 真实头像图片样式 */
.profile-avatar-image {
  width: 128rpx;
  height: 160rpx;
  border-radius: 20rpx;
}

.profile-avatar-text {
  font-size: 48rpx;
  font-weight: 700;
  color: #fff;
}

.profile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.profile-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.name-level-wrap {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.profile-name {
  font-size: 36rpx;
  font-weight: 700;
  color: #101828;
}

/* 名字后面的等级标签 */
.name-level-badge {
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  font-size: 20rpx;
  white-space: nowrap;
}

.name-level-badge.level-junior {
  background: linear-gradient(135deg, #a8d8ea 0%, #6bb3d9 100%);
}

.name-level-badge.level-intermediate {
  background: linear-gradient(135deg, #b8e986 0%, #7bc96f 100%);
}

.name-level-badge.level-senior {
  background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
}

.name-level-badge.level-expert {
  background: linear-gradient(135deg, #e8b4d8 0%, #c984cd 100%);
}

.name-level-text {
  color: #fff;
  font-weight: 600;
  font-size: 22rpx;
}

.profile-location {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.location-icon {
  width: 24rpx;
  height: 24rpx;
}

.location-text {
  font-size: 24rpx;
  color: #6a7282;
}

.profile-desc {
  font-size: 28rpx;
  color: #4a5565;
}

.profile-education {
  font-size: 28rpx;
  color: #4a5565;
}

.profile-stats {
  display: flex;
  justify-content: space-around;
  padding: 24rpx 32rpx;
  background: linear-gradient(152deg, #fce7f3 0%, #f3e8ff 50%, #e9d4ff 100%);
  border-top: 2rpx solid rgba(255, 255, 255, 0.3);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
}

.stat-value {
  font-size: 40rpx;
  font-weight: 700;
  color: #101828;
}

.stat-label {
  font-size: 24rpx;
  color: #6a7282;
}

.profile-details {
  padding: 24rpx 32rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.detail-row {
  display: flex;
  gap: 16rpx;
}

.detail-label {
  font-size: 32rpx;
  color: #364153;
  width: 128rpx;
  flex-shrink: 0;
}

.detail-value {
  font-size: 32rpx;
  color: #4a5565;
  flex: 1;
}

/* 时间戳 */
.time-stamp {
  text-align: center;
  padding: 32rpx 0;
}

.time-text {
  font-size: 24rpx;
  color: #99a1af;
}

/* 聊天消息 */
.message-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.message-item {
  display: flex;
  gap: 16rpx;
}

.message-avatar {
  width: 80rpx;
  height: 80rpx;
  flex-shrink: 0;
}

.avatar-placeholder {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 消息头像图片样式 */
.avatar-image-small {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.avatar-text {
  font-size: 32rpx;
  font-weight: 700;
  color: #fff;
}

.message-bubble {
  background: #fff;
  border-radius: 0 20rpx 20rpx 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1), 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  max-width: 80%;
}

.message-text {
  font-size: 32rpx;
  color: #1e2939;
  line-height: 1.6;
}

/* 服务中提示 */
.busy-notice {
  text-align: center;
  padding: 32rpx 0;
}

.busy-text {
  font-size: 28rpx;
  color: #6a7282;
}

.remind-btn {
  margin-top: 16rpx;
}

.remind-text {
  font-size: 32rpx;
  color: #2b7fff;
}

/* 底部操作按钮 */
.action-buttons {
  position: fixed;
  bottom: calc(140rpx + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  display: flex;
  gap: 16rpx;
  padding: 0 32rpx 24rpx;
  background: transparent;
  z-index: 97;
}

.action-btn {
  flex: 1;
  height: 100rpx;
  border-radius: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  box-shadow: 0 8rpx 20rpx -6rpx rgba(0, 0, 0, 0.1), 0 20rpx 50rpx -10rpx rgba(0, 0, 0, 0.1);
}

.action-btn.primary {
  background: linear-gradient(90deg, #05df72 0%, #00bc7d 100%);
}

.action-btn.secondary {
  background: #fff;
  border: 2rpx solid #e5e7eb;
  box-shadow: 0 2rpx 4rpx -2rpx rgba(0, 0, 0, 0.1), 0 2rpx 6rpx 0 rgba(0, 0, 0, 0.1);
}

.action-icon {
  width: 40rpx;
  height: 40rpx;
}

.action-icon.white {
  filter: brightness(0) invert(1);
}

.action-emoji {
  font-size: 32rpx;
}

.action-text {
  font-size: 32rpx;
  color: #364153;
  text-align: center;
}

.action-text.white {
  color: #fff;
}

/* 电话图标样式 */
.phone-icon-wrap {
  width: 40rpx;
  height: 40rpx;
  position: relative;
}

.phone-icon-svg {
  width: 40rpx;
  height: 40rpx;
}

/* 面板打开时的透明遮罩层 - 点击关闭面板 */
.panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 98;
}

/* 底部输入区域容器 */
.bottom-input-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 100;
}

/* 面板打开时移除底部安全区域 */
.bottom-input-container.panel-open .input-bar {
  padding-bottom: 26rpx;
}

/* 底部输入框 */
.input-bar {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 26rpx 32rpx;
  padding-bottom: calc(26rpx + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 2rpx solid #e5e7eb;
}

.voice-btn {
  width: 56rpx;
  height: 56rpx;
  border: 2rpx solid #99a1af;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.voice-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-bar {
  width: 16rpx;
  height: 24rpx;
  background: #4a5565;
  border-radius: 12rpx;
}

.input-wrap {
  flex: 1;
  height: 88rpx;
  background: #f3f4f6;
  border-radius: 100rpx;
  padding: 0 32rpx;
  display: flex;
  align-items: center;
}

.message-input {
  width: 100%;
  font-size: 28rpx;
  color: #101828;
}

.message-input::placeholder {
  color: #99a1af;
}

.emoji-btn {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.emoji-icon {
  width: 48rpx;
  height: 48rpx;
}

.add-btn {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 加号图标 */
.plus-icon {
  width: 48rpx;
  height: 48rpx;
  position: relative;
}

.plus-h {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32rpx;
  height: 4rpx;
  background: #4a5565;
  border-radius: 2rpx;
}

.plus-v {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4rpx;
  height: 32rpx;
  background: #4a5565;
  border-radius: 2rpx;
}

/* 底部安全区域 - 不再需要，已通过fixed定位处理 */
.safe-area {
  display: none;
}


/* 下单弹窗样式 */
.order-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.order-modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
  padding: 32rpx;
  z-index: 1001;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #101828;
}

.modal-close {
  font-size: 48rpx;
  color: #99a1af;
  line-height: 1;
}

.section-label {
  font-size: 28rpx;
  color: #6a7282;
  margin-bottom: 16rpx;
  display: block;
}

/* 服务类型选择 */
.service-type-section {
  margin-bottom: 32rpx;
}

.service-type-options {
  display: flex;
  gap: 24rpx;
}

.service-type-item {
  flex: 1;
  padding: 24rpx;
  border: 2rpx solid #e5e7eb;
  border-radius: 16rpx;
  text-align: center;
  transition: all 0.3s;
}

.service-type-item.active {
  border-color: #e91e63;
  background: #fce7f3;
}

.type-name {
  display: block;
  font-size: 28rpx;
  color: #101828;
  margin-bottom: 8rpx;
}

.type-price {
  font-size: 24rpx;
  color: #e91e63;
  font-weight: 600;
}

/* 时长选择 */
.duration-section {
  margin-bottom: 32rpx;
}

.duration-options {
  display: flex;
  gap: 24rpx;
}

.duration-item {
  flex: 1;
  padding: 20rpx;
  border: 2rpx solid #e5e7eb;
  border-radius: 16rpx;
  text-align: center;
  transition: all 0.3s;
}

.duration-item.active {
  border-color: #e91e63;
  background: #fce7f3;
}

.duration-text {
  font-size: 28rpx;
  color: #101828;
}

/* 价格汇总 */
.price-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  background: #f9fafb;
  border-radius: 16rpx;
  margin-bottom: 32rpx;
}

.summary-label {
  font-size: 28rpx;
  color: #6a7282;
}

.summary-price {
  font-size: 40rpx;
  font-weight: 700;
  color: #e91e63;
}

/* 确认按钮 */
.confirm-btn {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(to right, #e91e63, #c2185b);
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 48rpx;
  border: none;
}

.confirm-btn::after {
  border: none;
}


/* ========== 人物介绍弹窗样式 - Figma设计 ========== */
.profile-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.profile-modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 64rpx 64rpx 0 0;
  z-index: 1001;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
  box-shadow: 0 -50rpx 100rpx -24rpx rgba(0, 0, 0, 0.25);
}

.profile-modal.show {
  transform: translateY(0);
}

/* 弹窗头部 - 固定在顶部 */
.profile-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 48rpx;
  height: 154rpx;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 2rpx solid #f3f4f6;
  border-radius: 64rpx 64rpx 0 0;
  flex-shrink: 0;
}

.profile-modal-title {
  font-size: 40rpx;
  font-weight: 900;
  color: #101828;
  line-height: 1.4;
}

.profile-modal-close {
  width: 72rpx;
  height: 72rpx;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  font-size: 40rpx;
  color: #4a5565;
  line-height: 1;
}

/* 弹窗内容区 */
.profile-modal-content {
  flex: 1;
  padding: 40rpx 48rpx;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

/* 底部指示条 */
.profile-modal-content::after {
  content: '';
  display: block;
  width: 224rpx;
  height: 12rpx;
  background: #d1d5dc;
  border-radius: 100rpx;
  margin: 40rpx auto 20rpx;
  flex-shrink: 0;
}

/* 基本信息区 - 卡片样式 */
.profile-info-section {
  display: flex;
  gap: 40rpx;
  padding: 32rpx;
  background: #fff;
  border: 2rpx solid #f3f4f6;
  border-radius: 32rpx;
}

.profile-avatar-large {
  width: 180rpx;
  height: 180rpx;
  flex-shrink: 0;
}

.avatar-placeholder-large {
  width: 180rpx;
  height: 180rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 12rpx -8rpx rgba(0, 0, 0, 0.1), 0 20rpx 30rpx -6rpx rgba(0, 0, 0, 0.1);
}

.avatar-text-large {
  font-size: 64rpx;
  font-weight: 700;
  color: #fff;
}

.avatar-img-large {
  width: 100%;
  height: 100%;
  border-radius: 32rpx;
}

.profile-basic-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding-top: 8rpx;
}

.profile-name-large {
  font-size: 48rpx;
  font-weight: 900;
  color: #101828;
  line-height: 1.33;
}

.profile-details-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.profile-detail-item {
  font-size: 32rpx;
  color: #364153;
  line-height: 1.5;
  display: flex;
}

.profile-detail-item text:first-child,
.detail-label-text {
  color: #6a7282;
  font-weight: 700;
  width: 120rpx;
  flex-shrink: 0;
}

.detail-value-text {
  color: #364153;
  font-weight: 400;
}

/* 统计数据卡片 - 渐变背景 */
.profile-stats-card {
  background: linear-gradient(180deg, #faf8fb 0%, #f9f5fa 100%);
  border: 2rpx solid rgba(232, 213, 240, 0.3);
  border-radius: 32rpx;
  padding: 42rpx;
}

.stats-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  flex: 1;
}

.stats-value {
  font-size: 60rpx;
  font-weight: 900;
  color: #101828;
  line-height: 1.2;
}

.stats-label {
  font-size: 28rpx;
  color: #4a5565;
  line-height: 1.43;
}

.stats-divider {
  width: 2rpx;
  height: 124rpx;
  background: rgba(229, 231, 235, 0.6);
}

/* 信息区块卡片 - 通用样式 */
.profile-section-card {
  background: #fff;
  border: 2rpx solid #f3f4f6;
  border-radius: 32rpx;
  padding: 34rpx;
}

/* 区块标题带装饰点 */
.section-title {
  font-size: 36rpx;
  font-weight: 900;
  color: #101828;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  gap: 28rpx;
  line-height: 1.56;
}

.section-title::before {
  content: '';
  width: 12rpx;
  height: 12rpx;
  background: #b06ab3;
  border-radius: 50%;
  flex-shrink: 0;
}

.section-content {
  font-size: 32rpx;
  color: #364153;
  line-height: 1.625;
  padding-left: 40rpx;
}

/* 擅长领域标签 - 渐变背景 */
.expertise-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  padding-left: 40rpx;
}

.expertise-tag {
  background: linear-gradient(180deg, #e8d5f0 0%, #f0e5f5 100%);
  border: 2rpx solid rgba(216, 180, 230, 0.3);
  border-radius: 100rpx;
  padding: 14rpx 34rpx;
}

.tag-text {
  font-size: 32rpx;
  font-weight: 700;
  color: #8b4e9e;
}

/* 聆听寄语 - 特殊渐变背景 */
.profile-section-card.quote-card {
  background: linear-gradient(180deg, #f9f5fa 0%, #faf8fb 100%);
  border: 2rpx solid rgba(232, 213, 240, 0.5);
  padding: 42rpx;
}

.quote-card .section-content {
  font-size: 32rpx;
  color: #364153;
  line-height: 1.8;
  padding-left: 40rpx;
}

/* ========== 评价弹窗样式 ========== */
.review-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.review-modal {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f9fafb;
  border-radius: 24rpx 24rpx 0 0;
  z-index: 1001;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

.review-modal.show {
  transform: translateY(0);
}

.review-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  background: #fff;
  border-bottom: 2rpx solid #f3f4f6;
  border-radius: 24rpx 24rpx 0 0;
}

.review-modal-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #101828;
}

.review-modal-close {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 评分汇总 */
.review-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  background: #fff;
  border-bottom: 2rpx solid #f3f4f6;
}

.summary-left {
  display: flex;
  align-items: center;
  gap: 32rpx;
}

.summary-avatar {
  width: 128rpx;
  height: 128rpx;
}

.avatar-placeholder-small {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-text-small {
  font-size: 48rpx;
  font-weight: 700;
  color: #fff;
}

.summary-score {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.score-row {
  display: flex;
  align-items: baseline;
  gap: 4rpx;
}

.score-value {
  font-size: 60rpx;
  font-weight: 700;
  color: #101828;
}

.score-unit {
  font-size: 28rpx;
  color: #6a7282;
}

.stars-row {
  display: flex;
  gap: 8rpx;
}

.star-icon {
  font-size: 28rpx;
}

.review-count {
  font-size: 24rpx;
  color: #6a7282;
}

.summary-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4rpx;
}

.good-rate {
  font-size: 48rpx;
  font-weight: 700;
  color: #ff6900;
}

.good-rate-label {
  font-size: 24rpx;
  color: #6a7282;
}

/* 评价列表 */
.review-list {
  flex: 1;
  padding: 0 32rpx;
  overflow-y: auto;
}

.review-item {
  background: #fff;
  border-radius: 0;
  padding: 32rpx;
  margin-bottom: 2rpx;
  border-bottom: 2rpx solid #f3f4f6;
}

.review-item:first-child {
  margin-top: 0;
}

/* 用户信息行 */
.review-user-row {
  display: flex;
  gap: 24rpx;
  margin-bottom: 24rpx;
}

.review-user-avatar {
  width: 80rpx;
  height: 80rpx;
  flex-shrink: 0;
}

.user-avatar-img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.user-avatar-placeholder {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar-text {
  font-size: 28rpx;
  color: #6a7282;
}

.review-user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.user-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-name {
  font-size: 32rpx;
  color: #101828;
}

.review-date {
  font-size: 24rpx;
  color: #99a1af;
}

.review-stars {
  display: flex;
  gap: 4rpx;
}

.star-icon-small {
  font-size: 24rpx;
}

/* 评价内容 */
.review-content-wrap {
  margin-bottom: 24rpx;
}

.review-content {
  font-size: 28rpx;
  color: #364153;
  line-height: 1.625;
}

.review-content.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.expand-btn {
  font-size: 28rpx;
  color: #2b7fff;
  margin-top: 8rpx;
  display: inline-block;
}

/* 评价标签 */
.review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.review-tag {
  background: #fff7ed;
  border-radius: 100rpx;
  padding: 6rpx 20rpx;
}

.review-tag-text {
  font-size: 24rpx;
  color: #f54900;
}

/* 咨询师回复 */
.counselor-reply {
  background: #f9fafb;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
}

.reply-content {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.reply-label {
  font-size: 24rpx;
  color: #6a7282;
}

.reply-text {
  font-size: 24rpx;
  color: #4a5565;
  line-height: 1.625;
}

/* 点赞操作 */
.review-actions {
  display: flex;
  justify-content: flex-end;
}

.like-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.like-btn.liked {
  opacity: 0.6;
}

.like-btn.liked .like-count {
  color: #ff4d6d;
}

.like-icon {
  font-size: 32rpx;
}

.like-count {
  font-size: 24rpx;
  color: #99a1af;
}

/* 底部提示 */
.review-bottom-tip {
  text-align: center;
  padding: 32rpx 0;
}

.bottom-tip-text {
  font-size: 28rpx;
  color: #99a1af;
}

.review-loading {
  text-align: center;
  padding: 32rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #99a1af;
}

/* ========== 语音录音相关样式 ========== */

/* 语音按钮激活状态 */
.voice-btn.active {
  background: #e8d5f0;
  border-color: #b06ab3;
}

.voice-icon-img {
  width: 32rpx;
  height: 32rpx;
}

/* 按住说话按钮 */
.voice-record-btn {
  width: 100%;
  height: 88rpx;
  background: #f3f4f6;
  border-radius: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.voice-record-btn.recording {
  background: #e8d5f0;
}

.voice-record-text {
  font-size: 32rpx;
  color: #4a5565;
  font-weight: 500;
}

.voice-record-btn.recording .voice-record-text {
  color: #b06ab3;
}

/* 录音中遮罩层 */
.recording-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 录音弹窗 */
.recording-popup {
  width: 360rpx;
  padding: 48rpx 32rpx;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rpx;
}

.recording-popup.cancel {
  background: rgba(220, 38, 38, 0.9);
}

/* 录音图标 */
.recording-icon-wrap {
  width: 120rpx;
  height: 120rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 录音波形动画 */
.recording-wave {
  display: flex;
  align-items: center;
  gap: 8rpx;
  height: 60rpx;
}

.wave-bar {
  width: 8rpx;
  height: 20rpx;
  background: #fff;
  border-radius: 4rpx;
  animation: waveAnimation 0.5s ease-in-out infinite alternate;
}

.wave-bar:nth-child(1) { animation-delay: 0s; }
.wave-bar:nth-child(2) { animation-delay: 0.1s; }
.wave-bar:nth-child(3) { animation-delay: 0.2s; }
.wave-bar:nth-child(4) { animation-delay: 0.1s; }
.wave-bar:nth-child(5) { animation-delay: 0s; }

@keyframes waveAnimation {
  from {
    height: 20rpx;
  }
  to {
    height: 50rpx;
  }
}

.recording-popup.cancel .wave-bar {
  animation: none;
  height: 20rpx;
}

/* 录音提示文字 */
.recording-tip {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

/* 录音时长 */
.recording-duration {
  font-size: 48rpx;
  font-weight: 700;
  color: #fff;
}


/* ==================== 更多功能面板样式 ==================== */
.more-panel {
  background: #F5F5F5;
  border-top: 2rpx solid #E5E7EB;
}

.more-panel-content {
  padding: 40rpx 32rpx 24rpx;
}

.more-grid {
  display: flex;
  justify-content: space-between;
}

.more-grid.second-row {
  margin-top: 40rpx;
}

.more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  width: 25%;
}

.more-icon-wrap {
  width: 112rpx;
  height: 112rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.more-icon-img {
  width: 56rpx;
  height: 56rpx;
}

.more-text {
  font-size: 26rpx;
  font-weight: 500;
  color: #4A5565;
}

.new-tag {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background: #FF6B35;
  color: #FFFFFF;
  font-size: 18rpx;
  font-weight: 700;
  padding: 4rpx 10rpx;
  border-radius: 8rpx;
  line-height: 1;
}

/* 相册图标 */
.album-icon {
  width: 48rpx;
  height: 40rpx;
  position: relative;
}

.album-frame {
  width: 100%;
  height: 100%;
  border: 4rpx solid #9CA3AF;
  border-radius: 6rpx;
  position: relative;
}

.album-sun {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  width: 12rpx;
  height: 12rpx;
  background: #FBBF24;
  border-radius: 50%;
}

.album-mountain {
  position: absolute;
  bottom: 4rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12rpx solid transparent;
  border-right: 12rpx solid transparent;
  border-bottom: 16rpx solid #10B981;
}

/* 常用语图标 */
.quick-reply-icon {
  width: 48rpx;
  height: 40rpx;
  position: relative;
}

.reply-bubble1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 32rpx;
  height: 24rpx;
  background: #E5E7EB;
  border-radius: 12rpx 12rpx 12rpx 4rpx;
}

.reply-bubble2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32rpx;
  height: 24rpx;
  background: #914584;
  border-radius: 12rpx 12rpx 4rpx 12rpx;
}

/* 红包图标 */
.red-packet-icon {
  width: 40rpx;
  height: 52rpx;
  position: relative;
}

.packet-body {
  width: 100%;
  height: 100%;
  background: #EF4444;
  border-radius: 8rpx;
}

.packet-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20rpx;
  background: #DC2626;
  border-radius: 8rpx 8rpx 0 0;
}

.packet-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16rpx;
  height: 16rpx;
  background: #FBBF24;
  border-radius: 50%;
}

.more-panel-safe {
  height: env(safe-area-inset-bottom);
  background: #F5F5F5;
}

/* +号按钮激活状态 */
.add-btn.active {
  background: #E5E7EB;
  border-radius: 8rpx;
}

/* 表情按钮激活状态 */
.emoji-btn.active {
  background: #E5E7EB;
  border-radius: 8rpx;
}

/* ==================== 表情面板样式 ==================== */
.emoji-panel {
  background: #FFFFFF;
  border-top: 2rpx solid #F3F4F6;
}

.emoji-scroll {
  height: 480rpx;
  padding: 24rpx;
  box-sizing: border-box;
}

.emoji-grid {
  display: flex;
  flex-wrap: wrap;
}

.emoji-item {
  width: 12.5%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emoji-text {
  font-size: 56rpx;
  line-height: 1;
}

.emoji-item:active {
  background: #F3F4F6;
  border-radius: 16rpx;
}

/* 表情面板底部操作 */
.emoji-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24rpx;
  padding: 16rpx 32rpx;
  border-top: 2rpx solid #F3F4F6;
  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
  background: #FFFFFF;
}

.emoji-delete {
  width: 80rpx;
  height: 72rpx;
  background: #F3F4F6;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-icon {
  width: 40rpx;
  height: 40rpx;
  transform: rotate(180deg);
}

.emoji-send {
  width: 120rpx;
  height: 72rpx;
  background: #E5E7EB;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #9CA3AF;
}

.emoji-send.active {
  background: #914584;
  color: #FFFFFF;
}