ai-human/miniprogram/pages/historyPackage/historyDetail/index.wxss

page {
  min-height: 100vh;
  background: #fbfcff;
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.detail-page {
  width: 750rpx;
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 58%, #ffffff 100%);
}

.detail-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-back,
.nav-placeholder {
  width: 58rpx;
  height: 58rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}

.nav-back text {
  width: 24rpx;
  height: 24rpx;
  display: block;
  border-left: 5rpx solid #111827;
  border-bottom: 5rpx solid #111827;
  transform: rotate(45deg);
  box-sizing: border-box;
}

.nav-title {
  font-size: 31rpx;
  font-weight: 900;
  color: #111827;
}

.detail-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18rpx;
  padding: 24rpx 20rpx 34rpx;
  box-sizing: border-box;
}

.video-card {
  height: 332rpx;
  border-radius: 14rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 12% 30%, rgba(111, 139, 78, 0.34), transparent 15%),
    radial-gradient(circle at 88% 30%, rgba(111, 139, 78, 0.26), transparent 13%),
    linear-gradient(90deg, #e7d9c7 0%, #faf2e8 52%, #d8c4a9 100%);
}

.speaker-avatar {
  width: 150rpx;
  height: 230rpx;
  border-radius: 75rpx 75rpx 24rpx 24rpx;
  background:
    radial-gradient(circle at 38% 36%, #17131a 0 6rpx, transparent 7rpx),
    radial-gradient(circle at 62% 36%, #17131a 0 6rpx, transparent 7rpx),
    radial-gradient(circle at 50% 50%, #df7f87 0 8rpx, transparent 9rpx),
    linear-gradient(180deg, #17131a 0 28%, #ffe0cd 28% 50%, #ffffff 50% 100%);
}

.play-circle {
  width: 96rpx;
  height: 96rpx;
  margin-left: -126rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.38);
  border: 4rpx solid rgba(255, 255, 255, 0.76);
}

.play-circle text {
  width: 0;
  height: 0;
  border-top: 24rpx solid transparent;
  border-bottom: 24rpx solid transparent;
  border-left: 34rpx solid #ffffff;
  margin-left: 8rpx;
}

.duration-badge {
  align-self: flex-end;
  margin-left: -310rpx;
  margin-bottom: 18rpx;
  height: 36rpx;
  padding: 0 12rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 20rpx;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.56);
}

.info-card,
.related-card,
.failure-alert,
.advice-card {
  border-radius: 15rpx;
  background: rgba(255, 255, 255, 0.96);
  border: 1rpx solid #eef1fb;
  box-shadow: 0 6rpx 18rpx rgba(82, 90, 146, 0.05);
  box-sizing: border-box;
}

.info-card {
  padding: 18rpx 24rpx;
  display: flex;
  flex-direction: column;
}

.info-row {
  min-height: 54rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
  border-bottom: 1rpx solid #eef0f6;
}

.info-row:last-child {
  border-bottom: 0;
}

.info-label {
  width: 150rpx;
  flex-shrink: 0;
  color: #596072;
  font-size: 22rpx;
  font-weight: 800;
}

.info-value,
.value-with-thumb {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16rpx;
  color: #33394b;
  font-size: 22rpx;
  font-weight: 700;
  text-align: right;
}

.status-done {
  color: #32c07a;
  font-size: 22rpx;
  font-weight: 900;
}

.mini-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 10rpx;
  background: linear-gradient(180deg, #1e1b20 0 35%, #ffd8c8 35% 62%, #ffffff 62% 100%);
}

.mini-scene {
  width: 50rpx;
  height: 34rpx;
  border-radius: 5rpx;
}

.live-scene {
  background: linear-gradient(135deg, #eadfcc, #ffffff 52%, #bbc99d);
}

.living-scene {
  background: linear-gradient(135deg, #e0c6a6, #fff4e9 52%, #b28b68);
}

.audio-thumb {
  width: 50rpx;
  height: 34rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1efff;
}

.audio-thumb text,
.voice-icon,
.refresh-icon,
.copy-icon,
.edit-icon,
.download-icon,
.trash-icon {
  display: block;
  color: currentColor;
}

.audio-thumb text {
  width: 22rpx;
  height: 24rpx;
  border-left: 5rpx solid #665cff;
  border-right: 5rpx solid #665cff;
  box-sizing: border-box;
}

.copy-row {
  align-items: flex-start;
  padding: 14rpx 0;
}

.copy-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12rpx;
  color: #33394b;
  font-size: 21rpx;
  line-height: 1.45;
  text-align: right;
}

.view-copy {
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: #665cff;
  font-size: 21rpx;
  font-weight: 900;
}

.view-copy text,
.item-arrow {
  width: 14rpx;
  height: 14rpx;
  border-top: 4rpx solid currentColor;
  border-right: 4rpx solid currentColor;
  transform: rotate(45deg);
}

.action-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22rpx;
}

.download-action,
.outline-action,
.primary-action {
  height: 66rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  font-size: 23rpx;
  font-weight: 900;
  box-sizing: border-box;
}

.download-action,
.primary-action {
  color: #ffffff;
  background: linear-gradient(135deg, #4f85ff 0%, #7d42f0 100%);
  box-shadow: 0 8rpx 18rpx rgba(91, 83, 244, 0.18);
}

.outline-action {
  color: #665cff;
  background: #ffffff;
  border: 2rpx solid #dcdcff;
}

.download-icon {
  width: 22rpx;
  height: 24rpx;
  border-bottom: 4rpx solid currentColor;
}

.refresh-icon {
  width: 22rpx;
  height: 22rpx;
  border: 4rpx solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
}

.edit-icon {
  width: 22rpx;
  height: 22rpx;
  border-left: 5rpx solid currentColor;
  border-bottom: 5rpx solid currentColor;
  transform: rotate(-45deg);
  box-sizing: border-box;
}

.related-card {
  padding: 22rpx 24rpx;
}

.related-title {
  display: block;
  padding-bottom: 18rpx;
  color: #121722;
  font-size: 25rpx;
  font-weight: 900;
  border-bottom: 1rpx solid #edf0f6;
}

.related-item {
  min-height: 58rpx;
  display: flex;
  align-items: center;
  gap: 18rpx;
  color: #4b5262;
  font-size: 23rpx;
  font-weight: 800;
  border-bottom: 1rpx solid #edf0f6;
}

.related-item:last-child {
  border-bottom: 0;
}

.related-item text:nth-child(2) {
  flex: 1;
}

.related-item.danger {
  color: #ff5d59;
}

.copy-icon {
  width: 22rpx;
  height: 22rpx;
  border: 4rpx solid currentColor;
  border-radius: 4rpx;
  box-sizing: border-box;
}

.trash-icon {
  width: 22rpx;
  height: 24rpx;
  border: 4rpx solid currentColor;
  border-top: 0;
  border-radius: 0 0 5rpx 5rpx;
  box-sizing: border-box;
}

.failure-alert {
  min-height: 146rpx;
  padding: 28rpx 36rpx;
  display: flex;
  align-items: center;
  gap: 30rpx;
  background: #fff4f2;
  border-color: #ffd2ce;
}

.alert-icon {
  width: 80rpx;
  height: 70rpx;
  border-radius: 14rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 42rpx;
  font-weight: 900;
  background: #f05a52;
  transform: perspective(120rpx) rotateX(8deg);
}

.alert-copy {
  display: flex;
  flex-direction: column;
  gap: 14rpx;
}

.alert-title {
  color: #e64038;
  font-size: 29rpx;
  font-weight: 900;
}

.alert-desc {
  color: #7d5d5d;
  font-size: 23rpx;
  font-weight: 700;
}

.fail-info-card .info-row {
  min-height: 66rpx;
}

.voice-error {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10rpx;
  color: #ef514c;
  font-size: 24rpx;
  font-weight: 900;
}

.error-dot {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 17rpx;
  background: #ef514c;
}

.reason-row {
  align-items: flex-start;
  padding: 18rpx 0;
}

.reason-text {
  flex: 1;
  color: #505668;
  font-size: 22rpx;
  line-height: 1.45;
  font-weight: 700;
}

.advice-card {
  padding: 24rpx 28rpx;
  display: flex;
  flex-direction: column;
  gap: 18rpx;
  background: #fff9ea;
  border-color: #f6d99e;
}

.advice-head {
  display: flex;
  align-items: center;
  gap: 14rpx;
  color: #4b2a0d;
  font-size: 25rpx;
  font-weight: 900;
}

.bulb-icon {
  width: 34rpx;
  height: 34rpx;
  border: 4rpx solid #ad7b2b;
  border-radius: 50%;
  box-sizing: border-box;
}

.advice-text {
  color: #5a6274;
  font-size: 23rpx;
  line-height: 1.65;
  font-weight: 700;
}

.failed-page .primary-action,
.failed-page .outline-action {
  height: 84rpx;
  border-radius: 13rpx;
  font-size: 28rpx;
}

.failed-page .outline-action {
  border-color: #dcdcff;
}

.voice-icon {
  width: 24rpx;
  height: 28rpx;
  border-left: 5rpx solid currentColor;
  border-right: 5rpx solid currentColor;
  box-sizing: border-box;
}

.delete-link {
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f05a52;
  font-size: 28rpx;
  font-weight: 800;
}

.processing-page .detail-content {
  gap: 26rpx;
  padding-left: 32rpx;
  padding-right: 32rpx;
}

.processing-card {
  border-radius: 17rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1rpx solid #e6e9fb;
  box-shadow: 0 8rpx 22rpx rgba(82, 90, 146, 0.06);
}

.processing-head {
  min-height: 226rpx;
  padding: 28rpx 28rpx 26rpx;
  display: flex;
  align-items: center;
  gap: 30rpx;
  background: linear-gradient(100deg, #f4f6ff, #ffffff);
  box-sizing: border-box;
}

.ai-visual {
  width: 178rpx;
  height: 158rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-box {
  width: 88rpx;
  height: 88rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 900;
  background: linear-gradient(135deg, #7d74ff, #3c93f4);
  box-shadow: 22rpx 10rpx 0 rgba(86, 204, 255, 0.26), 0 14rpx 26rpx rgba(77, 83, 234, 0.24);
}

.ai-base {
  width: 150rpx;
  height: 42rpx;
  margin-top: -2rpx;
  border-radius: 50%;
  background: linear-gradient(90deg, #6d55f3, #ffffff 50%, #8a78ff);
  box-shadow: 0 10rpx 18rpx rgba(96, 116, 255, 0.18);
}

.processing-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.processing-title {
  color: #101522;
  font-size: 34rpx;
  line-height: 1.2;
  font-weight: 900;
}

.processing-desc {
  margin-top: 16rpx;
  color: #6d7385;
  font-size: 24rpx;
  font-weight: 700;
}

.progress-row {
  margin-top: 34rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
  color: #4a4e63;
  font-size: 24rpx;
  font-weight: 800;
}

.progress-track {
  flex: 1;
  height: 16rpx;
  border-radius: 999rpx;
  background: #e5e6fb;
  overflow: hidden;
}

.progress-fill {
  width: 78%;
  height: 100%;
  border-radius: 999rpx;
  background: linear-gradient(90deg, #4d82ff, #7d42f0);
}

.stage-row {
  min-height: 150rpx;
  padding: 28rpx 28rpx 22rpx;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-top: 1rpx solid #edf0f7;
  box-sizing: border-box;
}

.stage-item {
  width: 104rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  color: #575e70;
  font-size: 21rpx;
  font-weight: 800;
  text-align: center;
}

.stage-dot {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4rpx solid #d5d4ff;
  box-sizing: border-box;
}

.stage-item.done .stage-dot {
  background: #5d6dff;
  border-color: #5d6dff;
}

.stage-dot text {
  width: 17rpx;
  height: 9rpx;
  border-left: 4rpx solid #ffffff;
  border-bottom: 4rpx solid #ffffff;
  transform: rotate(-45deg);
}

.stage-dot.loading {
  border-color: #6d5fff;
  border-top-color: rgba(109, 95, 255, 0.16);
}

.stage-line {
  width: 78rpx;
  height: 4rpx;
  margin-top: 20rpx;
  border-radius: 999rpx;
  background: #d8d8ff;
}

.stage-line.dashed {
  background: repeating-linear-gradient(90deg, #d8d8ff 0 10rpx, transparent 10rpx 18rpx);
}

.processing-info-card .info-row {
  min-height: 74rpx;
}

.product-scene {
  background: linear-gradient(135deg, #eadfcc, #fff8ef 52%, #c8b089);
}

.clock-icon {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  border: 4rpx solid #665cff;
  box-sizing: border-box;
}

.processing-page .primary-action,
.processing-page .outline-action {
  height: 84rpx;
  border-radius: 13rpx;
  font-size: 29rpx;
}

.bottom-tip {
  height: 72rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14rpx;
  color: #6d69c9;
  font-size: 24rpx;
  font-weight: 800;
  background: #f4f5ff;
  border: 1rpx solid #e2e5ff;
}

.bottom-tip .bulb-icon {
  border-color: #75a4ff;
}

.icon-placeholder {
  display: block;
  flex-shrink: 0;
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
}