/* AI 客服（HOU-1733）：右下角入口按鈕＋右側面板，面板打開時把 #content 往左推 */
:root {
  --ai_cs_panel_width: 30rem; /* 原本 26rem，一行字太短，Janet 2026-11-12 加寬 */
}

.ai_cs_entry {
  position: fixed;
  right: var(--space_4);
  bottom: var(--space_4);
  z-index: 1030;
}

.ai_cs_panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--ai_cs_panel_width);
  height: 100vh;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--rentpackage_border_gray);
}

/* 面板打開時，頁面往左推，不蓋住頁面 */
body.ai_cs_open #content {
  right: var(--ai_cs_panel_width);
  width: calc(100% - 170px - var(--ai_cs_panel_width));
}
body.ai_cs_open #content.small_content {
  width: calc(100% - 70px - var(--ai_cs_panel_width));
}
body.ai_cs_open .ai_cs_entry {
  display: none;
}

.ai_cs_header {
  background: var(--rentpackage_bright_green);
  color: #fff;
  padding: var(--space_3) var(--space_4);
}

/* Pach 頭像（圓頭機器人＋客服耳麥，images/pach_avatar.svg）：標題列 */
.ai_cs_avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #fff;
}
/* Pach 每則訊息左邊也放頭像，一看就分得出是 Pach 說的；使用者的訊息不放 */
.ai_cs_msg.ai {
  position: relative;
  padding-inline-start: calc(2rem + var(--space_2));
}
.ai_cs_msg.ai::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  background: url("../images/pach_avatar.svg") center / contain no-repeat;
}

.ai_cs_close {
  cursor: pointer;
}

.ai_cs_notice {
  padding: var(--space_2) var(--space_4);
  border-bottom: 1px solid var(--rentpackage_border_gray);
}

.ai_cs_body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space_4);
}

.ai_cs_msg {
  margin-bottom: var(--space_4);
}

/* 字放大一級：對話內容、輸入框 16px，標題下方說明 14px（手機版主題檔會自動各加 2） */
.ai_cs_body,
#ai_cs_input {
  font-size: var(--font_size_lg);
}
.ai_cs_notice .text-info,
.ai_cs_body .text-muted {
  font-size: var(--font_size_md) !important;
}

.ai_cs_bubble {
  display: inline-block;
  max-width: 85%;
  padding: var(--space_2) var(--space_3);
  border-radius: var(--space_2);
  text-align: start;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai_cs_msg.user {
  text-align: end;
}

.ai_cs_msg.user .ai_cs_bubble {
  border: 1px solid var(--rentpackage_blue);
  background: #fff;
}

.ai_cs_msg.ai .ai_cs_bubble {
  background: #f8f8f8;
  /* Pach 左邊已有頭像，泡泡寬到右邊底，一行放得下比較多字；使用者的訊息維持 85% */
  max-width: 100%;
}

/* AI 建立物件（HOU-3221）：預覽卡片佔滿對話寬度，不用泡泡的 85% */
.ai_cs_preview {
  background: #fff;
  border: 1px solid var(--rentpackage_border_gray);
  border-radius: var(--space_2);
  padding: var(--space_3);
  margin-top: var(--space_2);
}
.ai_cs_preview .table {
  font-size: var(--font_size_md);
  margin-bottom: 0;
}
.ai_cs_preview .table td,
.ai_cs_preview .table th {
  padding: var(--space_1) var(--space_2);
}
.ai_cs_preview .text-muted {
  white-space: pre-line;
}

/* 選項（radio）：整行文字都可以點，手機比較好按；圓圈與文字的垂直置中由主題檔處理，不另外加 padding */
.ai_cs_quick_replies .custom-control-label {
  cursor: pointer;
}
/* 已經選過：選項留著當紀錄（選的圓圈有點），不能再改 */
.ai_cs_quick_replies_done {
  pointer-events: none;
}

.ai_cs_footer {
  border-top: 1px solid var(--rentpackage_border_gray);
  padding: var(--space_2) var(--space_4) var(--space_3);
}

/* 手機版：面板佔滿整個螢幕，不推頁面 */
@media only screen and (max-width: 768px) {
  .ai_cs_panel {
    width: 100%;
    height: 100svh;
    border-left: 0;
  }
  body.ai_cs_open #content,
  body.ai_cs_open #content.small_content {
    right: 0;
    width: 100%;
  }
}