page {
	background-color: #e5e5e5;
}
@font-face {
	font-family: 'iconfont';
	src: url('https://at.alicdn.com/t/font_1366751_k2gagkdlesm.woff2') format('woff2'),
}
.icon {
	font-family: 'iconfont' !important;
	font-size: 56upx;
	font-style: normal;
	color: #333;
	&.biaoqing:before {
		content: '\e797';
	}
	&.jianpan:before {
		content: '\e7b2';
	}
	&.yuyin:before {
		content: '\e805';
	}
	&.tupian:before {
		content: '\e639';
	}
	&.chehui:before {
		content: '\e904';
	}
	&.luyin:before {
		content: '\e905';
	}
	&.luyin2:before {
		content: '\e677';
	}
	&.other-voice:before {
		content: '\e667';
	}
	&.my-voice:before {
		content: '\e906';
	}
	&.hongbao:before {
		content: '\e626';
	}
	&.tupian2:before {
		content: '\e674';
	}
	&.paizhao:before {
		content: '\e63e';
	}
	&.add:before {
		content: '\e655';
	}
	&.close:before {
		content: '\e607';
	}
	&.to:before {
		content: '\e675';
	}
	&.set:before {
		content: '\e612';
	}
}
.hidden {
	display: none !important;
}
.popup-layer {
	&.showLayer {
		transform: translate3d(0, -42vw, 0);
	}
	transition: all 0.15s linear;
	width: 96%;
	height: 42vw;
	padding: 20upx 2%;
	background-color: #f3f3f3;
	border-top: solid 1upx #ddd;
	position: fixed;
	z-index: 20;
	top: 100%;
	.emoji-swiper {
		height: 40vw;
		swiper-item {
			display: flex;
			align-content: flex-start;
			flex-wrap: wrap;
			view {
				width: 12vw;
				height: 12vw;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 8.4vw;
					height: 8.4vw;
				}
			}
		}
	}
	.more-layer {
		width: 100%;
		height: 42vw;
		.list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.box {
				width: 18vw;
				height: 18vw;
				border-radius: 20upx;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 3vw 2vw 3vw;
				.icon {
					font-size: 70upx;
				}
			}
		}
	}
}
.input-box {
	width: 98%;
	min-height: 100upx;
	padding: 0 1%;
	background-color: #f2f2f2;
	display: flex;
	position: fixed;
	z-index: 20;
	bottom: -2upx;
	&.showLayer {
		transform: translate3d(0, -42vw, 0);
	}
	transition: all 0.15s linear;
	border-bottom: solid 1upx #ddd;
	.voice,
	.more {
		flex-shrink: 0;
		width: 90upx;
		height: 100upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.send {
		//H5发送按钮左边距
		/* #ifdef H5 */
		margin-left: 20upx;
		/* #endif */
		flex-shrink: 0;
		width: 100upx;
		height: 100upx;
		display: flex;
		align-items: center;
		.btn {
			width: 90upx;
			height: 56upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to right, #f09b37, #eb632c);
			color: #fff;
			border-radius: 6upx;
			font-size: 24upx;
		}
	}
	.textbox {
		width: 100%;
		min-height: 70upx;
		margin-top: 15upx;
		.voice-mode {
			width: calc(100% - 2upx);
			height: 68upx;
			border-radius: 70upx;
			border: solid 1upx #cdcdcd;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			background-color: #fff;
			color: #555;
			&.recording {
				background-color: #e5e5e5;
			}
		}
		.text-mode {
			width: 100%;
			min-height: 70upx;
			display: flex;
			background-color: #fff;
			border-radius: 40upx;
			.box {
				width: 100%;
				padding-left: 30upx;
				min-height: 70upx;
				display: flex;
				align-items: center;
				textarea {
					width: 100%;
				}
			}
			.em {
				flex-shrink: 0;
				width: 80upx;
				padding-left: 10upx;
				height: 70upx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}
.record {
	width: 40vw;
	height: 40vw;
	position: fixed;
	top: 55%;
	left: 30%;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 20upx;
	.ing {
		width: 100%;
		height: 30vw;
		display: flex;
		justify-content: center;
		align-items: center;
		// 模拟录音音效动画
		@keyframes volatility {
			0% {
				background-position: 0% 130%;
			}
			20% {
				background-position: 0% 150%;
			}
			30% {
				background-position: 0% 155%;
			}
			40% {
				background-position: 0% 150%;
			}
			50% {
				background-position: 0% 145%;
			}
			70% {
				background-position: 0% 150%;
			}
			80% {
				background-position: 0% 155%;
			}
			90% {
				background-position: 0% 140%;
			}
			100% {
				background-position: 0% 135%;
			}
		}
		.icon {
			background-image: linear-gradient(to bottom, #f09b37, #fff 50%);
			background-size: 100% 200%;
			animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: 150upx;
			color: #f09b37;
		}
	}
	.cancel {
		width: 100%;
		height: 30vw;
		display: flex;
		justify-content: center;
		align-items: center;
		.icon {
			color: #fff;
			font-size: 150upx;
		}
	}
	.tis {
		width: 100%;
		height: 10vw;
		display: flex;
		justify-content: center;
		font-size: 28upx;
		color: #fff;
		&.change {
			color: #f09b37;
		}
	}
}
.content {
	width: 100%;
	.msg-list {
		width: 96%;
		padding: 0 2%;
		position: absolute;
		top: 0;
		bottom: 100upx;
		.loading {
			//loading动画
			display: flex;
			justify-content: center;
			@keyframes stretchdelay {
				0%,
				40%,
				100% {
					transform: scaleY(0.6);
				}
				20% {
					transform: scaleY(1);
				}
			}
			.spinner {
				margin: 20upx 0;
				width: 60upx;
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				view {
					background-color: #f06c7a;
					height: 50upx;
					width: 6upx;
					border-radius: 6upx;
					animation: stretchdelay 1.2s infinite ease-in-out;
				}
				.rect2 {
					animation-delay: -1.1s;
				}
				.rect3 {
					animation-delay: -1s;
				}
				.rect4 {
					animation-delay: -0.9s;
				}
				.rect5 {
					animation-delay: -0.8s;
				}
			}
		}
		.row {
			.system {
				display: flex;
				justify-content: center;
				view {
					padding: 0 30upx;
					height: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #c9c9c9;
					color: #fff;
					font-size: 24upx;
					border-radius: 40upx;
				}
			}
			&:first-child {
				margin-top: 20upx;
			}
			padding: 20upx 0;
			.my .left,
			.other .right {
				width: 100%;
				display: flex;
				.bubble {
					max-width: 70%;
					min-height: 50upx;
					border-radius: 10upx;
					padding: 15upx 20upx;
					display: flex;
					align-items: center;
					font-size: 32upx;
					word-break: break-word;
					&.img {
						background-color: transparent;
						padding: 0;
						overflow: hidden;
						image {
							max-width: 350upx;
							max-height: 350upx;
						}
					}

					&.voice {
						.icon {
							font-size: 40upx;
							display: flex;
							align-items: center;
						}
						.icon:after {
							content: ' ';
							width: 53upx;
							height: 53upx;
							border-radius: 100%;
							position: absolute;
							box-sizing: border-box;
						}
						.length {
							font-size: 28upx;
						}
					}
				}
			}
			.my .right,
			.other .left {
				flex-shrink: 0;
				width: 80upx;
				height: 80upx;
				image {
					width: 80upx;
					height: 80upx;
					border-radius: 10upx;
				}
			}
			.my {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				.left {
					min-height: 80upx;

					align-items: center;
					justify-content: flex-end;
					.bubble {
						background-color: #f06c7a;
						color: #fff;

						&.voice {
							.icon {
								color: #fff;
							}
							.length {
								margin-right: 20upx;
							}
						}
						&.play {
							@keyframes my-play {
								0% {
									transform: translateX(80%);
								}
								100% {
									transform: translateX(0%);
								}
							}
							.icon:after {
								border-left: solid 10upx rgba(240, 108, 122, 0.5);
								animation: my-play 1s linear infinite;
							}
						}
					}
				}
				.right {
					margin-left: 15upx;
				}
			}
			.other {
				width: 100%;
				display: flex;
				.left {
					margin-right: 15upx;
				}
				.right {
					flex-wrap: wrap;
					.username {
						width: 100%;
						height: 45upx;
						font-size: 24upx;
						color: #999;
						display: flex;
						.name {
							margin-right: 50upx;
						}
					}
					.bubble {
						background-color: #fff;
						color: #333;
						&.voice {
							.icon {
								color: #333;
							}
							.length {
								margin-left: 20upx;
							}
						}
						&.play {
							@keyframes other-play {
								0% {
									transform: translateX(-80%);
								}
								100% {
									transform: translateX(0%);
								}
							}
							.icon:after {
								border-right: solid 10upx rgba(255, 255, 255, 0.8);

								animation: other-play 1s linear infinite;
							}
						}
					}
				}
			}
		}
	}
}
