/* ============================================================
   AI 對話視窗 — 行動階段底列第三張卡 / 反思模式右欄
   原始尺寸,小字最低 13px
   ============================================================ */

.hd-chat {
  display: flex;
  flex-direction: column;
  background: var(--hd-card);
  border: 1px solid var(--hd-line-soft);
  border-radius: var(--hd-radius-lg);
  box-shadow: var(--hd-shadow-sm);
  overflow: hidden;
  min-height: 0;
}

.hd-chat__head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #eef4ec 0%, transparent 100%);
  border-bottom: 1px solid var(--hd-line-soft);
  flex-shrink: 0;
}
/* 2026-06-05:反思夥伴頭像(神木爺爺) */
.hd-chat__head-ava {
  width: 42px; height: 42px;
  border-radius: 11px;
  object-fit: contain;
  flex-shrink: 0;
  background: #f3f7f1;
  border: 1px solid var(--hd-line-soft);
  padding: 2px;
}

/* 2026-06-01:置中標題(取代 AI/隊伍 分頁)
   2026-06-05:改成「頭像 + 動物夥伴」靠左,底色淺橘漸層 */
.hd-chat__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--hd-font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--hd-ink);
  padding: 8px 12px;
  border-bottom: 1px solid var(--hd-line-soft);
  background: linear-gradient(180deg, #fbe2c4 0%, #fdeeda 100%);
  flex-shrink: 0;
}
.hd-chat__title-ava {
  width: 42px; height: 42px;
  border-radius: 11px;
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--hd-line-soft);
  padding: 2px;
}

/* ── 聊天分頁(AI / 隊伍;2026-05-22)──────────────────── */
.hd-chat__tabs {
  display: flex;
  gap: 4px;
  padding: 8px 8px 0;
  background: var(--hd-card-soft);
  border-bottom: 1px solid var(--hd-line-soft);
}
.hd-chat__tab {
  flex: 1 1 0;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hd-ink-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.hd-chat__tab:hover:not(:disabled) { color: var(--hd-ink); }
.hd-chat__tab--active {
  color: var(--hd-ink);
  border-bottom-color: var(--hd-accent);
}
.hd-chat__tab:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.hd-chat__empty {
  padding: 20px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--hd-ink-muted);
  line-height: 1.6;
}
.hd-chat__head-icon {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--hd-mist);
  color: #E8E0CC;
  display: grid; place-items: center;
}
.hd-chat__head-title {
  font-family: var(--hd-font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--hd-ink);
}
.hd-chat__head-sub {
  font-size: 13px;
  color: var(--hd-ink-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-left: auto;
}

.hd-chat__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 13px;
  display: flex; flex-direction: column; gap: 11px;
  background: var(--hd-paper);
}

.hd-chat__msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
}
.hd-chat__msg--ai   { align-self: flex-start; align-items: flex-start; }
.hd-chat__msg--user { align-self: flex-end;   align-items: flex-end; }

/* 2026-06-05:AI 訊息改「頭像在左、泡泡在右」橫向排列(行動=動物夥伴 / 反思=神木爺爺)。
   含頭像的 AI 列改 row;__col 收容名稱(上)+ 泡泡(下),不佔額外垂直版面 */
.hd-chat__msg--ai:has(.hd-chat__avatar) {
  flex-direction: row;
  align-items: flex-end;
  gap: 7px;
  max-width: 92%;
}
.hd-chat__avatar {
  width: 38px; height: 38px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--hd-card-soft);
  border: 1px solid var(--hd-line-soft);
  padding: 1px;
}
.hd-chat__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* 反思(神木爺爺):頭像放大、上方對齊,名稱 19px,泡泡撐滿欄寬 */
.hd-chat--reflectionbot .hd-chat__msg--ai:has(.hd-chat__avatar) {
  align-items: flex-start;
  gap: 8px;
  max-width: 94%;
}
.hd-chat--reflectionbot .hd-chat__avatar {
  width: 60px; height: 60px;
  border-radius: 14px;
  margin-top: 2px;
  background: #f3f7f1;
}
.hd-chat--reflectionbot .hd-chat__col { flex: 1; }
.hd-chat--reflectionbot .hd-chat__label {
  font-size: 19px;
  color: var(--hd-ink-soft);
  font-weight: 600;
}
.hd-chat--reflectionbot .hd-chat__msg--ai .hd-chat__bubble { max-width: 100%; }

/* Stage 8:initiator 標籤 — 「夥伴主動」「自動發送」 */
.hd-chat__label {
  font-size: 16px;
  color: var(--hd-ink-muted);
  letter-spacing: .04em;
  margin: 0 4px 3px;
}

/* system_trigger 訊息:加柔和金色左邊條,跟一般對話區分 */
.hd-chat__msg--ai[data-initiator="system_trigger"] .hd-chat__bubble {
  border-left: 3px solid #c9a55b;
  background: #fbf6ec;
}

/* auto_send 訊息:虛線邊框,表示「不是你親手打的字」 */
.hd-chat__msg--user[data-initiator="auto_send"] .hd-chat__bubble {
  background: #d8d4cc;
  color: var(--hd-ink);
  border: 1px dashed var(--hd-ink-soft);
}

/* 2026-06-01:對齊 mockup 泡泡尺寸(22px / line-height 1.15 / padding 6px 13px) */
.hd-chat__bubble {
  padding: 6px 13px;
  border-radius: 15px;
  font-size: 22px;
  line-height: 1.15;
  white-space: pre-wrap;
  word-break: break-word;
}
.hd-chat__msg--ai .hd-chat__bubble {
  background: var(--hd-card-soft);
  color: var(--hd-ink-soft);
  border: 1px solid var(--hd-line-soft);
  border-top-left-radius: 5px;
}
.hd-chat__msg--user .hd-chat__bubble {
  background: var(--hd-ink);
  color: var(--hd-paper);
  border-top-right-radius: 5px;
}
/* 2026-05-24 第7點:反思全答完的完成提示泡泡 */
.hd-chat__bubble--done {
  background: rgba(125, 200, 130, .14) !important;
  border: 1px solid rgba(125, 200, 130, .4) !important;
  color: var(--hd-ink) !important;
  font-weight: 600;
}

.hd-chat__form {
  display: flex; gap: 9px;
  padding: 12px;
  border-top: 1px solid var(--hd-line-soft);
  background: var(--hd-card);
}
.hd-chat__input {
  flex: 1;
  padding: 10px 18px;
  border: 1px solid var(--hd-line);
  border-radius: 999px;
  background: var(--hd-card-soft);
  color: var(--hd-ink);
  font-family: inherit;
  font-size: 20px;
  outline: none;
  resize: none;
}
.hd-chat__input:focus {
  border-color: var(--hd-ink-soft);
  background: var(--hd-card);
}
.hd-chat__send {
  background: var(--hd-ink);
  color: var(--hd-paper);
  border: 0;
  border-radius: 999px;
  padding: 10px 26px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--hd-font-display);
  font-weight: 700;
  font-size: 21px;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.hd-chat__send:hover { background: #16120c; transform: translateY(-1px); }
.hd-chat__send:disabled { opacity: .35; cursor: not-allowed; transform: none; }

/* ── typing 指示器(AI 思考中) ── */
.hd-chat__typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 14px !important;
}
.hd-chat__typing-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--hd-ink-soft);
  display: inline-block;
  animation: hd-typing-bounce 1.2s ease-in-out infinite;
}
.hd-chat__typing-dot:nth-child(2) { animation-delay: .15s; }
.hd-chat__typing-dot:nth-child(3) { animation-delay: .30s; }
@keyframes hd-typing-bounce {
  0%, 80%, 100% { transform: scale(.7); opacity: .45; }
  40%           { transform: scale(1.1); opacity: 1; }
}

/* 2026-05-23 BUG1:等 AI 期間的「活著」狀態(灰色,文字由 JS 輪播) */
.hd-chat__status {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px !important;
  color: var(--hd-ink-muted);
  font-style: italic;
}
.hd-chat__status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hd-ink-soft);
  flex: 0 0 auto;
  animation: hd-status-pulse 1.5s ease-in-out infinite;
}
.hd-chat__status-text {
  font-size: 13px;
  letter-spacing: .03em;
  animation: hd-status-fade 1.5s ease-in-out infinite;
}
@keyframes hd-status-pulse {
  0%, 100% { transform: scale(.8); opacity: .4; }
  50%      { transform: scale(1.15); opacity: 1; }
}
@keyframes hd-status-fade {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.hd-chat__input:disabled {
  opacity: .55;
  cursor: not-allowed;
}