.btn-group .btn.active {
      background-color: #dc3545 !important; /* Bootstrap danger 紅 */
      color: #fff !important;
      border: none !important;
}
.no-focus:focus {
      outline: none !important;
      box-shadow: none !important;
    }
.messages {
      flex: 1;
      overflow-y: auto;
      margin-bottom: 10px;
      overflow-x: clip;
    }

.message {
      display: flex;
      margin-bottom: 10px;
    }

.message.user {
      justify-content: flex-end;
    }

 .message.customer {
      justify-content: flex-start;
    }

.bubble {
      font-family:Arial, "微軟正黑體";
      max-width: 100%;
      padding: 10px;
      border-radius: 25px;
      line-height: normal; 
      box-shadow: 0 3px 8px 0 rgba(173,173,173,0.20),0 3px 8px 0 rgba(158,158,158,0.20);
    }

.customer .bubble {
      background: #F7F7F7;
      border: 1px solid #E8E8E8;
      color: #000;
      border-top-left-radius: 0;
    }

.user .bubble {
      background: #0978cd;
      color: #fff;
      border-top-right-radius: 0;
    }
.input {
      background-color: #E8F4FD;
    }
.input-area {
      display: flex;
      background-color: #E8F4FD;
    }

.input-area input {
      flex: 1;
      border-radius: 20px;
      border: 1px solid #ccc;
      background-color: #E8F4FD;
    }

.input-area button {
      background: #0978cd;
      color: white;
      cursor: pointer;
    }

.input-area button:hover {
      background: #0660A4;
    }
/* 輸入區塊 */
    .input-container {
      background-color: #E8F4FD;
      display: flex;
      align-items: center;
      width: 100%;
		border: 1px solid #C4D9FC;
}
    .text-input {
      flex: 1;
      border: none;
      outline: none;
      background-color: #E8F4FD;
      padding: 0px 10px 0px 10px;
}
/*輸入區塊end */

.chatbox-slide-up {
      animation: slideUp 0.3s ease-out forwards;
    }
@keyframes slideUp {
      from { transform: translateY(100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

#chat-container {
      position: fixed;
      z-index: 1050;
      display: none;
}
#action-button {
      position: fixed;
      z-index: 1060;
      border-radius: 50%;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 3px 0 rgba(130,130,130,0.2),0 2px 3px 0 rgba(130,130,130,0.2);
      border: 1px solid rgba(130,130,130,0.2);
}

/* alertBtn 圖片按鈕 */
#alertBtn {
      background-position: center;
      border: none;
      cursor: pointer;
      background-size: 16px auto;
      background-repeat: no-repeat;
      background-image: url(''); /* 開 */
}
#alertBtn.closed {
      background-image: url(''); /* 關 */
}

    /* Alert 區塊動畫 */
#alertArea {
      transition: all 0.5s ease;
      opacity: 1;
      transform: scaleY(1);
      transform-origin: top;
}
#alertArea.hide {
      opacity: 0;
      transform: scaleY(0);
      height: 0;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
    /* 列表 */
.common-questions {
      background-color: #78b3af; /* 常見問題 */
    }
.data-issues {
      background-color: #bb9971; /* 資料問題 */
}
    /* 列表 end*/
.text-0978cd {
      color: #0978cd; /* 深藍色 */
}
.bg-FDF2FF {
      background-color: #FFECE9; /* 淺粉色 */
}
.bg-header {
      background-color: #ff7200; /* 橘色 */
}
@media (max-width: 575.98px) {
.chat-text-small { font-size: 0.688em;
}
.chat-text-medium { font-size: 0.875em;
}
.chat-text-large { font-size: 1.063em;
}
#chat-box { width: 100%;
}
#chat-container {
      bottom: 55px;
      right: 10px;
}	
#action-button {
      width: 45px;
      height: 45px;
      bottom: 10px;
      right: 10px;
}
.btn-image-chat {
	background-size: 45px auto;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url('../images/act-ico.svg'), -webkit-linear-gradient(270deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
	background-image: url('../images/act-ico.svg'), -moz-linear-gradient(270deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
	background-image: url('../images/act-ico.svg'), -o-linear-gradient(270deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
	background-image: url('../images/act-ico.svg'), linear-gradient(180deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
}
.btn-image-close {
	background-size: 14px auto;
	background-position: center;
	background-repeat: no-repeat;
    background-image: url('../images/close-ico.svg');
}
.text-input {
      font-size: 0.875em;
}
.btn-Xcircle {
	color: #7F7F7F;
	font-size: 1.6em;
}
.btn-Xcircle:hover {
	color: #dc3545;
	
}
}
@media (min-width: 576px) and (max-width: 991.98px) {
.chat-text-small { font-size: 0.75em;
}
.chat-text-medium { font-size: 0.938em;
}
.chat-text-large { font-size: 1.125em;
}
#chat-box { width: 500px;
}
#chat-container {
      bottom: 60px;
      right: 10px;
}	
#action-button {
      width: 50px;
      height: 50px;
      bottom: 10px;
      right: 10px;
}
.btn-image-chat {
	background-size: 50px auto;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url('../images/act-ico.svg'), -webkit-linear-gradient(270deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
	background-image: url('../images/act-ico.svg'), -moz-linear-gradient(270deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
	background-image: url('../images/act-ico.svg'), -o-linear-gradient(270deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
	background-image: url('../images/act-ico.svg'), linear-gradient(180deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
}
.btn-image-close {
	background-size: 16px auto;
	background-position: center;
	background-repeat: no-repeat;
    background-image: url('../images/close-ico.svg');
}
.text-input {
      font-size: 0.938em;
}
.btn-Xcircle {
	color: #7F7F7F;
	font-size: 1.6em;
}
.btn-Xcircle:hover {
	color: #dc3545;
	
}
}
@media (min-width: 992px) and (max-width: 1399.98px) {
.chat-text-small { font-size: 0.75em;
}
.chat-text-medium { font-size: 0.938em;
}
.chat-text-large { font-size: 1.125em;
}
#chat-box { width: 600px;
}
#chat-container {
      bottom: 65px;
      right: 15px;
}	
#action-button {
      width: 55px;
      height: 55px;
      bottom: 10px;
      right: 15px;
}
.btn-image-chat {
	background-size: 55px auto;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url('../images/act-ico.svg'), -webkit-linear-gradient(270deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
	background-image: url('../images/act-ico.svg'), -moz-linear-gradient(270deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
	background-image: url('../images/act-ico.svg'), -o-linear-gradient(270deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
	background-image: url('../images/act-ico.svg'), linear-gradient(180deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
}
.btn-image-close {
	background-size: 18px auto;
	background-position: center;
	background-repeat: no-repeat;
    background-image: url('../images/close-ico.svg');
}
.text-input {
      font-size: 0.938em;
}
.btn-Xcircle {
	color: #7F7F7F;
	font-size: 1.8em;
}
.btn-Xcircle:hover {
	color: #dc3545;
	
}
}
@media (min-width: 1400px) {
.chat-text-small { font-size: 0.75em;
}
.chat-text-medium { font-size: 1em;
}
.chat-text-large { font-size: 1.25em;
}
#chat-box { width: 700px; 
}
#chat-container {
      bottom: 75px;
      right: 20px;
}	
#action-button {
      width: 58px;
      height: 58px;
      bottom: 15px;
      right: 15px;
}
.btn-image-chat {
	background-size: 58px auto;
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url('../images/act-ico.svg'), -webkit-linear-gradient(270deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
	background-image: url('../images/act-ico.svg'), -moz-linear-gradient(270deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
	background-image: url('../images/act-ico.svg'), -o-linear-gradient(270deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
	background-image: url('../images/act-ico.svg'), linear-gradient(180deg,rgba(255,190,23,1.00) 0%,rgba(255,190,23,1.00) 100%);
}
.btn-image-close {
	background-size: 20px auto;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('../images/close-ico.svg');
}
.text-input {
      font-size: 1em;
}
.btn-Xcircle {
	color: #7F7F7F;
	font-size: 2em;
}
.btn-Xcircle:hover {
	color: #dc3545;
	
}
}

.cmd-link {
	cursor: pointer;
}