page {
	overflow-x: hidden;
	overflow-y: auto;
}
.flex-center-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.fix-tabbar-page {
	position: relative;
	min-height: 100vh;
	background: linear-gradient(155deg, rgba(61, 76, 241, 0.15) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(61, 76, 241, 0.15) 100%);
  // background-color: #fff;
	// background-size: 100% 100vh;
	// background-image: url(https://wxapp.xdd618.com/api/file/pic/aiChat/bg.png);
	// background-repeat: no-repeat;
	// background-attachment: fixed;
	.fix-tabbar-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		height: 44px;
		padding-left: 24rpx;
		// background-color: #fff;
		transition: all 0.15s;
		.my-icon {
			.icon {
				display: block;
				width: 54rpx;
				height: 54rpx;
			}
		}
		.tabbar-wrap {
			display: flex;
			align-items: center;
			padding: 0 0 0 20rpx;
			.tabbar-item {
				position: relative;
				margin: 0 0 0 20rpx;
				.txt {
					position: relative;
					z-index: 5;
					width: 112rpx;
					font-size: 40rpx;
					line-height: 48rpx;
					color: #707070;
				}
				.bg {
					position: absolute;
					z-index: 2;
					right: 0;
					bottom: -8rpx;
					opacity: 0;
					.img {
						display: block;
						width: 112rpx;
						height: 26rpx;
					}
				}
				&.curr {
					.txt {
						color: #333;
						font-weight: bold;
						font-size: 48rpx;
					}
					.bg {
						opacity: 1;
					}
				}
			}
			.new-chat-btn {
				.icon {
					display: block;
					width: 54rpx;
					height: 54rpx;
				}
			}
		}
	}
  .fix-tabbar-body {
    position: relative;
    z-index: 2;
		min-height: 100vh;
		box-sizing: border-box;
  }
	.page-to-bottom {
		position: fixed;
		bottom: 180rpx;
		left: 0;
		right: 0;
		z-index: 8;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 24rpx;
		transition: all 0.2s;
		&.focus {
			// transform: translateY(-40rpx);
		}
		.new-chat {
			display: flex;
			align-items: center;
			height: 68rpx;
			padding: 0 24rpx;
			border-radius: 40rpx;
			line-height: 68rpx;
			font-size: 30rpx;
			background-color: #fff;
			box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
			.btn-icon {
				display: block;
				width: 40rpx;
				height: 40rrpx;
				margin: 0 8rpx 0 0;
			}
		}
		.icon {
			display: block;
			width: 68rpx;
			height: 68rpx;
			margin: 0 0 0 24rpx;
			border-radius: 50%;
			box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
		}
	}
	.fix-page-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9;
		padding: 24rpx 24rpx 48rpx 24rpx;
		background-color: #fff;
		transition: all 0.2s;
		&.focus {
			// transform: translateY(-40rpx);
		}
		.bottom-body {
			position: relative;
			z-index: 2;
			min-height: 100rpx;
			.history-wrap {
				width: 98rpx;
				height: 100rpx;
				border-radius: 30rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 30rpx;
				color: #333;
				background-color: #fff;
				box-shadow: 0rpx 6rpx 20rpx rgba(19,27,65,0.16);
			}
			.input-container {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				width: calc(100% - 122rpx);
				padding: 6rpx 6rpx 6rpx 24rpx;
				border-radius: 30rpx;
				box-sizing: border-box;
				background-color: #fff;
				box-shadow: 0rpx 6rpx 20rpx rgba(19,27,65,0.16);
			}
			.input-model {
				.icon {
					display: block;
					width: 40rpx;
					height: 40rpx;
				}
			}
			.input-wrap {
				position: relative;
				width: calc(100% - 160rpx);
				.inp {
					position: relative;
					z-index: 5;
					width: 100%;
					height: 88rpx;
					border: 0;
					box-sizing: border-box;
					line-height: 88rpx;
					color: #333;
					font-size: 30rpx;
				}
				.placeholder-txt {
					position: absolute;
					left: 0;
					top: 50%;
					z-index: 2;
					color: #999;
					font-size: 28rpx;
					transform: translateY(-50%);
				}
			}
			.send-btn {
				.icon {
					display: block;
					width: 88rpx;
					height: 88rpx;
				}
			}
		}
		.sound-input-wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			height: 100rpx;
			padding: 0 24rpx;
			border-radius: 50rpx;
			color: #fff;
			font-size: 30rpx;
			background: #fff;
			box-shadow: 0rpx 6rpx 20rpx rgba(19,27,65,0.16);
			.toggle-btn {
				.input-icon {
					display: block;
					width: 48rpx;
					height: 48rpx;
				}
			}
			.sound-wrap {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				.icon {
					display: block;
					width: 60rpx;
					height: 60rpx;
					margin: 0 24rpx;
				}
			}
		}
	}
}
.has-bg-body {
	position: relative;
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		display: block;
		width: 100%;
	}
	.cont {
		position: relative;
		z-index: 5;
	}
}
.page-fff {
	.fix-tabbar-header {
		background-color: #fff;
	}
	.fix-tabbar-body {
		background: #fff;
	}
}
.page-scroll {
	.fix-tabbar-header {
		background-color: #fff;
	}
}
.page-fff-linear-fff {
	.fix-tabbar-header {
		background-color: #fff;
	}
	.fix-tabbar-body {
		background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,234,216,0.67) 75%, rgba(255,255,255,0) 100%);
	}
}
.fix-page-back {
	position: fixed;
	left: 0;
	z-index: 8;
	display: flex;
	align-items: center;
	padding: 12rpx 24rpx;
	border-radius: 0 28rpx 28rpx 0;
	background-color: #fff;
	.icon {
		display: block;
		width: 32rpx;
		height: 32rpx;
	}
	&.bg {
		background-color: #fff;
	}
}
.article-back-wrap {
	display: flex;
}
.article-back-btn {
	display: flex;
	align-items: center;
	height: 80rpx;
	padding: 0 24rpx;
	border-radius: 40rpx 40rpx 40rpx 0;
	color: #fff;
	font-size: 28rpx;
	line-height: 80rpx;
	background: linear-gradient(45deg, #FA9108 0%, #FFC25C 100%);
	box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
	.icon {
		display: block;
		width: 32rpx;
		height: 32rpx;
	}
}
.chat-list-wrap {
	position: relative;
	z-index: 2;
	padding: 24rpx;
	.chat-message-item + .chat-message-item {
		margin-top: 24rpx;
	}
	.chat-message-item {
		.res-time {
			text-align: center;
			padding: 12rpx 0;
			color: #BEBEBE;
			font-size: 24rpx;
		}
		.chat-message-body {
			.chat-avatar {
				display: block;
				width: 60rpx;
				height: 60rpx;
				margin: 0 0 8rpx 0;
			}
			.item-left {
				display: flex;
				.txt {
					max-width: 100%;
					padding: 32rpx;
					border-radius: 0 40rpx 40rpx 40rpx;
					box-sizing: border-box;
					color: #333;
					font-size: 30rpx;
					line-height: 48rpx;
					background: #fff;
					box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
				}
			}
			.web-info-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 0 24rpx 0;
				.info-left {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					line-height: 40rpx;
					.icon {
						margin: 0 8rpx 0 0;
						width: 40rpx;
						height: 40rpx;
					}
				}
				.icon {
					display: block;
					width: 32rpx;
					height: 32rpx;
				}
				.info-right {
					display: flex;
					align-items: center;
					.img-list {
						display: flex;
						margin: 0 8rpx 0 0;
						.web-logo {
							display: block;
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							margin: 0 -6rpx 0 0;
							background-color: #fff;
						}
					}
				}
			}
			.web-info-body {
				height: 0;
				overflow: hidden;
				transition: all 0.2s;
				.web-item + .web-item {
					margin-top: 20rpx;
				}
				.web-item {
					display: flex;
					align-items: center;
					.web-logo {
						display: block;
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						background-color: #fff;
					}
					.web-txt {
						width: calc(100% - 50rpx);
						margin: 0 0 0 14rpx;
						font-size: 24rpx;
						color: #1F37DC;
						line-height: 36rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				&.show-web-body {
					height: auto;
					padding: 12rpx 0 20rpx 0;
					margin: 0 0 20rpx 0;
					border-bottom: 1rpx solid #eee;
				}
			}
			.suggestion-wrap {
				.title {
					padding: 24rpx 0 0 0;
					color: #999;
					font-size: 26rpx;
					line-height: 38rpx;
				}
				.suggestion-list {
					.item {
						display: flex;
						width: 100%;
						.item-cont {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 44rpx;
							padding: 12rpx 20rpx;
							border-radius: 30rpx;
							margin: 24rpx 0 0 0;
							font-size: 26rpx;
							color: #333;
							line-height: 44rpx;
							background-color: #fff;
							box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.1);
							.txt {
								flex: 1;
								max-width: calc(100% - 80rpx);
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.pic {
								display: block;
								width: 30rpx;
								height: 30rpx;
							}
						}
					}
				}
			}
			.item-right {
				display: flex;
				justify-content: flex-end;
				.txt {
					max-width: 100%;
					padding: 20rpx 32rpx;
					border-radius: 40rpx 40rpx 0 40rpx;
					box-sizing: border-box;
					color: #fff;
					font-size: 30rpx;
					line-height: 48rpx;
					background: #3D4CF1;
					box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.16);
					.copy-btn {
						display: inline-block;
						margin: -6rpx 0 0 12rpx;
						vertical-align: middle;
						.icon {
							display: block;
							width: 32rpx;
						}
					}
				}
			}
			.bottom-btns {
				display: flex;
				justify-content: flex-start;
				padding: 20rpx 0 0 0;
				.item {
					display: flex;
					align-items: center;
					margin: 0 48rpx 0 0;
					padding: 0;
					border: 0;
					border-radius: 0;
					color: #999;
					font-size: 24rpx;
					line-height: 36rpx;
					background-color: #fff;
					box-shadow: none;
					.icon {
						display: block;
						width: 36rpx;
						height: 36rpx;
						margin: 0 6rpx 0 0;
					}
				}
			}
		}
	}
}
.info-list-wrap {
	padding: 24rpx 12rpx 80rpx 12rpx;
	margin: 24rpx 0 0 0;
	border-radius: 40rpx;
	background: linear-gradient(180deg, #FEF1D4 0%, rgba(255,234,216,0.67) 57%, rgba(255,255,255,0) 100%);
	.info-header {
		padding: 0 24rpx;
		.total {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #333;
			.icon {
				display: block;
				width: 24rpx;
				height: 24rpx;
			}
			.num {
				margin: 0 8rpx;
				color: #FA9108;
			}
		}
		.sub-header {
			padding: 12rpx 0 0 0;
			font-size: 36rpx;
			font-weight: bold;
			.blue {
				color: #1634FF;
			}
			.date {
				color: #999;
				font-size: 28rpx;
			}
		}
	}
	.info-new-item {
		padding: 24rpx;
		margin: 16rpx 0 0 0;
		border-radius: 30rpx;
		background-color: #fff;
		.title {
			font-size: 32rpx;
			line-height: 44rpx;
		}
		.desc {
			padding: 24rpx 0 12rpx 0;
			color: #999;
			font-size: 24rpx;
			.orgin {
				.icon {
					display: block;
					width: 28rpx;
					height: 28rpx;
					margin: 0 6rpx 0 20rpx;
					&:first-child {
						margin-left: 0;
					}
				}
			}
			.date {
				.icon {
					display: block;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
}
.relate-wrap {
	padding: 20rpx;
	margin: 0 12rpx;
	border-radius: 20rpx 20rpx 20rpx 0;
	background-color: #fff;
	.title {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 40rpx;
		color: #1634FF;
		.icon {
			display: block;
			width: 40rpx;
			height: 40rpx;
		}
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 20rpx 0 20rpx;
		.item {
			margin: 0 24rpx 24rpx 0;
			color: #151E5D;
			font-size: 28rpx;
		}
	}
}
.article-body {
	padding: 24rpx;
}
.article-html-wrap {
	padding: 24rpx;
	margin: 24rpx 0 0 0;
	border-radius: 40rpx;
	background-color: #fff;
	.article-title {
		font-size: 32rpx;
		line-height: 44rpx;
		font-weight: bold;
	}
	.article-time {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #999;
		.icon {
			display: block;
			width: 28rpx;
			height: 28rpx;
			margin: 0 0 0 40rpx;
			&:first-child {
				margin-left: 0;
			}
		}
	}
}
.bottom-postion {
	width: 100%;
	height: 60rpx;
}
.rich-text-box {
	max-width: 100%;
	word-wrap: break-word;
	word-break: break-all;
	word-break: normal;
	white-space: initial;
  .cursor {
    color: #3D4CF1;
		opacity: 0;
  }
}
.show-cursor {
  .cursor {
    color: #3D4CF1;
		opacity: 1;
		animation: blinking 1s infinite;
  }
}
@keyframes blinking {
	from {
		opacity: 1.0;
	}

	to {
		opacity: 0.0;
	}
}
/*==================首页跑马灯效果动画====================*/
// todo:用循环函数生成存在语法报错At-rule options not recognised，后期再仔细阅读官方文档，解决@keyframes关键字问题
@keyframes TranslateXSwiper-15 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 0.5rpx);
	}
}
@keyframes TranslateXSwiper-20 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 1rpx);
	}
}
@keyframes TranslateXSwiper-25 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 1.5rpx);
	}
}
@keyframes TranslateXSwiper-30 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 2rpx);
	}
}
@keyframes TranslateXSwiper-35 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 2.5rpx);
	}
}
@keyframes TranslateXSwiper-40 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 3rpx);
	}
}
@keyframes TranslateXSwiper-45 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 3.5rpx);
	}
}
@keyframes TranslateXSwiper-50 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 4rpx);
	}
}
@keyframes TranslateXSwiper-55 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 4.5rpx);
	}
}
@keyframes TranslateXSwiper-60 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 5rpx);
	}
}
@keyframes TranslateXSwiper-65 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 5.5rpx);
	}
}
@keyframes TranslateXSwiper-70 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 6rpx);
	}
}
@keyframes TranslateXSwiper-75 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 6.5rpx);
	}
}
@keyframes TranslateXSwiper-80 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 7rpx);
	}
}
@keyframes TranslateXSwiper-85 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 7.5rpx);
	}
}
@keyframes TranslateXSwiper-90 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 8rpx);
	}
}
@keyframes TranslateXSwiper-95 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 8.5rpx);
	}
}
@keyframes TranslateXSwiper-100 {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-750 * 9rpx);
	}
}

.loader-wrap {
	transform: scale(1);
}
.loader {
  width: 25px;
  aspect-ratio: 1;
  display: grid;
  border: 2px solid #0000;
  border-radius: 50%;
  border-color: #ccc #0000;
  animation: l16 1s infinite linear;
}
.loader::before,
.loader::after {    
  content: " ";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
}
.loader::before {
  border-color: #3D4CF1 #0000;
  animation: inherit; 
  animation-duration: .5s;
  animation-direction: reverse;
}
.loader::after {
  margin: 8px;
}
@keyframes l16 { 
  100%{transform: rotate(1turn)}
}

.loading2 {
  width: 24px;
  height: 24px;
  border: 2px solid #3D4CF1;
  border-top-color: transparent;
  border-radius: 100%;
  animation: circle infinite 0.75s linear;
}

// 转转转动画
@keyframes circle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.music-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100rpx;
	transform: scale(0.5) translateX(50%);
	.item {
		width: 6px;
		margin: 0 8rpx;
		border-radius: 6px;
		background-color: #3D4CF1;
	}
	.one {
		height: 86rpx;
		animation: radius-animation .58s infinite linear;
	}
	.two {
		height: 50rpx;
		animation: radius-animation .6s infinite linear;
	}
	.three {
		height: 76rpx;
		animation: radius-animation .57s infinite linear;
	}
	.four {
		height: 100rpx;
		animation: radius-animation .52s infinite linear;
	}
	.five {
		height: 76rpx;
		animation: radius-animation .4s infinite linear;
	}
	.six {
		height: 50rpx;
		animation: radius-animation .45s infinite linear;
	}
	.seven {
		height: 86rpx;
		animation: radius-animation .7s infinite linear;
	}
}
.music-wrap2 {
	transform: scale(0.5) translateX(-50%);
}
@keyframes radius-animation {
	100% {
		height: 20rpx;
	}
}