@import '../../styles/theme.less';
@mediationWindowBorderRadius: 10px;

// 司法确认视窗也使用该共同样式
.mediationWindow {
	position: relative;
	width: 100%;
	padding: 0 @pageAboutMargin;
	display: flex;
	flex-direction: column;

	.mediationWindow-noMargin {
		margin-bottom: 0;
	}

	&-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 6px 0;

		&-returnIcon {
			color: @main-color;
			background-color: #ffffff;
			border-radius: 50%;
			width: 18px;
			height: 18px;
			border: 1px solid @main-color;
			font-size: 10px;
			line-height: 18px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	&-top {
		background-color: @main-color-1;
		margin: 0;
		border-radius: @mediationWindowBorderRadius;
		display: flex;

		textarea {
			// background-image: url(../../../assets/images/icon/window_letterBg.png);
			resize: none;
		}

		textarea.ant-input {
			padding: 0;
			line-height: 30px;
		}

		&-left {
			cursor: pointer;
			width: calc(30% - @pageAboutMargin);
			margin-right: @pageAboutMargin;
		}

		&-right {
			width: 70%;
		}

		&-pre {
			height: 88px;
			overflow-y: auto;
			padding-right: 8px;
		}

		.mediationWindow-card {
			padding-right: 8px;
			background-color: transparent;
			border-radius: 0;
		}

		::-webkit-scrollbar-track {
			background-color: @main-color-1;
		}
	}

	&-card {
		padding: 12px 16px;
		background-color: #ffffff;
		border-radius: @mediationWindowBorderRadius;

		h5 {
			margin-bottom: 4px;
			color: @main-color;
		}
	}

	&-cursor {
		cursor: pointer;
	}

	&-material {
		display: flex;
		cursor: pointer;

		&-item {
			flex: 1;
			text-align: center;

			&:last-child {
				position: relative;

				&::before {
					position: absolute;
					content: '';
					width: 1px;
					height: 42px;
					left: 0;
					top: 50%;
					margin-top: -21px;
					background-color: @divider-color;
				}
			}

			div {
				font-size: 20px;
				line-height: 28px;
			}
		}
	}

	&-textarea {
		height: 90px;
		overflow-y: auto;
		padding-right: 8px;
	}

	&-main {
		flex: 1;
		display: flex;
		margin-top: 8px;
		overflow: hidden;

		&-left {
			position: relative;
			height: 100%;
			width: calc(30% - @pageAboutMargin);
			margin-right: @pageAboutMargin;
			display: flex;
			flex-direction: column;
			overflow-y: auto;

			&-action {
				padding: 16px 0;
				display: flex;
				justify-content: center;

				img {
					cursor: pointer;
					height: 22px;
					width: 22px;
				}
			}
		}
	}

	&-bottom {
		height: 66px;
		background: #ffffff;
		box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.25);
		display: flex;
		align-items: center;
		padding: 4px 0;
		margin: 0 -@pageAboutMargin;

		&-item {
			font-size: 12px;
			line-height: 12px;
			flex: 1;
			text-align: center;
			cursor: pointer;

			&-active {
				color: @main-color;
			}
		}

		&-mediate {
			margin: auto;
			width: 96px;
			height: 58px;
			background-color: @main-color;
			border-radius: @mediationWindowBorderRadius;
			text-align: center;
			color: #ffffff;
			font-size: 12px;
			line-height: 12px;
			padding: 4px 0;
			cursor: pointer;
		}

		&-icon {
			font-size: 34px;
			height: 34px;
			width: 34px;
		}
	}

	&-stopMediate {
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;

		&:hover {
			color: @main-color;

			path {
				stroke: @main-color;
			}

			rect {
				fill: @main-color;
			}
		}

		span {
			margin-top: 4px;
		}
	}

	&-dynamic {
		position: relative;
		flex: 1;
		background-color: #ffffff;
		border-radius: @mediationWindowBorderRadius;
		padding: 16px 24px;
		margin-right: 30px;
		border-top-right-radius: 0;
		overflow: hidden;

		&-realTime {
			height: 100%;
			display: flex;
			flex-direction: column;

			&-bubble {
				flex: 1;
				overflow: hidden;
			}

			&-box {
				position: relative;
				height: calc(100% - 38px);

				&::before {
					content: ' ';
					position: absolute;
					border: 16px solid transparent;
					border-top-color: #e6f7ff;
					border-left-color: #e6f7ff;
					bottom: -32px;
				}
			}

			&-boxLeft {
				&::before {
					left: 60px;
					transform: skewX(-24deg);
				}
			}

			&-boxCenter {
				&::before {
					left: 50%;
					margin-left: -4px;
					transform: skewX(22deg);
				}
			}

			&-boxRight {
				&::before {
					right: 60px;
					transform: skewX(60deg);
				}
			}

			&-content {
				position: absolute;
				width: 100%;
				bottom: 0;
				max-height: 100%;
				overflow-y: auto;
				background-color: #e6f7ff;
				border-radius: 8px;
				font-size: 12px;
				line-height: 20px;
				padding: 12px 16px;
			}

			&-img {
				width: 100%;
			}
		}

		&-record {
			height: 100%;
			overflow-y: auto;
			overflow-x: hidden;
			margin: 0 -24px;
			padding: 0 16px;

			&-line {
				display: flex;
			}

			&-name {
				width: 32px;
				height: 32px;
				border-radius: @mediationWindowBorderRadius;
				color: #ffffff;
				text-align: center;
				font-size: 18px;
				line-height: 32px;
			}

			&-bei {
				background-color: #000000;
				margin-right: 12px;
			}

			&-shen {
				background-color: #d1021c;
				margin-right: 12px;
			}

			&-tiao {
				background-color: #1089ff;
				margin-left: 12px;
			}

			&-bubble {
				padding: 6px 12px;
				border-radius: 4px;

				&-left {
					background-color: #f0f0f0;
					position: relative;
					flex: 1;

					&::before {
						position: absolute;
						background-color: #f0f0f0;
						content: '';
						height: 12px;
						width: 12px;
						transform: rotate(45deg);
						left: -4px;
						top: 10px;
					}
				}

				&-right {
					background-color: #e6f7ff;
					position: relative;
					flex: 1;

					&::before {
						position: absolute;
						background-color: #e6f7ff;
						content: '';
						height: 12px;
						width: 12px;
						transform: rotate(45deg);
						right: -4px;
						top: 10px;
					}
				}
			}
		}

		&-tabs {
			position: absolute;
			top: 0;
			right: 0;
			width: 30px;
			font-size: 12px;
			line-height: 20px;

			&-item {
				height: 56px;
				background: #ffffff;
				border-radius: 0px 5px 5px 0px;
				padding: 8px 0;
				text-align: center;
				cursor: pointer;
			}

			&-itemActive {
				color: @main-color;
			}
		}
	}
	&-nav1 {
		position: relative;
		height: calc(100% - 16px);
		width: 100%;
		display: flex;
		padding: 0;
	}
	&-nav {
		position: relative;
		height: calc(100% - 16px);
		width: 70%;
		display: flex;
		padding: 0;

		h5 {
			margin: 0;
		}

		&-left {
			border-right: 1px solid @divider-color;
			width: 30%;
			display: flex;
			flex-direction: column;

			&-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 12px 16px;
			}

			&-total {
				font-size: 12px;
				line-height: 12px;
				padding: 2px 6px;
				background: @main-color;
				border-radius: 5px;
				color: #ffffff;
			}

			&-list {
				height: 100%;
				overflow-y: auto;

				h5 {
					color: @text-color;
				}

				&-item {
					padding: 8px 16px;
					border-bottom: 1px solid @divider-color;
					cursor: pointer;
				}

				&-itemActive {
					background-color: @main-color-1;
				}

				&-itemTop {
					position: relative;
					background-color: @main-color-1;

					&::after {
						content: '';
						position: absolute;
						top: 0;
						right: 0;
						width: 0;
						height: 0;
						border-top: 25px solid @main-color;
						border-left: 25px solid transparent;
					}
				}

				&-topUpIcon {
					position: absolute;
					top: 2px;
					right: 2px;
					z-index: 99;
				}

				&-itemIcon {
					width: 22px;
					height: 22px;
					border-radius: 2px;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				&-itemIcon1 {
					background-color: #ff5500 !important;
				}

				&-itemIcon2 {
					background-color: #1890ff !important;
				}

				&-itemIcon3and5and6 {
					background-color: #3ac299 !important;
				}

				&-itemIcon6 {
					background-color: #3ac299 !important;
				}

				&-itemTime {
					color: rgba(0, 0, 0, 0.5);
					font-size: 12px;
					line-height: 20px;
				}
			}
		}

		&-right {
			width: 70%;
			display: flex;
			flex-direction: column;
			padding-top: 12px;
			position: relative;

			&-header {
				text-align: center;
				padding: 12px 0;
				margin: 0 16px;
				border-bottom: 1px dashed @divider-color;
			}

			&-subtitle {
				display: flex;
				justify-content: space-between;
				font-size: 12px;
				line-height: 20px;
			}

			&-content {
				flex: 1;
				overflow-y: auto;
				padding: 12px 16px;

				&-bg {
					position: absolute;
					top: 50%;
					margin-top: -77px;
					left: 50%;
					margin-left: -157px;
					opacity: 0.6;
				}
			}
		}

		&-center {
			width: 100%;
			overflow: auto;
			// overflow-x: hidden;
			&-div {
				padding: 0 16px;
				margin-bottom: 16px;
				&-radius {
					display: inline-block;
					width: 8px;
					height: 8px;
					background-color: #d9d9d9;
					border-radius: 50%;
					margin-right: 8px;
					&-div {
						background-color: #f6f7fb;
						border-radius: 4px;
						padding: 8px 12px;
						margin-bottom: 8px;
						color: rgba(23, 26, 29, 0.7);
						&:hover {
							border: 1px solid #d1021c;
							padding: 7px 12px;
						}
						&:hover .mediationWindow-nav-center-div-title {
							color: #d1021c;
							border-bottom: 1px solid #d1021c;
						}
					}
				}
				&-title {
					cursor: pointer;
					color: rgba(23, 26, 29, 0.7);
					font-weight: 600;
				}

				&-img {
					cursor: pointer;
					display: flex;
					align-items: center;
					& img {
						width: 14px;
						height: 14px;
					}
				}
				&-popconfirm {
				}
				&-rate {
					color: #ff9200;
				}
			}
			&-row {
				display: flex;
				gap: 32px;
				&-scroll {
					overflow-x: scroll;
					overflow-y: hidden;
				}
				&-title {
					font-size: 16px;
					font-weight: 600;
					color: rgba(0, 0, 0, 0.85);
					line-height: 24px;
				}
			}

			&-row1 {
				display: flex;
				gap: 8px;
				&-scroll1 {
					overflow-x: hidden;
					overflow-y: hidden;
				}
				&-title {
					font-size: 16px;
					font-weight: 600;
					color: rgba(0, 0, 0, 0.85);
					line-height: 24px;
				}
			}
			&-tag {
				margin-bottom: 4px;
			}
			&-col {
				width: 88px;
				flex-basis: 88px;
				flex-shrink: 0;
			}
			&-text {
				font-size: 12px;
				line-height: 20px;
			}
		}

		&-empty {
			position: absolute;
			top: 50%;
			margin-top: -90px;
			left: 50%;
			margin-left: -80px;
		}
	}

	&-fullScreenNav {
		position: fixed;
		top: calc(46px + 66px);
		bottom: 82px;
		left: @pageAboutMargin;
		right: @pageAboutMargin;
		display: flex;
		padding: 0;
	}

	&-modal {
		position: absolute;
		top: 46px;
		bottom: 82px;
		left: calc(30% + @pageAboutMargin / 2 - 4px);
		right: @pageAboutMargin;
		border-radius: @mediationWindowBorderRadius;
		background-color: #ffffff;
		overflow: hidden;
		display: flex;

		.casePerfection {
			margin: 0;
		}

		&-left {
			min-width: 160px;
			padding-top: 50px;
			border-right: 1px solid @divider-color;

			&-tab {
				padding: 12px 16px;
				cursor: pointer;
			}

			&-tabActive {
				position: relative;
				color: @main-color;
				background: linear-gradient(90deg, #d9d9d9, rgba(240, 240, 240, 0.3) 100%);

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					height: 100%;
					width: 2px;
					background-color: @main-color;
				}
			}
		}

		&-right {
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		&-fullScreen {
			left: @pageAboutMargin;
		}

		&-close {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 99;
			cursor: pointer;

			&:hover {
				path {
					fill: @main-color;
					fill-opacity: 1;
				}
			}
		}

		&-header {
			padding: 12px 0;
			margin: 0 24px;
			border-bottom: 1px dashed @divider-color;

			&-divider {
				height: 14px;
				width: 2px;
				background-color: @main-color;
			}

			h4 {
				margin: 0;
			}
		}

		&-main {
			flex: 1;
			padding: 16px @pageAboutMargin 0;
			overflow-y: auto;
		}

		&-footer {
			padding: 16px @pageAboutMargin;
		}

		&-subtitle {
			color: @text-color-secondary;
		}

		&-bg {
			position: absolute;
			bottom: 24px;
			right: 24px;
		}

		&-divider {
			border-top: 1px solid @divider-color;
		}

		&-template {
			.ant-input[disabled] {
				color: @text-color-secondary;
			}
		}
	}

	// 调解开始
	&-start {
		&-tips {
			position: fixed;
			z-index: 1001;
			box-shadow: 0px 0px 10px 0px #ffffff;
			background-color: #ffffff;
			top: 72px;
			right: 24px;
			border-radius: 2px;
		}

		&-arrow {
			position: absolute;
			left: -220px;
			top: 20px;
		}
	}

	// 文书制作
	&-document {
		&-plus {
			width: 74px;
			height: 74px;
			background: #ffffff;
			border: 1px dashed @divider-color;
			border-radius: 10px;
			text-align: center;
			line-height: 80px;
			cursor: pointer;
		}
	}

	// 任务信息
	&-task {
		position: absolute;
		top: 46px;
		transition: top 0.5s;
		left: @pageAboutMargin;
		right: @pageAboutMargin;
		z-index: 99;

		&-box {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 98;
		}
	}

	// 司法确认pdf容器
	&-pdfDom {
		height: calc(100% - 16px);
		width: 70%;
		padding: 0;
		background-color: #404040;
		overflow: hidden;

		&-title {
			background-color: #4a4a4a;
			height: 38px;
			line-height: 38px;
			text-align: center;
			color: #ffffff;
		}

		&-main {
			height: calc(100% - 38px);
			padding: 16px 24px;
			position: relative;

			&-box {
				position: absolute;
				bottom: 16px;
				right: 16px;
			}
		}
	}

	&-detail {
		margin: 16px;
		width: 100%;
		display: flex;
		&-l {
			background-color: #fff;
			padding: 0 48px;
			flex: 1;
			overflow: auto;
			&-title {
				font-size: 20px;
				line-height: 28px;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.85);
				margin: 30px 0px 12px;
				padding-bottom: 12px;
				border-bottom: 1px solid rgba(5, 5, 5, 0.06);
			}
		}
		&-r {
			background-color: #fff;
			width: 313px;
			padding: 12px 16px;

			&-steps {
				display: flex;
			}
		}
	}
}

.ant-popover-message-title {
	padding-left: 0 !important;
}

.mediate-ratio-main {
	padding: 0px 16px 12px;
	display: flex;
	flex-direction: column;
	min-height: 560px;
	max-height: 560px;
	&-head {
		display: flex;
	}
	&-tagActive {
		border: 1px solid #d1021c !important;
		color: #d1021c !important;
	}
	&-tag {
		cursor: pointer;
		padding: 5px 16px;
		text-align: center;
		border: 1px solid #d9d9d9;
		color: rgba(0, 0, 0, 0.85);
		&-subtitle {
			color: rgba(0, 0, 0, 0.45);
			&-tagActive {
				color: #d1021c !important;
			}
		}
	}
	&-content {
		display: flex;
		height: 100%;
		padding: 12px 0;
		&-l {
			flex: 1;
			border: 1px solid rgba(0, 0, 0, 0.1);
			border-radius: 5px;
			padding: 12px 16px;
			color: rgba(0, 0, 0, 0.85);
			&-title {
				font-size: 16px;
				line-height: 24px;
				font-weight: 600;
				color: #000000;
				text-align: center;
			}
			&-tip {
				padding: 8px 12px;
				margin: 12px 0;
				background: #f6f7fb;
			}
		}
	}
}