/* 客製化樣式 - 覆蓋原始 style.css */

/*#region 改百滋色 */
.Home {
  background-color: #000;
}

.HomeVideo {
  display: block;
  margin: 0 auto;
  max-width: 90vw;
  max-height: 60vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.Home {
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

@media (max-width: 576px) {
  .HomeVideo {
    max-width: 60vh;
    max-height: 60vh;
  }

  .Home {
    min-height: 90vh;
  }
}

.logo-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.language-title {
  font-size: 16px;
  margin-bottom: 30px;
  color: #ccc;
  letter-spacing: 1px;
}

.language-content {
  font-size: 16px;
  margin-bottom: 10px;
  color: #ccc;
  letter-spacing: 1px;
}

.language-buttons {
  display: flex;
  gap: 30px;
  justify-content: center;
}

.lang-btn {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 6px 12px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 100px;
  text-align: center;
}

.lang-btn:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}
/*#endregion 改百滋色 */

/* Chat 聊天畫面客製化 */
.Chat {
  background-color: #000;
}

.Chat .navbar {
  background-color: #000;
  border-radius: 0; /* 移除圓角 */
}

/* Container 佈局變更 */
.footer-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: #ffffff;
}

.Chat .Container_row {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #1c1c1e;
  padding: 10px 5px;
  background-image: none; /* 移除漸層背景 */
}

/* iOS 專用樣式 */
@supports (-webkit-touch-callout: none) {
  .Chat .Container_row {
    background-color: #323235; /* iOS 顯示稍亮灰色 */
  }
}

/* 底部選單新增 */
.bottom-menu {
  position: relative;
  bottom: auto;
  padding: 4px 6px 6px 6px;
  background-color: #e6e6e6;
  width: 100%;
  z-index: 10;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.bottom-menu-btn {
  background-color: #fff; /* White buttons */
  color: #000; /* Black text */
  border: 1px solid #dcdcdc;
  border-radius: 16px;
  padding: 3px 9px;
  cursor: pointer;
}

/* 文字輸入區域變更 */
.Chat .Text_row {
  position: relative;
  background-color: #ffffff;
  bottom: initial;
}

.Chat .Text_row .Text_form {
  height: 34px;
  border-radius: 0; /* 移除圓角 */
  padding: 0 3rem 0 1rem;
  background-color: initial;
}

.Text_input {
  line-height: 34px;
}

@media (max-width: 992px) {
  .Text_input {
    width: 90%;
  }
}

/* 對話內容區域調整 */
.textShow {
  padding: 1.5rem 0.5rem 0.5rem 3rem;
  height: calc(100% - 120px); /* 調整高度計算 */
}

/* 警示列調整 */
.alert_row {
  position: relative; /* 從 fixed 改為 relative */
  background-color: #e6e6e6;
  bottom: initial;
  left: initial;
  transform: initial;
}

/* 訊息樣式變更 */
.userMsg .NowTime {
  color: #e8e7ec;
}

.BotMsg_box .BotMsg {
  background-color: #e8e7ec;
  max-width: calc(100dvw - 175px); /* 調整最大寬度 */
}

.BotMsg_box .BotMsg .NowTime {
  color: #e8e7ec;
}

/* 機器人頭像變更 */
.BotMsg_box::before {
  left: -45px;
  height: 50px; /* 從 45px 改為 50px */
  background-image: url('../images/pezcrown/YUAGI-gif.gif');
}

/* 使用者訊息樣式變更 */
.userMsg {
  background-color: #e8e7ec;
  color: #353434; /* 從 #F2E8D9 改為 #353434 */
}

/* Modal 背景變更 */
.modal-body {
  background-color: #0c0c0c;
}

/* 按讚按踩按鈕顏色調整 */
.feedback_btn_group button {
  color: #b0b0b0; /* 從 rgba(0, 0, 0, .3) 改為 #b0b0b0 */
}

.feedback_btn_group .reason button {
  color: #ccc; /* 從 rgba(0, 0, 0, .5) 改為 #ccc */
}

/* 警示訊息顏色調整 */
.alert_inMsg {
  color: #D9D9D9;
}

/* 系統訊息樣式變更 */
.disconnected .message {
  background: #e8e7ec; /* 從 rgba(255, 255, 255, .08) 改為 #e8e7ec */
}

/* Action Menu 調整 */
.Action_menu .BotMsg::before {
  display: none;
}

.BotMsg:has(.quick_btn_group) {
  max-width: 300px;
  padding: 0;
  box-shadow: rgba(0, 0, 0, .1) 0 4px 8px;
}

/* Modal 樣式調整 */
.feedbackModal .modal_text,
.confirmModal .modal_text,
.waitingConfirmModal .modal_text,
.ExternalLinkWarningConfirmModal .modal_text {
  background-color: #aaa;
  color: #333;
}

.feedbackModal .modal_text .modal-title,
.confirmModal .modal_text .modal-title,
.waitingConfirmModal .modal_text .modal-title,
.ExternalLinkWarningConfirmModal .modal_text .modal-title {
  background: #000;
}

.feedbackModal .modal_text .modal-title::before,
.confirmModal .modal_text .modal-title::before,
.waitingConfirmModal .modal_text .modal-title::before,
.ExternalLinkWarningConfirmModal .modal_text .modal-title::before {
  background-color: initial;
}

.confirmModal .select-box p,
.feedbackModal .select-box p,
.waitingConfirmModal .select-box p,
.ExternalLinkWarningConfirmModal .select-box p {
  color: #111; /* 從 #FFF 改為 #111 */
  text-shadow: none; /* 移除文字陰影 */
}

.confirmModal .select-box .confirm-btn button,
.waitingConfirmModal .select-box .confirm-btn button,
.ExternalLinkWarningConfirmModal .select-box .confirm-btn button,
.ExternalLinkWarningConfirmModal .select-box .confirm-btn a {
  background-color: #e8e7ec; /* 從 rgba(255, 255, 255, .5) 改為 #e8e7ec */
}