html, body,
div, p, span, a,
textarea {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 15px;
	color: #000;
	font-family: 'Arial', '微软雅黑', '黑体', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Gulim';
	word-break: keep-all;
	word-wrap: break-word;
	text-decoration: none;
	-webkit-text-size-adjust: none;
	list-style: none;
	box-sizing: border-box;
	background: none;
	vertical-align: baseline;
	line-height: 1.6;
	background: none;
	letter-spacing: -.02em;
	resize: none;
}

div.wrap-chatbot {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

/*header*/
div.wrap-chatbot > div.wrap-header {
	position: relative;
	width: 100%;
	height: 44px;
	flex: 0 0 44px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border-bottom: 1px #ddd solid;
}

div.wrap-chatbot > div.wrap-header::before {
	content: "";
	display: block;
	position: absolute;
	bottom: -1px;
	width: 100%;
	height: 1px;
	background: unset;
	box-shadow: 0 1px 1px rgba(0,0,0,.04);
	z-index: 2;
}

div.wrap-chatbot > div.wrap-header > span {
	padding-left: 15px;
	font-weight: bold;
	font-size: 16px;
}

div.wrap-chatbot > div.wrap-header > a.button-close {
	position: relative;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	margin-left: auto;
	margin-right: 7px;
	transition: background 0.2s;
}

div.wrap-chatbot > div.wrap-header > a.button-close:hover {
	background: rgba(0, 0, 50, 0.05);
}

div.wrap-chatbot > div.wrap-header > a.button-close::before,
div.wrap-chatbot > div.wrap-header > a.button-close::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2px;
	height: 16px;
	background: #000;
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transition: transform 0.2s;
}

div.wrap-chatbot > div.wrap-header > a.button-close::after {
	transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

div.wrap-chatbot > div.wrap-header > a.button-close:hover::before,
div.wrap-chatbot > div.wrap-header > a.button-close:hover::after {
	transform: translateX(-50%) translateY(-50%) rotate(225deg);
	background: #cc1020;
}

div.wrap-chatbot > div.wrap-header > a.button-close:hover::after {
	transform: translateX(-50%) translateY(-50%) rotate(135deg);
}

/*body*/
div.wrap-chatbot > div.wrap-body {
	flex: 1 0 0;
	background: #f2f3f4;
	overflow-y: auto;
}

div.wrap-chatbot > div.wrap-body::-webkit-scrollbar {
	width: 8px;
}

div.wrap-chatbot > div.wrap-body::-webkit-scrollbar-thumb {
	background-color: #d1d2d3;
	border-radius: 8px;
}

div.wrap-chatbot > div.wrap-body::-webkit-scrollbar-button {
	background-color: #f2f3f4;
	width: 8px;
	height: 1px;
}

div.wrap-chatbot > div.wrap-body > div.chat-ai {
	padding-top: 20px;
	padding-right: 30px;
	padding-bottom: 0;
	padding-left: calc(10px + 28px + 10px);
	position: relative;
}

div.wrap-chatbot > div.wrap-body > div.chat-ai::before {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 28px;
	overflow: hidden;
	background-color: #fff;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjhweCIgaGVpZ2h0PSIyOHB4IiB2aWV3Qm94PSIwIDAgMjggMjgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI4IDI4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwb2x5Z29uIGZpbGw9IiNDQzEwMjAiIHBvaW50cz0iOSw2IDgsNiA4LDYuOTgyIDgsMTIuMDE4IDgsMTMgOSwxMyAxNywxMyAxNywxMi4wMTggOSwxMi4wMTggOSw2Ljk4MiAxOSw2Ljk4MiAxOSw4IDExLDggMTAsOCANCgkJMTAsOSAxMCwxMCAxMCwxMSAxMSwxMSAxOCwxMSAxOCwxMCAxMSwxMCAxMSw5IDIwLDkgMjAsOCAyMCw2Ljk4MiAyMCw2Ljc3MiAyMCw2IAkiLz4NCgk8cG9seWdvbiBmaWxsPSIjQ0MxMDIwIiBwb2ludHM9IjExLDE3IDE4LDE3IDE4LDE2IDExLDE2IDEwLDE2IDEwLDE3IDEwLDE4IDEwLDE5IDExLDE5IDE5LDE5IDE5LDIwIDksMjAgOSwxNSAxNywxNSAxNywxNCA5LDE0IA0KCQk4LDE0IDgsMTUgOCwyMCA4LDIxIDksMjEgMjAsMjEgMjAsMjAuMjgyIDIwLDIwIDIwLDE5IDIwLDE4LjI4MiAyMCwxOCAxMSwxOCAJIi8+DQo8L2c+DQo8L3N2Zz4NCg==);
	position: absolute;
	left: 10px;
	top: 20px;
}

div.wrap-chatbot > div.wrap-body > div.chat-ai > div.message {
	background: #fff;
	padding: 10px 13px;
	border-radius: 16px;
	border-top-left-radius: 0;
	display: inline-block;
	max-width: 90%;
	word-break: break-all;
}

div.wrap-chatbot > div.wrap-body > div.chat-ai > div.message * {
	word-break: break-all;
}

div.wrap-chatbot > div.wrap-body > div.chat-ai.is-loading > div.message {
	height: 28px;
}

div.wrap-chatbot > div.wrap-body > div.chat-ai.is-loading > div.message::before {
	content: "";
	display: block;
	width: 14px;
	height: 3px;
	background: url(/ECK/images/chatbot/loading.gif?ver2025073001) no-repeat;
	background-size: cover;
	margin-top: 3px;
}

div.wrap-chatbot > div.wrap-body > div.chat-ai > div.message > a {
	color: #2d7bb3;
}

div.wrap-chatbot > div.wrap-body > div.chat-user {
	display: flex;
	justify-content: flex-end;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 30px;
	position: relative;
}

div.wrap-chatbot > div.wrap-body > div.chat-user > div.message {
	background: #e6e7e8;
	padding: 10px 13px;
	border-radius: 16px;
	border-top-right-radius: 0;
	display: inline-block;
	max-width: 90%;
	word-break: break-all;
}

div.wrap-chatbot > div.wrap-body > div.chat-user > div.message * {
	word-break: break-all;
}

div.wrap-chatbot > div.wrap-body > div:last-child {
	padding-bottom: 20px;
}

/*button*/
div.wrap-chatbot > div.wrap-button {
	flex: 0 0 41px;
	display: flex;
	align-items: center;
	border-top: 1px #ddd solid;
}

div.wrap-chatbot > div.wrap-button ul,
div.wrap-chatbot > div.wrap-button ul li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	list-style: none;
	box-sizing: border-box;
}

div.wrap-chatbot > div.wrap-button ul.list-button {
	width: 100%;
	display: flex;
	align-items: center;
}

div.wrap-chatbot > div.wrap-button ul.list-button {
	width: 100%;
	display: flex;
	align-items: center;
}

div.wrap-chatbot > div.wrap-button ul.list-button > li {
	margin-left: 5px;
}

div.wrap-chatbot > div.wrap-button ul.list-button > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15,56,128,.12);
	border: 1px rgba(15,56,128,0) solid;
	height: 30px;
	padding: 5px 10px;
	border-radius: 8px;
	transition: font-weight 0.2s, background 0.2s;
}

div.wrap-chatbot > div.wrap-button ul.list-button > li > a:hover {
	background: rgba(15,56,128,.18);
	font-weight: bold;
}

/*input*/
div.wrap-chatbot > div.wrap-input {
	position: relative;
	border-top: 1px #ebebeb solid;
	flex: 0 0 71px;
}

div.wrap-chatbot > div.wrap-input > textarea {
	display: block;
	width: 100%;
	height: 100%;
	padding: 10px;
	padding-right: 70px;
	word-break: break-all;
}

div.wrap-chatbot > div.wrap-input > textarea::-webkit-scrollbar {
	width: 8px;
}

div.wrap-chatbot > div.wrap-input > textarea::-webkit-scrollbar-thumb {
	background-color: #d1d2d3;
	border-radius: 8px;
}

div.wrap-chatbot > div.wrap-input > textarea::-webkit-scrollbar-button {
	background-color: #fff;
	width: 8px;
	height: 1px;
}

div.wrap-chatbot > div.wrap-input > textarea::placeholder {
	color: #bbb;
}

div.wrap-chatbot > div.wrap-input > div.button-submit {
	position: absolute;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	border-radius: 16px;
	background: #f2f3f4;
}

div.wrap-chatbot > div.wrap-input > div.button-submit > div.arrow {
	position: relative;
	height: 15px;
	margin-right: 2px;
}

div.wrap-chatbot > div.wrap-input > div.button-submit > div.arrow::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%) rotate(-45deg);
	border-top: 2px #cfcfcf solid;
	border-right: 2px #cfcfcf solid;
	transition: border 0.2s;
}

div.wrap-chatbot > div.wrap-input > div.button-submit > div.arrow::after {
	content: "";
	display: block;
	width: 2px;
	height: 15px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background: #cfcfcf;
	transition: background 0.2s;
}

div.wrap-chatbot > div.wrap-input > textarea:not(:placeholder-shown) + div.button-submit {
	cursor: pointer;
}

div.wrap-chatbot > div.wrap-input > textarea:not(:placeholder-shown) + div.button-submit > div.arrow::before {
	border-top: 2px #555 solid;
	border-right: 2px #555 solid;
}

div.wrap-chatbot > div.wrap-input > textarea:not(:placeholder-shown) + div.button-submit > div.arrow::after {
	background: #555;
}

div.wrap-chatbot > div.wrap-input > textarea:not(:placeholder-shown) + div.button-submit:hover > div.arrow::before {
	border-top: 2px #cc1020 solid;
	border-right: 2px #cc1020 solid;
}

div.wrap-chatbot > div.wrap-input > textarea:not(:placeholder-shown) + div.button-submit:hover > div.arrow::after {
	background: #cc1020;
}