@import "./makedown.scss";

.c-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding-bottom: var(--area-bottom);

	.t-navbar__content {
		backdrop-filter: blur(18px);
	}
}

.silder {
	overflow: auto;
	flex: 1;
	padding: 30rpx 0;
	box-sizing: border-box;

	.chat-item {
		padding: 10rpx 30rpx;

		&+.chat-item {
			margin-top: 30rpx;
		}

		.lawyer-info {
			margin-bottom: 20rpx;
			font-size: 0.75rem;

			image {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-right: 10rpx;
				display: block;
			}
		}

		.chat-image {
			width: 250rpx;
			height: 250rpx;
			border-radius: 20rpx;
		}

		.chat-message {
			max-width: calc(100% - 100rpx);
			min-height: 60rpx;
			width: fit-content;
			padding: 20rpx;
			border-radius: 10rpx;
			font-size: 0.9rem;
			overflow: hidden;

			.loading {
				height: 40rpx;
				width: 40rpx;
				border-radius: 50%;
				box-shadow: inset 0 0 0 var(--td-brand-color);
				animation: load 2s linear infinite alternate;
			}

			.stop-tip {
				margin-top: 20rpx;
				font-size: 0.64rem;
				color: var(--text-3);
			}

			.m-footer {
				margin-top: 10rpx;

				.tip {
					@extend .stop-tip;
					margin-top: 0;
					opacity: 0.1;
				}

				.sound-icon {
					color: var(--text-2);
					font-size: 1rem;
				}
			}
		}

		.quick-warpper {
			font-size: 0.75rem;
			gap: 30rpx;
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.quick-item {
				background-color: white;
				padding: 10rpx 20rpx;
				border-radius: 50rpx;
				border: 1px solid #dfdddd;

				&.color {
					color: white;
					border-color: transparent;
					;
				}
			}
		}
	}

	.ai-msg {
		.chat-message {
			background-color: white;
			border-radius: 20rpx 30rpx 30rpx 10rpx;
			box-shadow: 0 0 15rpx #e2e2e2;
		}

	}

	.user-msg {
		display: flex;
		flex-direction: column;
		align-items: flex-end;

		.chat-message {
			background-color: var(--td-brand-color);
			color: white;
			border-radius: 30rpx 30rpx 0 30rpx;
		}
	}
}

.bottom-position {
	margin: 0 30rpx;
	position: relative;

	//输入框
	.input-warpper {
		box-shadow: 0 0 15rpx #e2e2e2;
		padding: 20rpx 30rpx;
		background-color: white;
		border-radius: 50rpx;

		input {
			flex: 1;
		}


		.push-btn {
			border-radius: 50%;
			width: 65rpx;
			height: 65rpx;
			color: var(--text-3);
			transition: opacity 0.3s;

			&.active-push {
				background-color: var(--td-brand-color);
				color: white;
			}
		}

		.stop-btn {
			font-size: 65rpx;
			color: var(--td-brand-color);
		}
	}
}

//占位
.empty {
	transition: height 0.3s;
}

//ai响应loading
@keyframes load {
	0% {
		box-shadow: inset -20rpx 40rpx 0 var(--td-brand-color);
	}

	100% {
		box-shadow: inset 20rpx -40rpx 0 var(--td-brand-color);
	}
}