.gradient_bg { background: #000; }

#chat_list { transition: 0.5s; width: 100%; position: fixed; bottom: 0; left: -100vw; z-index: 998; opacity: 0;
	max-width: 580px;
	height: 100%;
	background: #171717;
}

#chat_list .head { position: relative; padding: 0; text-align: center;  }
#chat_list .head h3 { padding: 30px 0 20px; background: #fff; }
#chat_list .head img { width: 20%; height: auto; max-width: 710px; }
#chat_list .head p { font-size: 20px; padding: 15px 0; color: #fff; }
#chat_list .head .chat_close { position: absolute; right: 20px; top: 20px; width: 30px; height: auto; cursor: pointer; }

#chat_list ul { overflow-y: auto; position: absolute; padding: 20px 0 50px; position: relative; height: calc(100% - 180px); bottom: 0; 
	box-sizing: border-box;
	mask-image: linear-gradient(to top, transparent 0%, black 10%, black 100%);
	-webkit-mask-image: linear-gradient(to top, transparent 0%, black 10%, black 100%);

}
#chat_list ul li { padding: 0 20px 30px; display: flex; }
#chat_list ul li .pic { background: #fff; width: 55px; height: 55px; border-radius: 50%; overflow: hidden; position: relative; }
#chat_list ul li .pic img { left: -18%; top: -23%; position: absolute; width: 140%; height: auto; }
#chat_list ul li .box { width: calc(90% - 75px); margin: 0 20px; }
#chat_list ul li .box .info { color: #fff; font-size: 20px; padding: 0 5px 10px; }
#chat_list ul li .box .info span { display: inline-block; color: #a1a1a1; font-size: 18px; }
#chat_list ul li .box .text { display: inline-block; position: relative; background: #fff; border-radius: 15px; padding: 15px 20px; font-size: 24px; line-height: 130%; }
#chat_list ul li .box .text::after { content: ''; position: absolute;
	top: 15px; 
	left: -18px;
	width: 20px;
	height: 20px;
	background: url(../images/common/chat_asset1.png) no-repeat center center;
	background-size: 100% auto;
}

#chat_list ul li.right { flex-direction: row-reverse }
#chat_list ul li.right .info { text-align: right; }
#chat_list ul li.right .text { background: #b8edf5; text-align: left; }
#chat_list ul li.right .box { text-align: right; }
#chat_list ul li.right .box .text::after {
	background: url(../images/common/chat_asset2.png) no-repeat center center;
	right: -18px;
	left: auto;
	background-size: 100% auto;
}


#chat_list.mini .head img {  width: 30%; }
#chat_list.shop .head img {  width: 30%; }

#chat_list.open { left: 0; opacity: 1; }

/* ------------------------------------------------------------ Ipad */

@media only screen and (max-width:1280px){
	
	#voice-control { margin: 0; right: auto; border-top-left-radius: 0; }
}

/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
		
	#chat_list.open { bottom: 0; z-index: 996; }
	#chat_list { left: 0; bottom: -100vh; }
	#chat_list .head p { font-size: 16px; padding: 10px 0; }
	#chat_list ul li { padding: 0 4% 15px; }
	#chat_list ul li .pic { width: 45px; height: 45px; }
	#chat_list ul li .box { margin: 0 15px; width: calc(94% - 30px); }
	#chat_list ul li .box .info { font-size: 16px; }
	#chat_list ul li .box .info span { font-size: 14px; }
	#chat_list ul li .box .text { padding: 12px 4%; font-size: 16px; }
	#chat_list ul li .box .text::after { width: 15px; height: 15px; left: -14px; }
	#chat_list ul li.right .box .text::after { right: -15px; }
	
}