/*
 * ============================================================
 * TABLE OF CONTENTS (目錄)
 * ============================================================
 *
 *  1.  Tools Button
 *
 *  2.  Back to Top
 *
 *  3.  Service Block
 *      3-1. Quick Icon Block
 *      3-2. Quick Icon Group
 *      3-3. Quick Icon Group Item
 *
 *  4.  聊天選項面板
 *
 *  5.  AI 聊天對話框
 *      5-1. 對話框基本樣式
 *      5-2. 對話框 Header
 *      5-3. 對話框 Body
 *      5-4. 對話框 Footer
 *      5-5. 訊息氣泡
 *
 *  6.  文字樣式
 *
 *  7.  RWD: max-width: 1400px
 *
 *  8.  RWD: max-width: 576px
 *
 * ============================================================
 */

/* ============================================================
 * 1. Tools Button
 * ============================================================ */
.tools-btn {
		background-color: var(--tools-btn);
		border-radius: 50%;
		width: 50px;
		height: 50px;
		opacity: .9;
		padding: 0.5rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		position: relative;
		-webkit-box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
		box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
		-webkit-transition: var(--transition-basic);
		-o-transition: var(--transition-basic);
		transition: var(--transition-basic);
}
.tools-btn .icon {
		aspect-ratio: 1;
}
.tools-btn:hover {
		background-color: var(--tools-btn-hover);
}

/* ============================================================
 * 2. Back to Top
 * ============================================================ */
.back-to-top {
		margin-top: 10px;
		opacity: 0;
		pointer-events: none;
		position: fixed;
		bottom: 1rem;
}
.back-to-top.active {
		opacity: .5;
		pointer-events: painted;
}
.back-to-top:hover,
.back-to-top.active:hover {
		opacity: 1;
}
.icon-close {
		width: 24px;
		height: 24px;
		cursor: pointer;
		-webkit-transition: -webkit-transform 0.2s ease;
		transition: -webkit-transform 0.2s ease;
		-o-transition: transform 0.2s ease;
		transition: transform 0.2s ease;
		transition: transform 0.2s ease, -webkit-transform 0.2s ease;
		-webkit-filter: brightness(0) invert(1);
		filter: brightness(0) invert(1);
		opacity: 0.8;
}
.icon-group-item {
		background-color: var(--icon, #00a1ff);
		border-radius: 62.4375rem;
		opacity: 0.8;
		padding: 0.6875rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		gap: 0rem;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		position: relative;
		-webkit-box-shadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
		box-shadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}
.icon-to-top {
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 1.625rem;
		height: 1.625rem;
		position: relative;
		overflow: visible;
		aspect-ratio: 1;
}

/* ============================================================
 * 3. Service Block
 * ============================================================ */
/* ---- 3-1. Quick Icon Block ---- */
.quick-icon-block {
		position: fixed;
		right: 1rem;
		top: 50px;
		bottom: 0;
		margin: auto;
		z-index: 1053;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
}
.support-agent {
		opacity: .75;
}
.support-agent:hover {
		opacity: 1;
}
.support-agent.active {
		opacity: 0;
}
/* ---- 3-2. Quick Icon Group ---- */
.quick-icon-group {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: flex-end;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		position: absolute;
		bottom: 0;
		right: 0;
		opacity: 0;
		-webkit-transform: scale(0);
		-ms-transform: scale(0);
		transform: scale(0);
		-webkit-transition: var(--transition-basic);
		-o-transition: var(--transition-basic);
		transition: var(--transition-basic);
		-webkit-transform-origin: right bottom;
		-ms-transform-origin: right bottom;
		transform-origin: right bottom;
		min-width: 150px;
		z-index: 1053;
}
.quick-icon-group.show {
		opacity: .85;
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
		-webkit-transition: var(--transition-basic);
		-o-transition: var(--transition-basic);
		transition: var(--transition-basic);
}
/* ---- 3-3. Quick Icon Group Item ---- */
.quick-icon-group-item {
		position: relative;
		width: 100%;
}
.quick-icon-group .quick-icon-group-item:nth-child(2) > a {
		border-radius: .5rem 0 0 0;
}
.quick-icon-group .quick-icon-group-item:last-child > a {
		border-radius: 0 0 .5rem .5rem;
}
.quick-icon-group-item > a {
		padding: 0.5rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		position: relative;
		width: 100%;
		overflow: hidden;
}
.quick-icon-close {
		border-radius: .5rem .5rem 0 0;
		padding: .125rem .35rem 0 .35rem;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 1.75rem;
		height: 1.75rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		aspect-ratio: 1;
}
.quick-icon-close,
.quick-icon-group-item > a {
		background-color: var(--tools-btn);
		color: var(--color-white);
		-webkit-transition: var(--transition-basic);
		-o-transition: var(--transition-basic);
		transition: var(--transition-basic);
		opacity: .85;
}
.quick-icon-close:hover,
.quick-icon-group-item > a:hover {
		background-color: var(--tools-btn-hover);
		opacity: 1;
}
.quick-icon-group-item .icon {
		width: 1.75rem;
		height: 1.75rem;
		aspect-ratio: 1;
		-ms-flex-negative: 0;
		flex-shrink: 0;
}
.quick-icon-group-item .icon-text {
		padding: 0 .5rem;
		-ms-flex-negative: 0;
		flex-shrink: 0;
}
.icon-close {
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 1rem;
		height: 1rem;
		position: relative;
		overflow: visible;
		aspect-ratio: 1;
}
.icon-filter {
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 2rem;
		height: 2rem;
		position: relative;
		overflow: visible;
		aspect-ratio: 1;
}
.icon-faq {
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 2rem;
		height: 2rem;
		position: relative;
		overflow: visible;
		aspect-ratio: 1;
}

/* ============================================================
 * 4. 聊天選項面板
 * ============================================================ */
.quick-contact-group {
		position: fixed;
		right: 1rem;
		top: 0;
		bottom: 0;
		margin: auto;
		background-color: var(--color-white);
		border-radius: .75rem;
		-webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
		width: var(--chat-width);
		opacity: 0;
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
		-webkit-transition: var(--transition-basic);
		-o-transition: var(--transition-basic);
		transition: var(--transition-basic);
		z-index: 1054;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
}
.quick-contact-group.show {
		-webkit-transition: var(--transition-basic);
		-o-transition: var(--transition-basic);
		transition: var(--transition-basic);
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
}
.quick-contact-group .panel {
		background-color: var(--dark-blue);
		padding: 1rem 3rem;
		border-radius: .75rem .75rem 0 0;
		color: var(--color-white);
		text-align: center;
		position: relative;
}
.panel-close {
		width: 1rem;
		height: 1rem;
		position: absolute;
		right: .5rem;
		top: .5rem;
		margin: auto;
		aspect-ratio: 1;
}
.quick-contact-group .panel .no {
		font-size: var(--font-size-base-lg);
}
.quick-contact-group-item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		padding: 1rem;
		-webkit-transition: var(--transition-basic);
		-o-transition: var(--transition-basic);
		transition: var(--transition-basic);
		gap: 1rem;
}
.quick-contact-group-item .title {
		font-size: var(--font-size-base);
		color: var(--dark-blue);
}
.quick-contact-group-item {
		color: var(--color-gray);
		line-height: var(--line-height-tight);
		text-decoration: none;
}
.quick-contact-group-item .icon {
		width: 2.5rem;
		height: 2.5rem;
		aspect-ratio: 1;
		-ms-flex-negative: 0;
		flex-shrink: 0;
}
.quick-contact-group-item:hover {
		background-color: #f5f5f5;
		color: var(--text-basic);
		-webkit-transition: var(--transition-basic);
		-o-transition: var(--transition-basic);
		transition: var(--transition-basic);
}
.quick-contact-group-item:last-child {
		border-bottom: none;
		border-radius: 0 0 .5rem .5rem;
}

/* ============================================================
 * 5. AI 聊天對話框
 * ============================================================ */
/* ---- 5-1. 對話框基本樣式 ---- */
.chat-dialog-box {
		font-family: var(--font-family-basic);
		color: var(--text-basic);
		font-size: var(--font-size-sm);
		font-weight: var(--font-weight-normal);
		line-height: var(--line-height-normal);
		position: fixed;
		right: 1rem;
		top: 0;
		bottom: 0;
		margin: auto;
		width: var(--chat-width);
		background-color: var(--color-white);
		border-radius: 0.625rem;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 0.4375rem;
		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: flex-end;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		-webkit-box-shadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
		box-shadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
		display: none;
		opacity: 0;
		z-index: 1055;
		height: -webkit-fit-content;
		height: -moz-fit-content;
		height: fit-content;
}
.chat-dialog-box.show {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		opacity: 1;
}
/* ---- 5-2. 對話框 Header ---- */
.chat-dialog-head {
		background-color: var(--tools-btn-hover);
		color: var(--color-white);
		border-radius: 0.625rem 0.625rem 0rem 0rem;
		padding: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-item-align: stretch;
		-ms-grid-row-align: stretch;
		align-self: stretch;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		position: relative;
		width: 100%;
		height: 35px;
}
.chat-head-close {
		width: 1rem;
		height: 1rem;
		position: absolute;
		right: 1rem;
		top: 6px;
		bottom: auto;
		margin: auto;
		aspect-ratio: 1;
}
.basic-icon-close {
		width: 1rem;
		height: auto;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 1rem;
		margin: auto;
		aspect-ratio: 1;
}
/* ---- 5-3. 對話框 Body ---- */
.chat-dialog-body {
		padding: 0rem 0rem 0.3125rem 0rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 0.0625rem;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 100%;
		height: 22.625rem;
		position: relative;
		overflow-y: auto;
}
.frame-head {
		padding: 1.25rem 0.625rem 0.625rem 0.625rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 0.625rem;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-item-align: stretch;
		-ms-grid-row-align: stretch;
		align-self: stretch;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		position: relative;
}
.chat-dialog-box .tag-icon {
		background-color: var(--tools-btn);
		border-radius: 50%;
		width: 33px;
		height: 33px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		position: relative;
		aspect-ratio: 1;
}
.basic-icon-robot {
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 1.5rem;
		height: 1.5rem;
		position: relative;
		overflow: visible;
}
.chat-qa-group {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: 0.625rem;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		position: relative;
		width: calc(100% - 45px);
}
.chat-qa-group .chat-msg-box {
		width: 100%;
}
.chat-qa-btn {
		background-color: var(--color-white);
		border-radius: .75rem;
		padding: .5rem .75rem;
		display: block;
		width: 100%;
		font-size: var(--font-size-sm);
		border: 1px solid var(--border-color);
		cursor: pointer;
		-webkit-transition: var(--transition-fast);
		-o-transition: var(--transition-fast);
		transition: var(--transition-fast);
}
.chat-qa-btn:hover {
		color: var(--color-white);
		background-color: var(--primary-blue);
		border-color: var(--primary-blue);
		-webkit-transition: var(--transition-fast);
		-o-transition: var(--transition-fast);
		transition: var(--transition-fast);
}
.chat-frame {
		padding: .5rem 1rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		gap: .75rem;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		-ms-flex-item-align: stretch;
		-ms-grid-row-align: stretch;
		align-self: stretch;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		position: relative;
}
/* ---- 5-4. 對話框 Footer ---- */
.chat-dialog-footer {
		background-color: var(--color-white);
		border-radius: 0rem 0rem 0.625rem 0.625rem;
		border-style: solid;
		border-color: var(--border-color);
		border-width: 0.0625rem 0rem 0rem 0rem;
		padding: 0.625rem;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		gap: 0;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		width: 100%;
		height: 4.375rem;
		position: relative;
}
.dialog-window-talk-box {
		padding: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		gap: 0.625rem;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		height: 3.125rem;
		position: relative;
}
.dialog-window-talk-box > input {
		border-radius: 0.625rem 0 0 0.625rem !important;
}
.chat-qa-btn2 .btn {
		border-radius: 0 0.625rem 0.625rem 0 !important;
}
.chat-qa-btn2 {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		gap: 0;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		height: 3.125rem;
		position: relative;
}
.chat-qa-btn2 .btn-primary {
		background-color: var(--dark-blue);
		border-color: var(--dark-blue);
		padding: 10px 10px;
		font-size: var(--font-size-base);
}
/* ---- 5-5. 訊息氣泡 ---- */
.chat-info-box {
		color: var(--color-white);
		background-color: var(--cloud-blue);
		border-radius: 5rem;
		padding: .25rem .75rem;
		display: block;
		font-size: var(--font-size-xs);
}
.chat-msg-box {
		text-align: start;
		background-color: var(--color-light-gray);
		border-radius: .75rem;
		padding: .5rem .75rem;
		display: block;
		width: calc(100% - 45px);
		font-size: var(--font-size-sm);
}
.chat-user-box {
		text-align: end;
		background-color: var(--color-light-gray);
		border-radius: .75rem;
		padding: .5rem .75rem;
		display: block;
		width: calc(100% - 45px);
		font-size: var(--font-size-sm);
}

/* ============================================================
 * 6. 文字樣式
 * ============================================================ */
.small-14-regular {
		text-align: start;
		font-size: 0.875rem;
		font-weight: 500;
		position: relative;
}
.small-14-regular-span {
		color: var(--color-gray);
}
.small-14-regular-span3 {
		color: var(--dark-blue);
}

/* ============================================================
 * 7. RWD: max-width: 1400px
 * ============================================================ */
@media (max-width: 1400px) {
		.quick-icon-block {
				right: .5rem;
		}
		.tools-btn {
				width: 45px;
				height: 45px;
		}
}

/* ============================================================
 * 8. RWD: max-width: 576px
 * ============================================================ */
@media (max-width: 576px) {
		.chat-dialog-box,
		.quick-contact-group {
				right: 0;
				left: 0;
		}
		.back-to-top {
				bottom: 2rem;
		}
		.back-to-top.has-nav {
				bottom: 6rem;
		}
}