page {
	background-color: #f3f3f3;
}
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:24rpx;
$uni-font-size-base:28rpx;
$uni-font-size-lg:32rpx;

/* 图片尺寸 */
$uni-img-size-sm:40rpx;
$uni-img-size-base:52rpx;
$uni-img-size-lg:80rpx;

/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;

/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36rpx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30rpx;

.content {
	&-showfn{
		padding-bottom: 0rpx;
		padding-bottom: calc(420rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(420rpx + env(safe-area-inset-bottom) );
		/* #ifdef MP-WEIXIN */
		/* #endif */
	}
	&-box {
		width: 100%;
		height: auto;
		min-height: calc(100vh - env(safe-area-inset-top) - 200rpx);
		box-sizing: content-box;
		position: relative;
		padding-bottom: 120rpx;
		
		/* #ifdef APP-PLUS  */
		margin-bottom: 0rpx;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-bottom: 0rpx;
		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom) );
		/* #endif */
	
		&-bg {
			width: 100%;
			position: fixed;
			/* #ifdef MP-WEIXIN */
			bottom: 0;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			/* #endif */
			/* #ifndef MP-WEIXIN */
			top: 0;
			left: 0;
			/* #endif */
		}

		&-loading {
			text-align: center;
			padding: 20rpx 0;
		}

		.message {
			padding: 13rpx 20rpx;
		}
		
		.message-item {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			align-content: flex-start;
			flex-wrap: nowrap;
			flex-direction: row;

			.img {
				width: 70rpx;
				height: 70rpx;
				border-radius: 5rpx;
			}

			.content {
				padding: 18rpx;
				line-height: 50rpx;
				max-width: 500rpx;
				border-radius: 10rpx;
				font-size: 31rpx;
			}
			
			// 语音
			.contentType2 {
				display: flex;
				flex-direction: row;
				align-items: center;
				.voice_icon {
					height: 34rpx;
					width: 34rpx; 
					background-repeat: no-repeat;
					background-size: 100%;
				}
				// .voice_icon_right {
				// 	background-image: url(../../static/voice-left-3.png);
				// 	margin-left: 10rpx;
				// }
				// .voice_icon_left {
				// 	background-image: url(../../static/voice-right-3.png);
				// 	margin-right: 10rpx;
				// }
				// .voice_icon_right_an {
				// 	animation: voiceAn_right 1s linear alternate infinite;
				// }
				// .voice_icon_left_an {
				// 	animation: voiceAn_left 1s linear alternate infinite;
				// }
				// @keyframes voiceAn_right {
				// 	0% {
				// 		background-image: url(../../static/voice-left-1.png);
				// 	}
				// 	50% {
				// 		background-image: url(../../static/voice-left-2.png);
				// 	}
				// 	100% {
				// 		background-image: url(../../static/voice-left-3.png);
				// 	}
				// }
				// @keyframes voiceAn_left {
				// 	0% {
				// 		background-image: url(../../static/voice-right-1.png);
				// 	}
				// 	50% {
				// 		background-image: url(../../static/voice-right-2.png);
				// 	}
				// 	100% {
				// 		background-image: url(../../static/voice-right-3.png);
				// 	}
				// }
			}
			
			//图片
			.contentType3{
				padding: 0;
				border-radius: 2rpx;
				background-color: transparent !important;
				.img{
					width: 200rpx;
					height: auto;
					max-width: 300rpx;
					max-height: 400rpx;
				}
			}
			.contentType3::after{
				border: none !important;
				display: none !important;
			}
			.content-type-right {
				flex-direction: row-reverse;
			}

			&.right {
				flex-direction: row-reverse;

				.content {
					background-color: $uni-color-success;
					margin-right: 28rpx;
					word-break: break-all;
					line-height: 36rpx;
					position: relative;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 10rpx solid transparent;
						border-bottom: 10rpx solid transparent;
						border-left: 16rpx solid $uni-color-success;
						position: absolute;
						right: -10rpx;
						top: 22rpx;
					}
				}
			}

			&.left {
				.content {
					background-color: $uni-text-color-inverse;
					margin-left: 16rpx;
					word-break: break-all;
					line-height: 36rpx;
					position: relative;

					&::after {
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 10rpx solid transparent;
						border-bottom: 10rpx solid transparent;
						border-right: 16rpx solid $uni-text-color-inverse;
						position: absolute;
						left: -10rpx;
						top: 22rpx;
					}
				}
			}
		}
	}

	.input-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: content-box;
		z-index: 999;
		background-color: #eaeaea;
		
		/* #ifdef APP-PLUS */
		margin-bottom: 0rpx;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-bottom: 0rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		/* #endif */

		&-flex {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			padding: 20rpx;
			box-sizing: border-box;
			image{
				width: 56rpx;
				height: 56rpx;
			}
			.icon_img {
				margin-right: 20rpx;
			}
			.icon_btn_add{
				margin-left: 20rpx;
			}
			&-grow {
				flex-grow: 1;

				.content {
					box-sizing: border-box;
					background-color: #fff;
					height: 80rpx;
					padding: 0 20rpx;
					border-radius: 12rpx;
					font-size: 28rpx;
					caret-color: $uni-color-success;
				}

				.voice_title {
					text-align: center;
					background-color: #ffffff;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 12rpx;
				}
			}

			.btn {
				margin-left: 20rpx;
				// background-color: $u-type-success;
				border: none;
			}
		}
		
		.fun-box{
			opacity: 0;
			transition: all 0.1s ease-in-out;
			height: 0;
			.grid-text{
				padding-top: 10rpx;
				color: $uni-text-color-grey;
			}
			
		}
		.show-fun-box{
			opacity: 1;
			height: 300rpx;
		}
	}

	.input-box-mpInputMargin {
		/* #ifdef MP-WEIXIN */
		padding-bottom: 0rpx;
		/* #endif */
	}
	.voice_an{
		width: 300rpx;
		height: 300rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-55%);
		background-color: rgba(41,41,41,0.7);
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		border-radius: 10rpx;
		.text{
			padding-top: 30rpx;
		}
		@keyframes runVoice{
			0%{
				height: 10%;
			}
			20%{
				height: 50%;
			}
			50%{
				height: 100%;
			}
			80%{
				height: 50%;
			}
			100%{
				height: 0%;
			}
		}	
		.wave{
			width:6rpx;
			height: 100%;
			margin-left: 10rpx;
			border-radius: 50rpx;
			background-color: #999;
			vertical-align: middle;
			display: inline-block;
		}
		.voice_an_icon{
			width: 200rpx;
			height: 100rpx;
			line-height: 50rpx;
			margin: 50rpx 0;
		}
		.voice_an_icon #one{
			animation:runVoice 0.6s infinite 0.1s;
		}
		.voice_an_icon #two{
			animation:runVoice 0.6s infinite 0.3s;
		}
		.voice_an_icon #three{
			animation:runVoice 0.6s infinite 0.6s;
		}
		.voice_an_icon #four{
			animation:runVoice 0.6s infinite 0.1s;
		}
		.voice_an_icon #five{
			animation:runVoice 0.6s infinite 0.3s;
		}
		.voice_an_icon #six{
			animation:runVoice 0.6s infinite 0.6s;
		}
		.voice_an_icon #seven{
			animation:runVoice 0.6s infinite 0.1s;
		}
	}
}