/*==========================================================
  ui-chat — Conversation Chatbox
==========================================================*/

/*-------------------------
  ui-chat（根容器：對話串 + 回覆區）
--------------------------*/
.ui-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--bg-surface);
  border-radius: var(--radius-component);
  box-sizing: border-box;
}

/* 情境覆寫：卡進手風琴時，卡片外觀交給 ui-accordion__item，ui-chat 本身去殼 */
.ui-accordion__content .ui-chat {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/*-------------------------
  ui-chat__thread（訊息串）
--------------------------*/
.ui-chat__thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* 超過高度時內部捲動（單獨版預設 380px） */
.ui-chat__thread--scroll {
  max-height: 380px;
  overflow-y: auto;
  padding-right: var(--space-xxs);
}

/* 手風琴情境：對話串略縮，避免展開後面板過長（可依需求調整） */
.ui-accordion__content .ui-chat__thread--scroll {
  max-height: 300px;
}

/*-------------------------
  ui-chat__message（單則訊息）
--------------------------*/
.ui-chat__message {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

/* sent：使用者本人，靠右 */
.ui-chat__message--sent {
  align-items: flex-end;
}

/* received：支援方 / AI，靠左 */
.ui-chat__message--received {
  align-items: flex-start;
  gap: 0;	
}

/*-------------------------
  ui-chat__meta（作者 + 時間）
--------------------------*/
.ui-chat__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xxs);
  font-size: calc(var(--font-size-base) - 2px);
  line-height: var(--line-height-base);
  color: var(--color-text-muted);   /* 整條 meta 預設 muted，日期裸 span 直接繼承 */
}

/* 作者：粗體、預設文字色（覆寫 meta 的 muted） */
.ui-chat__author {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-default);
}

/*-------------------------
  ui-chat__bubble（訊息內容）
--------------------------*/
.ui-chat__bubble {
  max-width: 72%;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-default);
  word-break: break-word;
}

/* sent：灰底泡泡 */
.ui-chat__message--sent .ui-chat__bubble {
  padding: var(--space-xxs) var(--space-xs);
  background: var(--color-white);
  border-radius:var(--radius-component) var(--radius-component) 0 var(--radius-component);
}
.bg-surface-soft .ui-chat__message--sent .ui-chat__bubble {
  background: var(--bg-surface-soft);
}


/* received：無底純文字，左緣貼齊 */
.ui-chat__message--received .ui-chat__bubble {
  padding: var(--space-xxs) 0;
}

/*-------------------------
  ui-chat__attachments（附件卡片群）
--------------------------*/
.ui-chat__attachments {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
  max-width: 72%;
}

.ui-chat__message--sent .ui-chat__attachments {
  justify-content: flex-end;
}

/*-------------------------
  ui-chat__file（單張附件 / 下載卡）
--------------------------*/
.ui-chat__file {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* 左：icon+body 群組；右：開新視窗 icon */
  gap: var(--space-xs);             /* 與右側 icon 的間距，大於群組內 icon↔body 的間距 */
  min-width: 210px;
  padding: var(--space-xxs);
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-component);
  text-decoration: none;
  color: var(--color-text-default);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
  	
}

.ui-chat__file:hover,
.ui-chat__file:focus-visible {
  border-color: var(--color-brand-blue-600);
  text-decoration: none;   /* 覆寫全站 a:hover 的底線 */
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box, var(--color-brand-gradient) border-box;
    border-color: transparent;	
}

/* 檔案 icon：沿用共用 item__icon 容器，這裡只補 chat 專屬外觀 */
.ui-chat__file .item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-element);
  color: var(--color-brand-blue-600);
}

/* icon + body 群組：靠左並排，群組內間距較小 */
.ui-chat__file-main {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.ui-chat__file-main .item__icon {
  font-size: 24px;
}

.ui-chat__file-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 220px;   /* 長檔名以 ellipsis 截斷，不折行 */
  line-height: 1.35;
}

.ui-chat__file-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-default);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-chat__file-size {
  font-size: calc(var(--font-size-base) - 2px);
  color: var(--color-text-muted);
}

/* 開新視窗 icon */
.ui-chat__file > i {
  flex-shrink: 0;
  font-size: calc(var(--font-size-base) - 3px);
  color: var(--color-brand-blue-900);
}

/*-------------------------
  ui-chat__reply（回覆區：標題 + 沿用的 chat bar）
--------------------------*/
.ui-chat__reply {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.ui-chat__reply-title {
  margin: 0;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand-blue-900);
}

/*-------------------------
  ui-chat__trigger（手風琴加料版標題列）
  基底沿用 .ui-accordion__trigger（含 ::after 箭頭與旋轉）
--------------------------*/
.ui-chat__trigger {
  gap: var(--space-xxs);
}

/* 頭像：漸層圓底（item__icon 容器 + chat 專屬外觀） */
.ui-chat__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-brand-gradient);
  color: var(--color-text-inverse);
}

/* 標題列：h3 內含頭像 icon + 文字，並把 label + 箭頭推到最右 */
.ui-chat__trigger-title {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  margin: 0;
  margin-right: auto;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-blue-900);
  line-height: 1.3;
}

/* Show / Hide 文字：純 CSS 靠 aria-expanded 切換 */
.ui-chat__toggle-label {
  color: var(--color-brand-blue-600);
  font-weight: var(--font-weight-medium);
}

.ui-chat__toggle-label--hide {
  display: none;
}

.ui-chat__trigger[aria-expanded="true"] .ui-chat__toggle-label--show {
  display: none;
}

.ui-chat__trigger[aria-expanded="true"] .ui-chat__toggle-label--hide {
  display: inline;
}

/* 箭頭改成品牌藍，並與 label 之間留小間距（覆寫預設 margin-left:auto） */
.ui-chat__trigger::after {
  margin-left: var(--space-xxs);
  color: var(--color-brand-blue-600);
}

/*==========================================================
  RWD（desktop-first）
==========================================================*/
@media (max-width: 1024px) {
  .ui-chat {
    padding: var(--space-xs);
  }
  .ui-chat__bubble,
  .ui-chat__attachments {
    max-width: 85%;
  }
}

@media (max-width: 768px) {
  .ui-chat__thread {
    gap: var(--space-xs);
  }
  .ui-chat__bubble,
  .ui-chat__attachments {
    max-width: 100%;
  }
  /* 附件卡改滿版堆疊 */
  .ui-chat__attachments {
    width: 100%;
  }
  .ui-chat__file {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 580px) {
  .ui-chat {
    padding: var(--space-xxs);
  }
  .ui-chat__avatar {
    width: 34px;
    height: 34px;
  }
  .ui-chat__trigger-title {
    font-size: var(--font-size-base);
  }
  /* 小螢幕標題列只留箭頭，隱藏 Show/Hide 文字 */
  .ui-chat__toggle-label {
    display: none;
  }
}

/*==========================================================
  ui-chat 於 ui-split 版面：對話卡與側欄卡等高（內容驅動）
  僅作用於 ui-split 內的 chat，不影響單獨使用 chat 的頁面
==========================================================*/

/* 對話卡撐滿欄高（欄高由 .ui-split 的 align-items:stretch 決定） */
.ui-split__primary > .ui-chat {
  flex: 1;
  min-height: 0;
}

/* 對話串改為填滿卡片剩餘高度、超出才捲動（覆寫預設 max-height:380px） */
.ui-split__primary > .ui-chat .ui-chat__thread--scroll {
  flex: 1;
  min-height: 0;
  max-height: none;
}

/* 側欄卡片（Ticket details）同步撐滿欄高，與對話卡等高 */
.ui-split__secondary > .ui-list__group {
  flex: 1;
}