/* pages/main/journal-date/index.less */
.container {
	width: 100%;
	height: 100vh;
	position: fixed;
	overflow: hidden;
	background: var(--theme-bg);

	.loading {
		top: 50%;
		left: 50%;
		z-index: 1000;
		position: fixed;
		transform: translate(-50%, -50%);

		.loading-text {
			color: var(--theme-text-secondary);
			padding: 24rpx 48rpx;
			background: var(--theme-bg-card);
			border-radius: 8rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, .15);
		}
	}

	.date-detail {
		height: 61.8vh;
		display: flex;
		background: var(--theme-bg-card);
		border-radius: 24rpx 24rpx 0 0;
		flex-direction: column;

		.detail-content {
			flex: 1;
			display: flex;
			overflow: hidden;
			flex-direction: column;

			.header {
				display: flex;
				padding: 24rpx 24rpx 4rpx;
				flex-shrink: 0;
				align-items: flex-start;
				justify-content: space-between;

				.info {
					flex: 1;
					display: flex;
					flex-direction: column;

					.date {
						color: var(--theme-text);
						font-size: 32rpx;
						font-weight: 600;
						margin-bottom: 8rpx;
					}

					.count {
						color: var(--theme-text-secondary);
						font-size: 26rpx;
					}
				}

				.actions {
					gap: 16rpx;
					display: flex;
					flex-shrink: 0;
					align-items: center;

					.indicator {
						color: var(--theme-text-secondary);
						padding: 8rpx 16rpx;
						font-size: 24rpx;
						border-radius: 24rpx;
						background: var(--theme-bg);
					}
				}
			}

			.journals-swiper {
				flex: 1;

				.swiper-item-wrapper {
					height: 100%;
					display: flex;
					padding: 0 24rpx;
					box-sizing: border-box;

					.journal-item {
						flex: 1;
						display: flex;
						background: var(--theme-bg);
						flex-direction: column;

						.journal-header {
							display: flex;
							margin-top: 16rpx;
							flex-shrink: 0;
							align-items: center;
							justify-content: space-between;

							.location {
								flex: 1;
								color: var(--theme-text);
								overflow: hidden;
								font-size: 28rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							.time {
								color: var(--theme-text-secondary);
								font-size: 24rpx;
								margin-left: 16rpx;
								flex-shrink: 0;
							}
						}

						.idea {
							color: var(--theme-text);
							display: block;
							font-size: 28rpx;
							line-height: 1.6;
							flex-shrink: 0;
						}

						.items-scroll {
							flex: 1;
							height: 0;
							margin-top: 16rpx;

							.items {

								.wrapper {
									position: relative;
									column-gap: 8rpx;
									column-count: 3;

									.item {
										overflow: hidden;
										break-inside: avoid;
										margin-bottom: 8rpx;
										background: var(--theme-bg-card);

										&.thumbnail {
											width: 100%;
											display: block;
										}

										&.video {
											position: relative;

											&::after {
												top: 50%;
												left: 53%;
												width: 0;
												height: 0;
												content: "";
												position: absolute;
												transform: translate(-50%, -50%);
												border-top: 16rpx solid transparent;
												border-left: 24rpx solid rgba(255, 255, 255, .9);
												border-bottom: 16rpx solid transparent;
												pointer-events: none;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}