MBTI_wang/miniprogram/pages/ai-chat/index.wxss

/* 神仙 AI · 对话页样式 */
page {
  height: 100%;
  background: linear-gradient(180deg, #F5F3FF 0%, #FFFFFF 40%);
}

.ai-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* 给底部 tabBar + 输入栏预留空间；使用全局变量避免不同机型遮挡 */
  padding-bottom: calc(var(--tabbar-pad, 160rpx) + 150rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

/* 推荐区块：折叠条 */
.soul-articles-wrap {
  margin: 0 24rpx 12rpx;
}

.articles-fold-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18rpx 20rpx;
  background: #ffffff;
  border-radius: 16rpx;
  border: 1rpx solid #e9d5ff;
  box-shadow: 0 2rpx 10rpx rgba(124, 58, 237, 0.06);
}

.articles-fold-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10rpx;
  min-width: 0;
}

.articles-fold-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #4c1d95;
}

.articles-fold-pill {
  font-size: 20rpx;
  color: #6d28d9;
  background: #ede9fe;
  padding: 4rpx 14rpx;
  border-radius: 100rpx;
  font-weight: 600;
}

.articles-fold-count {
  font-size: 22rpx;
  color: #9ca3af;
}

.articles-fold-chevron {
  font-size: 22rpx;
  color: #7c3aed;
  flex-shrink: 0;
  margin-left: 12rpx;
}

/* MBTI 测评提醒卡 */
.mbti-remind-card {
  margin: 0 24rpx 14rpx;
  padding: 20rpx 22rpx;
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border-radius: 20rpx;
  border: 1rpx solid #e9d5ff;
  box-shadow: 0 4rpx 14rpx rgba(124, 58, 237, 0.08);
}

.mbti-remind-row {
  display: flex;
  align-items: flex-start;
  gap: 14rpx;
  margin-bottom: 16rpx;
}

.mbti-remind-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  border: 2rpx solid #e9d5ff;
  flex-shrink: 0;
}

.mbti-remind-texts {
  flex: 1;
  min-width: 0;
}

.mbti-remind-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #1f1b4d;
  margin-bottom: 6rpx;
}

.mbti-remind-sub {
  font-size: 24rpx;
  color: #6b5f8a;
  line-height: 1.45;
}

.mbti-remind-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}

.mbti-remind-tag {
  font-size: 22rpx;
  font-weight: 600;
  color: #5b21b6;
  background: rgba(255, 255, 255, 0.85);
  padding: 8rpx 20rpx;
  border-radius: 100rpx;
  border: 1rpx solid #ddd6fe;
}

.mbti-remind-btn {
  flex-shrink: 0;
  padding: 14rpx 36rpx;
  font-size: 26rpx;
  font-weight: 700;
  color: #ffffff;
  border-radius: 100rpx;
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  box-shadow: 0 4rpx 14rpx rgba(124, 58, 237, 0.35);
}

.mbti-remind-btn--press {
  opacity: 0.88;
  transform: scale(0.98);
}

/* 顶部推荐文章列表 */
.soul-articles {
  padding: 12rpx 0 0;
}

.articles-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.article-card {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #ffffff;
  border-radius: 18rpx;
  box-shadow: 0 6rpx 20rpx rgba(124, 58, 237, 0.1);
  border: 1rpx solid rgba(124, 58, 237, 0.08);
  overflow: hidden;
}

.article-cover-wrap {
  width: 200rpx;
  min-width: 200rpx;
  padding: 10rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #faf5ff 0%, #f3e8ff 100%);
}

.article-cover {
  width: 100%;
  height: 120rpx;
  border-radius: 14rpx;
  background: #ede9fe;
  box-shadow: 0 2rpx 8rpx rgba(124, 58, 237, 0.12);
}

.article-body {
  flex: 1;
  min-width: 0;
  padding: 10rpx 12rpx;
}

.article-title {
  font-size: 22rpx;
  color: #1F1B4D;
  line-height: 1.4;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
}

.article-meta {
  margin-top: 6rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.article-pill {
  font-size: 20rpx;
  color: #5b21b6;
  background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
  padding: 4rpx 14rpx;
  border-radius: 100rpx;
  font-weight: 600;
  border: 1rpx solid #ddd6fe;
}

.article-time {
  font-size: 18rpx;
  color: #9CA3AF;
}

/* 聊天区：flex:1 撑开，不再用 100vh 硬算 */
.chat-scroll {
  flex: 1;
  min-height: 0;
  padding: 8rpx 24rpx 160rpx;
  box-sizing: border-box;
}

/* 欢迎卡：紧凑化，不再占整屏 */
.welcome {
  margin: 8rpx 0 20rpx;
  padding: 24rpx 28rpx;
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
  border: 1rpx solid #EDE9FE;
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.welcome-head {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 8rpx;
}

.welcome-logo {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  border: 2rpx solid #E9D5FF;
  box-shadow: 0 2rpx 10rpx rgba(124, 58, 237, 0.2);
}

.welcome-title {
  font-size: 30rpx;
  font-weight: 700;
  color: #1F1B4D;
}

.welcome-sub {
  font-size: 24rpx;
  color: #6B6894;
  margin-bottom: 16rpx;
  line-height: 1.5;
}

.mbti-badge {
  display: inline-block;
  margin: 0 4rpx;
  padding: 2rpx 14rpx;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: #ffffff;
  border-radius: 100rpx;
  font-weight: 600;
  font-size: 22rpx;
}

.quick-title {
  font-size: 24rpx;
  color: #4C1D95;
  font-weight: 600;
  margin-bottom: 10rpx;
}

.quick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}

.quick-item {
  background: #ffffff;
  border-radius: 100rpx;
  padding: 14rpx 22rpx;
  font-size: 24rpx;
  color: #4C1D95;
  border: 1rpx solid #DDD6FE;
}

.quick-item:active {
  background: #EDE9FE;
  transform: scale(0.98);
}

/* 消息气泡 */
.msg-wrap {
  margin-bottom: 24rpx;
}

.msg {
  display: flex;
  align-items: flex-start;
}

.msg-ai {
  justify-content: flex-start;
}

.msg-me {
  justify-content: flex-end;
}

.avatar-ai {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  border: 2rpx solid #E9D5FF;
  background: #fff;
  margin-right: 14rpx;
  flex-shrink: 0;
  overflow: hidden;
}

.bubble {
  max-width: 74%;
  padding: 18rpx 22rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.bubble-ai {
  background: #ffffff;
  color: #1F1B4D;
  border-top-left-radius: 4rpx;
  box-shadow: 0 2rpx 10rpx rgba(31, 27, 77, 0.06);
}

.bubble-me {
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: #ffffff;
  border-top-right-radius: 4rpx;
}

.bubble-degraded {
  background: #FFF7ED;
  color: #C2410C;
  border: 1rpx solid #FED7AA;
}

.bubble-meta {
  margin-top: 8rpx;
  font-size: 20rpx;
  opacity: 0.7;
}

.typing {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.scroll-bottom {
  height: 40rpx;
}

/* ==== 深度报告 CTA ==== */
.report-cta {
  margin: 16rpx 0 8rpx;
  padding: 22rpx 24rpx;
  background: linear-gradient(135deg, #FDE68A 0%, #F9A8D4 100%);
  color: #78350F;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 6rpx 18rpx rgba(249, 168, 212, 0.3);
}
.report-cta-text {
  font-size: 26rpx;
  font-weight: 600;
  flex: 1;
  padding-right: 12rpx;
}
.report-cta-btn {
  padding: 10rpx 22rpx;
  border-radius: 100rpx;
  background: #78350F;
  color: #FEF3C7;
  font-size: 24rpx;
}

.quick-bottom-scroll {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-height, 132rpx) + env(safe-area-inset-bottom) + 84rpx);
  padding: 0 16rpx 4rpx;
  z-index: 21;
}

.quick-bottom-list {
  white-space: nowrap;
}

.quick-bottom-item {
  display: inline-block;
  margin-right: 10rpx;
  padding: 10rpx 16rpx;
  border-radius: 999rpx;
  background: #F5F3FF;
  color: #5B21B6;
  font-size: 22rpx;
  border: 1rpx solid #DDD6FE;
}

/* ==== 输入区：紧贴自定义 tabBar 上方 ==== */
.input-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-height, 132rpx) + env(safe-area-inset-bottom));
  background: #ffffff;
  padding: 12rpx 16rpx 12rpx 20rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
  border-top: 1rpx solid #F3F4F6;
  z-index: 20;
}

.input {
  flex: 1;
  background: #F3F4F6;
  border-radius: 100rpx;
  padding: 12rpx 20rpx;
  font-size: 27rpx;
  min-height: 62rpx;
  color: #1F1B4D;
}

.input-ph {
  color: #9CA3AF;
  font-size: 26rpx;
}

/* 发送：独立按钮块（非原生 button，样式可控） */
.send-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28rpx;
  min-width: 108rpx;
  height: 64rpx;
  border-radius: 16rpx;
  margin-left: 16rpx;
  margin-right: 4rpx;
  box-sizing: border-box;
  background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%);
  border: 2rpx solid #d1d5db;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.06);
}

.send-btn__label {
  font-size: 28rpx;
  font-weight: 600;
  color: #6b7280;
}

.send-btn--active {
  background: linear-gradient(180deg, #9333ea 0%, #7c3aed 100%);
  border-color: #6d28d9;
  box-shadow: 0 4rpx 14rpx rgba(124, 58, 237, 0.35);
}

.send-btn--active .send-btn__label {
  color: #ffffff;
}

.send-btn--disabled {
  opacity: 0.5;
}

.send-btn--press {
  transform: scale(0.97);
  opacity: 0.92;
}