@charset "utf-8";
/* CSS Document */
.chat-widget {
	position: fixed;
	bottom: 75px;
	right: 20px;
	width: 300px;
	max-width: 100%;
	z-index: 1050;
	background:#f5f5f5;
	border-radius: 30px;
	overflow:hidden;
}
.chat-body {
	display: none;
	border-top: none;
	max-height:650px;
	overflow:hidden;
	padding:20px;
}
.ai_box {
	max-height:400px;
	overflow-y: auto;
	padding:0 15px 0 0px;
}
.ai_box::-webkit-scrollbar {
 width: 5px;
 height: 10px;
 background-color: #ccc; /* or add it to the track */
}
/* Add a thumb */
.ai_box::-webkit-scrollbar-thumb {
 background: #57CD99;
 border: 1px solid #57CD99;
 border-radius: 10px;
}
.chat-toggle-btn {
	border:0;
	position: fixed;
	bottom:50px;
	right:0px;
	z-index: 99;
}
/* 提示文字樣式 */
.chat-toggle-btn .tooltip-text {
	position: absolute;
	top: -50px;
	left: -80px;
	background: #fff;
	padding: 10px 15px;
	font-size: 13px;
	border: 1px solid #eee;
	border-radius: 50px;
	color: #ff7800;
	white-space: nowrap;
	display: none; /* 預設隱藏 */
}
.chat-toggle-btn:hover .tooltip-text {
	display: block; /* 滑鼠移入時顯示 */
}
.chat-toggle-btn img {
	transition: width 0.3s ease, height 0.3s ease; /* 增加平滑切換效果 */
}
.chat-toggle-btn img.close-icon {
	width: 50px;
	height: 50px;
}
.chat-toggle-btn img.open-icon {
	width: 70px;
}
.send_btn {
	display: block;
	height: 35px;
	background-color: #ccc;
	border-radius: 5px;
	position: relative;
	z-index: 999;
	border: 0;
	color: #333;
	padding:0;
	width:100%;
}
.send_btn:hover {
	background-color: #57CD99;
	color: #fff;
}
/***/
.ai_title {
	font-size:18px;
	text-align:center;
	font-weight:700;
	margin-bottom:20px;
}
.ai_text {
	font-size:14px;
	line-height:18px;
}
.formBox input[type=text] {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	padding:2px;
	height:40px;
	width:100%;
	font-size:12px;
	line-height: 40px;
	border:1px solid #948A86;
	background:transparent;
}
/* =========================================================
   以下為補上的 CSS
   依 Bootstrap 5 常用設定整理
========================================================= */

/* -------------------------
   基本 Box Sizing
------------------------- */

*, *::before, *::after {
 box-sizing: border-box;
}
/* -------------------------
   Bootstrap Row
------------------------- */

.brow {
 --bs-gutter-x: 1.5rem;
 --bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
 margin-top: calc(-1 * var(--bs-gutter-y));
 margin-right: calc(-0.5 * var(--bs-gutter-x));
 margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.brow > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
 padding-right: calc(var(--bs-gutter-x) * 0.5);
 padding-left: calc(var(--bs-gutter-x) * 0.5);
	margin-top: var(--bs-gutter-y);
}
/* -------------------------
   Bootstrap Grid
------------------------- */

.col-2 {
	flex: 0 0 auto;
	width: 16.66666667%;
}
.col-3 {
	flex: 0 0 auto;
	width: 25%;
}
.col-9 {
	flex: 0 0 auto;
	width: 75%;
}
.col-10 {
	flex: 0 0 auto;
	width: 83.33333333%;
}
/* -------------------------
   Bootstrap Gutter
------------------------- */

.g-3, .gx-3 {
 --bs-gutter-x: 1rem;
}
.g-3, .gy-3 {
 --bs-gutter-y: 1rem;
}
/* -------------------------
   Flex 對齊
------------------------- */

.justify-content-between {
	justify-content: space-between !important;
}
.justify-content-center {
	justify-content: center !important;
}
/* -------------------------
   Width / Height
------------------------- */

.w-100 {
	width: 100% !important;
}
.h-100 {
	height: 100% !important;
}
/* -------------------------
   Display
------------------------- */

.d-none {
	display: none !important;
}
/* -------------------------
   Margin
------------------------- */

.mb-0 {
	margin-bottom: 0 !important;
}
.mb-3 {
	margin-bottom: 1rem !important;
}
.mx-auto {
	margin-right: auto !important;
	margin-left: auto !important;
}
/* -------------------------
   Padding
------------------------- */

.p-2 {
	padding: 0.5rem !important;
}
.py-2 {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}
.ps-0 {
	padding-left: 0 !important;
}
/* -------------------------
   Border
------------------------- */

.border-0 {
	border: 0 !important;
}
.rounded-4 {
	border-radius: 5px !important;
}
/* -------------------------
   Shadow
------------------------- */

.shadow {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.shadow-sm {
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
/* -------------------------
   Text
------------------------- */

.text-center {
	text-align: center !important;
}
/* -------------------------
   Bootstrap Card
------------------------- */

.card {
 --bs-card-spacer-y: 1rem;
 --bs-card-spacer-x: 1rem;
 --bs-card-title-spacer-y: 0.5rem;
 --bs-card-border-width: 1px;
 --bs-card-border-color: rgba(0, 0, 0, 0.175);
 --bs-card-border-radius: 0.375rem;
 --bs-card-bg: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: var(--bs-card-height);
	color: #212529;
	word-wrap: break-word;
	background-color: var(--bs-card-bg);
	background-clip: border-box;
	border: var(--bs-card-border-width) solid var(--bs-card-border-color);
	border-radius: var(--bs-card-border-radius);
}
.card > img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}
/* -------------------------
   Bootstrap List Group
------------------------- */

.list-group {
	display: flex;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
	border-radius: 0.375rem;
}
.list-group-flush {
	border-radius: 0;
}
.list-group-item {
	position: relative;
	display: block;
	padding: 0.5rem 1rem;
	color: #212529;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group-flush > .list-group-item {
	border-width: 0 0 1px;
}
.list-group-flush > .list-group-item:last-child {
	border-bottom-width: 0;
}
/* -------------------------
   Bootstrap Form Control
------------------------- */

.form-control {
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	appearance: none;
	border-radius: 0.375rem;
	transition:
 border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
	color: #212529;
	background-color: #fff;
	border-color: #86b7fe;
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
 .form-control::placeholder {
 color: #6c757d;
 opacity: 1;
}
/* -------------------------
   自訂 fs_small
   HTML 有使用但 Bootstrap 無此名稱
   依 Bootstrap small / fs-6 概念
------------------------- */

.fs_small {
	font-size: 14px;
}
/* -------------------------
   AI 問題連結
   HTML 有使用 question
------------------------- */

.question {
	color: #212529;
	text-decoration: none;
	cursor: pointer;
}
.question:hover {
	color: #0d6efd;
	text-decoration: none;
}
/* -------------------------
   AI Icon
------------------------- */

.toggle-icon {
	display: block;
	max-width: 100%;
	height: auto;
}
/* -------------------------
   HR 基本 Bootstrap 5 樣式
------------------------- */

hr {
	margin: 1rem 0;
	color: inherit;
	border: 0;
	border-top: 1px solid;
	opacity: 0.25;
}


/* =========================================================
   手機版微調
   不變更原本 300px 視窗設定
========================================================= */

@media (max-width: 575.98px) {
 .chat-widget {
 max-width: calc(100% - 40px);
}
}