.self-inspection-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 774px;
	width: 375px;
	background-color: #f2f2f2;

	.person-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 375px;
		height: 666px;

		.person-image {
			width: 128px;
			height: 128px;
			display: flex;
			justify-content: center;
		}

		.add-person-text {
			font-size: 16px;
			width: 112px;
			height: 24px;
			color: #171a1d;
			margin: 16px 0 !important;
			text-align: center;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			line-height: 24px;
		}

		.add-person-btn {
			width: 164px;
			height: 44px;
			border-radius: 22.5px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 15px;
			background: #fff;
			border: 1px solid #e5e6eb;
			transition: all 0.3s;

			&:hover {
				background: #f2f3f5;
			}

			img {
				width: 18px;
				height: 17px;
				margin-right: 8px;
			}

			span {
				font-size: 15px;
				// color: #1D2129;
				line-height: 1;
			}
		}
	}
}

// 弹窗相关样式
.person-modal {
	// Modal 整体样式
	width: 100%;
	padding: 0 12px;
	margin: 0 auto;
	position: relative;
	transform: translateY(0px); // 将弹窗上移距离从-90px改为-70px

	& .dtm-modal-header {
		text-align: left;
		padding: 0px 16px 12px;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 16px;
			right: 16px;
			height: 1px;
			background: none;
			border-bottom: 1px dashed rgba(126, 134, 142, 0.24);
		}

		& .dtm-modal-title {
			text-align: left;
			font-size: 17px;
		}
	}

	& .dtm-modal-body {
		padding: 10px 16px 12px !important;
		box-sizing: border-box;
		position: relative;
	}

	.modal-wrapper {
		position: relative;
		width: 100%;
		height: 556px;
	}

	// 关闭按钮样式
	.cancel-button {
		position: fixed;
		bottom: -45px;
		left: 50%;
		transform: translateX(-50%);
		width: 27px;
		height: 27px;
		background: transparent;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
		border: 1px solid #ffffff;

		.cancel-icon {
			width: 27px;
			height: 27px;
			line-height: 27px;
			color: #ffffff;
			object-fit: contain;
		}
	}

	// 弹窗内容区域
	.person-modal-content {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		padding: 0;
		box-sizing: border-box;

		.person-modal-wrapper {
			width: 100%;
			height: 556px;
			display: flex;
			justify-content: center;

			.modal-main-content {
				width: 319px;
				height: 556px;
				display: flex;
				flex-direction: column;
				gap: 10px;
				padding: 0;
				margin: 0;

				.modal-option-item {
					width: 100%;
					height: 122px;
					border-radius: 6px;
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					padding: 0 10px 0 16px;
					margin: 6px 0;

					.option-content {
						flex: 1;
						height: 122px;
						display: flex;
						flex-direction: column;
						box-sizing: border-box;
						position: relative;
						align-items: flex-start;
						justify-content: flex-start;

						.content-item-a {
							margin-top: 12px;
							width: 120px;
							align-self: flex-start;
							padding-left: 0;
							margin-left: 0;
							text-align: left;

							.item-title {
								font-size: 16px;
								color: #ffffff;
								font-weight: 400;
								line-height: 22px;
								font-family: PingFang SC, PingFang SC-400;
								padding-left: 0;
								margin-left: 0;
								text-align: left;
							}
						}

						.content-item-b {
							margin-top: 4px;
							width: 168px;
							padding-left: 0;
							margin-left: 0;
							text-align: left;

							.item-desc {
								font-size: 14px;
								color: rgba(255, 255, 255, 0.8);
								line-height: 20px;
								font-family: PingFang SC, PingFang SC-400;
								text-align: left;
							}
						}

						.content-item-c {
							position: absolute;
							bottom: 0px;
							left: 0;
							height: 32px;
							margin-bottom: 16px;

							.item-button {
								width: 60px;
								height: 32px;
								background: transparent;
								border: 1px solid #ffffff;
								border-radius: 100px;
								color: #ffffff;
								font-size: 14px;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}

					.option-image {
						width: 80px;
						height: 80px;
						object-fit: contain;
						margin-right: 5px;
					}

					&.blue-bg {
						background-color: #1f68c7;
					}

					&.orange-bg {
						background-color: #d46b08;
					}

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
}

// 简洁弹窗样式
.simple-modal-content {
	.modal-tip {
		font-size: 16px;
		color: #333;
		margin-bottom: 16px;
		text-align: center;
	}

	.input-group {
		margin-bottom: 20px;
	}

	.modal-buttons {
		display: flex;
		justify-content: flex-end;
	}
}

.modal-container {
	position: relative;

	.modal-content {
		width: 351px;
		padding-top: 81px;
		padding-bottom: 129px;
		height: 601px;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.modal-option {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 122px;
		padding: 16px;
		border-radius: 8px;
		transition: all 0.3s ease;

		.add-btn {
			width: 60px;
			height: 30px;
			border-radius: 15px;
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			margin-top: auto;
			background: transparent;
			border: 1px solid #ffffff;
			color: #ffffff;
		}

		.option-text {
			font-size: 16px;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 500;
			line-height: 24px;
			margin-bottom: 4px;
			color: #ffffff;
		}

		.option-desc {
			font-size: 14px;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			line-height: 20px;
			margin-bottom: auto;
			color: rgba(255, 255, 255, 0.8);
		}

		&:hover {
			opacity: 0.9;
			transform: translateY(-2px);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		}

		&:active {
			transform: translateY(0);
			opacity: 1;
		}

		.option-info {
			display: flex;
			flex-direction: column;
			height: 100%;
			justify-content: space-between;
		}

		.option-icon {
			width: 48px;
			height: 48px;
			object-fit: contain;
		}
	}
}

/** 案件信息区块样式 */
.case-info-put-container {
	margin-top: 82px !important;

	.case-info-block {
		background-color: #f2f2f2;
		margin-bottom: 8px; // 区块之间的间隔
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

		.block-title {
			font-size: 16px;
			font-weight: 500;
			color: #171a1d;
			margin-bottom: 12px;
		}

		> .block-content {
			padding: 8px;
			min-height: 40px;
		}
	}

	/* 添加人员信息按钮样式 */
	.add-personnel-btn1 {
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		// padding: 8px 16px;
		width: 352px;
		height: 44px;
		background: #ffffff !important;
		border: 0.5px solid #1a6fb8 !important;
		border-radius: 22.5px !important;

		span {
			color: #1a6fb8;
			font-size: 15px;
		}
	}

	/* 添加人员信息容器 */
	.add-personnel-container {
		display: flex;
		justify-content: center;
		padding: 15px 0 10px;
		background: #f2f2f2;
	}

	/* 添加人员信息图标 */
	.add-personnel-icon {
		width: 18px;
		height: 17px;
		vertical-align: middle;
		margin-right: 8px;
		position: relative;
	}

	/* 添加人员信息文本 */
	.add-personnel-text {
		margin-bottom: 2px;
	}
}

/* 缓存表单容器样式 - 用于包裹所有人员信息卡片 */
.cached-forms-container {
	display: flex;
	flex-direction: column;
	background-color: #f2f2f2;
}

/* 卡片外层容器样式 */
.card-container {
	background: #f2f2f2;
	display: flex;
}

/* 缓存表单卡片样式 - 单个人员信息卡片 */
.cached-form-card {
	position: relative;
	padding: 12px 16px 12px 0;
	background: #ffffff;
	transition: background-color 0.2s;

	&:active {
		background-color: #f5f7fa;
	}

	/* 添加指示点击的箭头 */

	/* 删除图标容器 */
	.delete-icons {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		z-index: 10;

		.delete-icon-wrapper {
			width: 25px;
			height: 25px;
			display: flex;
			justify-content: center;
			position: relative;

			img {
				width: 20px;
				height: 20px;
			}

			.delete-icon-overlay {
				position: absolute;
				left: 9px;
				width: 12px;
				height: 12px;
				z-index: 2;
			}

			&:hover {
				opacity: 0.8;
			}
		}
	}

	/* 申请方角色标识 */
	.applicant-badge {
		width: 48px;
		height: 48px;
		margin: 0px 8px;
		background: #3491fa;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;

		.applicant-text {
			width: 42px;
			height: 22px;
			font-size: 14px;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
			line-height: 22px;
		}
	}

	/* 被申请方角色标识 */
	.respondent-badge {
		width: 48px;
		height: 48px;
		margin: 0px 8px;
		background: #d46b08;
		border-radius: 4px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		padding: 2px 0;
		box-sizing: border-box;

		.respondent-text {
			width: 28px;
			height: 22px;
			font-size: 14px;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
			line-height: 22px;
			display: block;
		}
	}

	/* 卡片内容区域样式 */
	.content-wrapper {
		flex: 1;
		overflow: hidden;
	}

	.cached-form-content {
		margin-bottom: 4px;

		/* 姓名和电话区域 */
		.cached-form-name-phone {
			display: flex;
			align-items: center;

			/* 姓名样式 */
			.cached-form-name {
				font-size: 14px;
				color: #171a1d;
				font-weight: 400;
			}

			/* 电话样式 */
			.cached-form-phone {
				margin-left: 12px;
				color: #86909c;
				font-size: 14px;
				flex-shrink: 0;
			}
		}
	}

	/* 卡片头部样式 */
	.cached-form-header {
		/* 人员类型样式 */
		.cached-form-type {
			font-size: 12px;
			color: #86909c;

			span {
				margin-left: 6px;
				color: #0e5fd8;
				font-size: 12px;
			}
		}
	}
}

/* 分隔线样式 */
.card-separator {
	background-color: #f2f3f5;
	height: 0px;
	width: 100%;
}

/* 底部保存按钮区域样式 */
.bottom-button-area {
	width: 100%;
	height: 68px;
	// background-color: #ffffff;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 100;

	/* 保存按钮样式 */
	.save-button {
		width: 343px;
		height: 44px;
		background-color: #1a6fb8;
		border-color: #1a6fb8;
		// border-radius: 22px;
		font-size: 16px;
		padding: 0;
		margin: 0;

		&:active {
			background-color: #155ea1;
			border-color: #155ea1;
		}
	}

	/* 按钮文本样式 */
	.save-button-text {
		font-size: 17px;
		color: #ffffff;
		height: 24px;
		letter-spacing: 0px;
		font-family: PingFang SC, PingFang SC-400;
		font-weight: 400;
		text-align: left;
		margin-top: 8px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.first {
	margin-top: -44px;
	background: #f2f3f5;
	.self-inspection-container {
		height: 100vh;
		padding-top: 44px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background: #f2f3f5;

		.person-placeholder {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 20px;
			text-align: center;

			.person-image {
				img {
					width: 130px;
					height: auto;
				}
			}

			.add-person-text {
				margin-bottom: 20px;
				font-size: 16px;
				color: rgba(23, 26, 29, 0.6);
				line-height: 1.5;
			}

			.add-person-btn {
				width: 160px;
				height: 42px;
				background: #1a6fb8;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 22px;
				font-size: 14px;
			}
		}
	}
}

/* 确认提示弹窗样式 */
.confirmModal-title {
	font-size: 17px;
	color: #1d2129;
	font-weight: 400;
	text-align: center;
	font-family: PingFang SC, PingFang SC-400;
	line-height: 24px;
}

.confirmModal-subtitle {
	font-size: 14px;
	color: #86909c;
	text-align: center;
}

/* 添加前置条件提示框样式 */
.prerequisite-tooltip {
	position: fixed;
	z-index: 9999;
	width: 128px;
	pointer-events: none;

	.tooltip-content {
		background-color: rgba(0, 0, 0, 0.75);
		color: white;
		padding: 12px;
		border-radius: 4px;
		font-size: 14px;
		text-align: center;
		position: relative;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
		height: 108px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;

		.tooltip-icon {
			margin-right: 6px;
			color: white;
		}
	}

	/* 移除尖锐三角形部分 */
	.tooltip-arrow {
		display: none;
	}
}

.add-personnel-container {
	display: flex;
	justify-content: center;
	padding: 15px 0 10px;
	background: #f2f2f2;
}

.add-personnel-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 8px 16px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid #e5e6eb;
	transition: all 0.3s;

	&:hover {
		background: #f2f3f5;
	}

	img {
		width: 18px;
		height: 17px;
		margin-right: 8px;
	}

	span {
		font-size: 14px;
		color: #1d2129;
		line-height: 1;
	}
}