/*
 * Wanyu AI 客服對話框
 * 只用 3 種顏色（深綠、文字灰黑、淡綠）＋白色；字級只有兩種：
 *   標題 1.5rem 粗體（同網站 H2），其餘全部沿用主題內文字級。
 */
.wchat {
  --wchat-accent: #2f5d3a;   /* 深綠：按鈕、使用者氣泡 */
  --wchat-soft:   #eef4ec;   /* 淡綠：AI 氣泡、頭像底色 */
  --wchat-text:   #222;      /* 文字 */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99990;
  color: var(--wchat-text);
  font-family: inherit;
  line-height: 1.5;
}
.wchat *, .wchat *::before, .wchat *::after { box-sizing: border-box; font-family: inherit; }
.wchat button, .wchat input {
  -webkit-appearance: none; appearance: none; box-shadow: none; text-shadow: none;
  text-transform: none; letter-spacing: normal; font-weight: 400; margin: 0; min-height: 0;
}

/* 頁面底部留白，避免細條蓋住內容 */
body.wchat-on { padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }

/* ---- 收起的細條（約 44px）---- */
.wchat-barwrap {
  display: flex;
  align-items: center;
  height: calc(44px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-top: 1px solid var(--wchat-accent);
}
.wchat .wchat-bar {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  color: var(--wchat-text);
  font-size: inherit;
  text-align: left;
  cursor: pointer;
}
.wchat-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wchat-avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--wchat-soft);
  object-fit: cover;
}
.wchat .wchat-x {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--wchat-text);
  font-size: inherit;
  line-height: 1;
  cursor: pointer;
}
.wchat-x::before { content: "\00D7"; font-size: 1.5em; }

/* ---- 展開的面板（從底部升起，上方仍看得到原頁面）---- */
.wchat-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-width: 760px;
  height: min(72vh, 560px);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--wchat-accent);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .15);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform .25s ease, visibility 0s .25s;
}
.wchat.is-open .wchat-panel { transform: translateY(0); visibility: visible; transition: transform .25s ease; }
.wchat.is-open .wchat-barwrap { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .wchat-panel, .wchat.is-open .wchat-panel { transition: none; } }

.wchat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 8px 12px;
  border-bottom: 1px solid var(--wchat-soft);
}
.wchat-titlebox { flex: 1; min-width: 0; }
.wchat-aname { opacity: .75; }
.wchat-title { flex: 1; margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--wchat-text); }

.wchat-log {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}
.wchat-row { display: flex; align-items: flex-start; gap: 8px; align-self: flex-start; max-width: 94%; }
.wchat-row .wchat-avatar { width: 32px; height: 32px; }
.wchat-row .wchat-msg { max-width: none; min-width: 0; }
.wchat-head .wchat-avatar { width: 36px; height: 36px; }
.wchat-msg { max-width: 88%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; }
.wchat-msg.ai   { align-self: flex-start; background: var(--wchat-soft); }
.wchat-msg.user { align-self: flex-end; background: var(--wchat-accent); color: #fff; }
.wchat-msg a { color: var(--wchat-accent); font-weight: 700; text-decoration: underline; }
.wchat-msg .wchat-disclaimer { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(47, 93, 58, .25); opacity: .8; }

.wchat-form { display: flex; gap: 8px; padding: 8px 12px 4px; }
.wchat .wchat-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #bbb;
  border-radius: 8px;
  font-size: 16px; /* iOS 防止自動放大 */
  color: var(--wchat-text);
  background: #fff;
}
.wchat .wchat-input:focus { outline: 2px solid var(--wchat-accent); outline-offset: 0; }
.wchat .wchat-send {
  font-weight: 700;
  flex: none;
  padding: 0 16px;
  background: var(--wchat-accent);
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-size: inherit;
  cursor: pointer;
}
.wchat .wchat-send:disabled { opacity: .5; cursor: default; }
.wchat-note { padding: 0 12px calc(8px + env(safe-area-inset-bottom, 0px)); opacity: .75; font-size: .75rem; }
.wchat-ts { padding: 0 12px; }
.wchat-ts:empty { display: none; }

.wchat-hidden { display: none !important; }