.task_pop_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 9999;

	.task_pop_container {
		width: 100%;
		// height 通过动态样式设置
		background: #F7F7F7;
		border-radius: 24rpx 24rpx 0 0;
		padding: 0rpx 30rpx 0rpx 30rpx;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
		animation: slideUp 0.3s ease-out;
		display: flex;
		flex-direction: column;

		.task_pop_header {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 26rpx;
			margin-bottom: 26rpx;
			position: relative;

			.task_pop_title {
				font-size: 40rpx;
				font-weight: bold;
				color: #D3A458;
				text-align: center;
			}

			.close_button {
				position: absolute;
				right: 0;
				bottom: 5rpx;
				width: 54rpx;
				height: 54rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.close_icon {
					font-size: 50rpx;
					color: #333333;
					font-weight: bold;
					line-height: 1;
				}
			}
		}

		.task_list {
			// height 和 overflow-y 通过动态样式设置
			
			.task_item {
				display: flex;
				align-items: center;
				background:#ffffff;// #f5f5f5;
				border-radius: 24rpx;
				margin-bottom: 20rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				height: 144rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

				.task_icon {
					width: 80rpx;
					height: 80rpx;
					background: #f5f0e8;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;

					.icon_img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

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

					.task_title {
						font-size: 28rpx;
						color: #333333;
						font-weight: 500;
						margin-bottom: 8rpx;
					}

					.task_points {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.task_button {
					background: #D3A458;
					border-radius: 44rpx;
					width: 160rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: transform 0.2s ease;

					.task_button_text {
						font-size: 24rpx;
						color: #ffffff;
						font-weight: 500;
					}

					// 只有非已完成状态的按钮才有点击效果
					&:not(.completed):active {
						transform: scale(0.95);
					}

					&.completed {
						background: #F6DEB7;
						// border: 1rpx solid #d4a468;
						// 已完成状态不添加点击效果
						transition: none;

						.task_button_text {
							color: #ffffff;
							font-size: 24rpx;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
}

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