/* pages/album/album.wxss - 日记式分组相册 */
@import '../../styles/common.wxss';
page { background: linear-gradient(180deg, #FDE4EC 0%, #FFF0F5 48%, #FFF7FA 100%); height: 100vh; overflow: hidden; }
scroll-view.page-bg { height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; }

.upload-root {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1000;
  background: #FAFAFA;
  display: flex; flex-direction: column;
}
.upload-nav {
  display: flex; align-items: center;
  padding: 96rpx 32rpx 16rpx;
}
.upload-back {
  width: 56rpx; height: 56rpx;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10rpx);
}
.upload-back .back-icon { width: 28rpx; height: 28rpx; }
.upload-body {
  flex: 1; padding: 0 16rpx; overflow-y: auto;
}

/* 三宫格照片 - 精确三等分 */
.photo-grid {
  display: flex; flex-wrap: wrap;
  gap: 10rpx;
  padding: 8rpx 0 20rpx;
}
.photo-grid-item {
  width: calc((100% - 20rpx) / 3);
  aspect-ratio: 1;
  border-radius: 14rpx;
  overflow: hidden;
  position: relative;
  background: #f0f0f0;
  box-sizing: border-box;
}
.photo-grid-item.selected {
  border: 4rpx solid #B74768;
  box-shadow: 0 0 0 2rpx rgba(255,107,157,0.3);
}
.photo-grid-img {
  width: 100%;
  height: 100%;
  display: block;
}
.photo-has-form {
  position: absolute;
  bottom: 6rpx;
  left: 6rpx;
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  background: rgba(255,107,157,0.85);
  color: white;
  font-size: 22rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.photo-del-btn {
  position: absolute;
  top: 4rpx;
  right: 4rpx;
  width: 38rpx;
  height: 38rpx;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.photo-del-x {
  color: white;
  font-size: 22rpx;
  font-weight: 700;
  line-height: 1;
}

/* 添加更多 */
.photo-grid-add {
  background: #fff;
  border: 2rpx dashed #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rpx;
}
.add-plus { font-size: 44rpx; color: #ccc; font-weight: 300; }
.add-label { font-size: 20rpx; color: #bbb; }

/* 表单卡片 */
.upload-form-card {
  background: white;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
}
.form-card-head {
  display: flex; align-items: center; gap: 16rpx;
  margin-bottom: 20rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #F4E2E3;
}
.form-preview {
  width: 80rpx; height: 80rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}
.form-card-desc {
  font-size: 24rpx; color: #999;
}
.upload-form-card .input-group { margin-bottom: 16rpx; }
.upload-form-card .input-group:last-child { margin-bottom: 0; }
.upload-form-card .input-group label { font-size: 26rpx; font-weight: 500; color: #555; display: block; margin-bottom: 8rpx; }
.upload-form-card .input { padding: 18rpx 22rpx; font-size: 28rpx; background: #FFF5F8; border-radius: 14rpx; border: 1rpx solid #F4E2E3; }

/* 空状态 */
.upload-empty {
  text-align: center; padding: 200rpx 40rpx;
}
.upload-empty .empty-icon { font-size: 80rpx; display: block; margin-bottom: 16rpx; }
.upload-empty .empty-desc { font-size: 28rpx; color: #bbb; display: block; }

/* 底部上传按钮 */
.upload-footer {
  padding: 12rpx 24rpx;
  padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
}

.container { padding-top: 16rpx; padding-bottom: 300rpx; }

/* ===== 留念卡片（复用日记样式） ===== */
.moments-list { display: flex; flex-direction: column; gap: 24rpx; }
.moments-item {
  display: flex; gap: 24rpx; background: white; border-radius: 24rpx;
  padding: 32rpx; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.04);
}
.moments-avatar { flex-shrink: 0; }
.moments-avatar-img { width: 72rpx; height: 72rpx; border-radius: 50%; }
.avatar-circle {
  width: 72rpx; height: 72rpx; border-radius: 50%;
  background: linear-gradient(135deg, #B74768, #B388FF);
  display: flex; align-items: center; justify-content: center;
  font-size: 28rpx; font-weight: 700; color: white;
}
.moments-body { flex: 1; min-width: 0; }
.moments-name-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24rpx;
  margin-bottom: 8rpx;
}
.moments-name { font-size: 28rpx; font-weight: 600; color: #B74768; }
.moments-count { font-size: 22rpx; color: #999; }
.moments-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12rpx; }
.moments-time { font-size: 22rpx; color: #999; font-weight: 500; flex-shrink: 0; margin-left: auto; }

/* ===== 朋友圈9宫格 ===== */
.moments-images {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40rpx;
}
.album-img-wrap {
  width: 33.333%;
  height: 0;
  padding-bottom: 33.333%;
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
  box-sizing: border-box;
}
.album-img-wrap:not(:nth-child(3n)) { padding-right: 4rpx; }
.album-img-wrap:nth-child(n+4):nth-child(-n+6) { padding-top: 4rpx; }
.album-img-wrap:nth-child(n+7) { padding-top: 4rpx; }
.album-img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}

/* ===== 全屏明信片预览（导航栏下方整屏） ===== */
.preview-overlay {
  position: fixed; top: var(--nav-height,64px); left: 0; right: 0;
  height: calc(100vh - var(--nav-height,64px));
  background: rgba(0,0,0,0.93); z-index: 9999;
}
.preview-swiper { width: 100%; height: 100%; }
.preview-postcard {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 640rpx;
  background: #fffdf7;
  background-image:
    radial-gradient(circle at 12% 88%, rgba(255,107,157,0.05) 0, rgba(255,107,157,0.05) 60rpx, transparent 61rpx),
    radial-gradient(circle at 90% 8%, rgba(255,186,210,0.08) 0, rgba(255,186,210,0.08) 46rpx, transparent 47rpx);
  border: 1rpx solid #f5e3d0;
  display: flex;
  flex-direction: column;
  padding: 20rpx 24rpx 18rpx;
  box-sizing: border-box;
  overflow-y: auto;
  box-shadow: inset 0 0 0 6rpx rgba(255,255,255,0.6), 0 20rpx 60rpx rgba(0,0,0,0.35);
}
/* 左上角爱心印章（叠加在照片左上角） */
.postcard-seal {
  position: absolute;
  top: 20rpx; left: 20rpx;
  width: 64rpx; height: 64rpx;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  border: 3rpx double rgba(255,107,157,0.6);
  color: rgba(255,107,157,0.8);
  font-size: 28rpx;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-12deg);
  z-index: 3;
}
/* 右上角爱心邮票（叠加在照片右上角） */
.postcard-stamp {
  position: absolute;
  top: 14rpx; right: 14rpx;
  width: 84rpx; height: 98rpx;
  background: #fff;
  border: 3rpx dashed #B74768;
  border-radius: 8rpx;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 3;
  transform: rotate(4deg);
  box-shadow: 0 4rpx 14rpx rgba(255,107,157,0.25);
}
.stamp-heart {
  font-size: 36rpx;
  line-height: 1.1;
  color: #B74768;
}
.stamp-text {
  font-size: 15rpx;
  letter-spacing: 2rpx;
  color: #B74768;
  font-weight: 700;
  margin-top: 2rpx;
}
/* 照片白边相框 */
.postcard-photo-frame {
  position: relative;
  flex: 1;
  min-height: 220rpx;
  padding: 10rpx;
  background: #fff;
  border-radius: 10rpx;
  box-shadow: 0 10rpx 30rpx rgba(180,120,90,0.18);
  box-sizing: border-box;
  overflow: hidden;
}
.postcard-photo {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
  background: #f2e8d5;
  display: block;
}
/* 底部书写区 */
.postcard-body {
  flex-shrink: 0;
  margin-top: 14rpx;
  padding: 12rpx 4rpx 6rpx;
  border-top: 1rpx dashed #e8c9a8;
}
.postcard-rule {
  display: flex;
  align-items: flex-start;
  gap: 10rpx;
  padding: 6rpx 0;
  line-height: 1.45;
  font-size: 24rpx;
  color: #6b4a2f;
}
.rule-icon {
  font-size: 22rpx;
  flex-shrink: 0;
  line-height: 1.45;
}
.rule-text {
  flex: 1;
  word-break: break-all;
  line-height: 1.45;
}
.postcard-empty {
  color: #c9b294;
  font-size: 24rpx;
}
.postcard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8rpx;
  padding-top: 8rpx;
  border-top: 1rpx dashed rgba(232,201,168,0.6);
}
.footer-slogan {
  font-size: 20rpx;
  color: #B74768;
  letter-spacing: 2rpx;
}
.footer-hint {
  font-size: 18rpx;
  color: #c9a98a;
}
.preview-counter {
  position: absolute; bottom: 24rpx; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.55); color: white; padding: 8rpx 28rpx;
  border-radius: 40rpx; font-size: 26rpx;
  z-index: 20;
}

@import '../../styles/design.wxss';

@import '../../styles/journal.wxss';

/* 卡片上的照片故事与编辑入口。 */
.moments-name-row { align-items:center; gap:14rpx; margin-bottom:0; }
.moments-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.moments-count { flex-shrink:0; }
.moments-more { margin-left:auto; flex-shrink:0; width:88rpx; height:88rpx; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#85776D; font-size:28rpx; letter-spacing:3rpx; }
.moments-more-pressed { background:#FFF0F5; }
.moments-upload-time { display:block; margin:0 0 20rpx; font-size:20rpx; color:#A39386; }
.moments-images { margin-top:20rpx; }
.moments-metadata { margin-top:18rpx; padding:16rpx 20rpx; border-radius:20rpx; background:#FFF5F8; }
.moment-note + .moment-note { border-top:1rpx solid #F1DCE4; margin-top:18rpx; padding-top:18rpx; }
.moment-photo-label { display:block; font-size:20rpx; color:#B74768; margin-bottom:12rpx; }
.moment-meta-row { display:flex; align-items:flex-start; gap:18rpx; margin-top:8rpx; font-size:24rpx; line-height:1.6; }
.moment-meta-label { flex-shrink:0; color:#A39386; font-size:21rpx; padding-top:2rpx; }
.moment-meta-value { color:#62504F; overflow-wrap:break-word; min-width:0; white-space:pre-wrap; }
.moment-story { color:#352E2A; }
.moment-add-note { margin-top:22rpx; padding:16rpx 0 2rpx; border-top:1rpx dashed #F1DCE4; color:#B74768; font-size:22rpx; line-height:1.6; }
.photo-editor-mask { position:fixed; inset:0; z-index:1300; display:flex; align-items:flex-end; }
.photo-editor-backdrop { position:absolute; inset:0; background:rgba(53,46,42,.35); }
.photo-editor-sheet { position:relative; width:100%; max-height:90vh; display:flex; flex-direction:column; background:#FFFCFD; border-radius:40rpx 40rpx 0 0; padding:16rpx 32rpx calc(24rpx + env(safe-area-inset-bottom)); box-sizing:border-box; }
.photo-editor-grip { width:64rpx; height:7rpx; border-radius:8rpx; background:#EBD5DE; margin:0 auto 26rpx; }
.photo-editor-head { display:flex; align-items:flex-start; gap:20rpx; margin-bottom:24rpx; }
.photo-editor-head > view:first-child { flex:1; min-width:0; }
.photo-editor-title { display:block; font-size:33rpx; font-weight:600; color:#352E2A; }
.photo-editor-caption { display:block; margin-top:10rpx; font-size:23rpx; color:#A39386; }
.photo-editor-close { width:64rpx; height:64rpx; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#FFF0F5; color:#85776D; font-size:40rpx; }
.photo-editor-body { flex:none; height:760rpx; max-height:60vh; }
.photo-editor-picker { width:100%; white-space:nowrap; margin-bottom:28rpx; }
.photo-editor-thumbs { display:flex; gap:16rpx; padding:4rpx; }
.photo-editor-thumb { flex-shrink:0; padding:6rpx; border:2rpx solid transparent; border-radius:20rpx; text-align:center; }
.photo-editor-thumb image { display:block; width:104rpx; height:104rpx; border-radius:14rpx; }
.photo-editor-thumb text { display:block; font-size:20rpx; color:#A39386; margin-top:8rpx; }
.photo-editor-selected { border-color:#B74768; background:#FFF0F5; }.photo-editor-selected text { color:#B74768; }
.photo-editor-single { display:flex; align-items:center; gap:20rpx; margin-bottom:28rpx; font-size:24rpx; color:#85776D; }.photo-editor-single image { width:100rpx; height:100rpx; border-radius:18rpx; }
.photo-editor-field { margin-bottom:24rpx; }
.photo-editor-label { display:flex; align-items:center; justify-content:space-between; color:#62504F; font-size:25rpx; margin-bottom:12rpx; }
.photo-editor-clear { color:#B74768; font-size:22rpx; padding:4rpx 12rpx; }
.photo-editor-input { display:flex; align-items:center; justify-content:space-between; width:100%; height:88rpx; padding:0 24rpx; border:1rpx solid #F1DCE4; border-radius:18rpx; background:#FFF5F8; color:#352E2A; font-size:26rpx; box-sizing:border-box; }
.photo-editor-placeholder { color:#B4A3A6; }
.photo-editor-story { width:100%; height:160rpx; padding:22rpx 24rpx; border:1rpx solid #F1DCE4; border-radius:18rpx; background:#FFF5F8; color:#352E2A; font-size:26rpx; line-height:1.6; box-sizing:border-box; }
.photo-editor-actions { display:flex; align-items:stretch; gap:20rpx; padding-top:20rpx; }
.photo-editor-cancel { flex:1; margin:0; border:1rpx solid #F1DCE4; border-radius:26rpx; background:#FFFCFD; font-size:26rpx; color:#85776D; line-height:88rpx; }
.photo-editor-save { flex:2; }
.photo-editor-actions .photo-editor-save,
.photo-editor-actions .photo-editor-cancel {
  display:flex;
  align-items:center;
  justify-content:center;
  height:96rpx;
  min-height:96rpx;
  padding:0;
  margin:0;
  line-height:normal;
  font-size:27rpx;
  box-sizing:border-box;
}
.photo-editor-cancel::after { border:0; }

/* 默认只显示首张照片的两行摘要，完整信息由用户展开。 */
.moment-summary-line { display:flex; align-items:center; gap:12rpx; min-width:0; font-size:22rpx; line-height:1.5; color:#85776D; }
.moment-summary-badge { flex-shrink:0; font-size:19rpx; color:#B74768; }
.moment-summary-date { flex-shrink:0; }
.moment-summary-location { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.moment-summary-story { display:block; margin-top:6rpx; font-size:24rpx; line-height:1.5; color:#62504F; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.moment-metadata-toggle { display:flex; align-items:center; justify-content:space-between; gap:12rpx; min-height:44rpx; padding-top:8rpx; color:#B74768; font-size:21rpx; line-height:1.5; }
.moments-metadata.is-expanded { padding:20rpx; }
.moments-metadata.is-expanded .moment-metadata-toggle { margin-top:10rpx; border-top:1rpx solid #F1DCE4; padding-top:14rpx; }

@import '../../styles/button-theme.wxss';

@import '../../styles/typography.wxss';