/* 首頁 v3 預覽用：線上客服＋LINE 浮動按鈕的樣式。
   規則原樣取自 assets/css/main.css；預覽頁自己的 --line/--bg 等變數名稱相同但值不同，
   所以把 main.css 的色票鎖在這兩個元件上，外觀跟現行首頁一致。 */
.chat-root, .line-fab {
  --bg: #FFFFFF; --bg-2: #F4F6F9;
  --fg: #0B1220; --fg-1: #1E2A3D; --fg-2: #4A5568; --fg-3: #67748A;
  --line: #E2E7EE; --line-2: #C9D2DE;
  --accent: #FC9000; --accent-text: #C2410C; --accent-ink: #1A0A00;
  --t-label: 14px; --w-title: 600; --r-sm: 6px;
  --ease: cubic-bezier(.16, .84, .44, 1);
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace;
}
/* ==========================================================================
   即時客服（浮動按鈕 + 對話面板）
   ---------------------------------------------------------------------------
   固定在右下角。導覽列是 z-index 90，這裡用 120 疊上去。
   面板刻意不是 modal：使用者要能一邊看內容一邊打字，所以不鎖背景捲動，
   只用 Esc 或點外面關閉。
   ========================================================================== */
/* 容器本身不吃點擊：它是個定位錨點，只有按鈕與面板要收事件。
   少了這行，底下的連結與按鈕會被這塊透明區域整片蓋住。 */
.chat-root {
  position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px);
  z-index: 120;
  display: flex; flex-direction: column; align-items: flex-end;
  pointer-events: none;
}
.chat-fab, .chat-panel, .chat-modal { pointer-events: auto; }
/* ---- 觸發鈕 ---- */
.chat-fab {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 17px;
  border: 0; border-radius: 999px;
  background: var(--accent); color: #FFFFFF;
  font-family: inherit; font-size: 15.5px; font-weight: var(--w-title);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(232, 115, 10, .34), 0 2px 6px rgba(11, 18, 32, .18);
  transition: transform .35s var(--ease), background-color .35s var(--ease);
}
.chat-fab:hover { background: #E8730A; transform: translateY(-2px); }
.chat-fab:active { transform: none; }
.chat-fab svg { flex: none; }
.chat-root.is-open .chat-fab-label { display: none; }
.chat-root.is-open .chat-fab { padding: 15px; }
/* 未讀數：面板收著時才會出現 */
.chat-unread {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: #0B1220; color: #FFFFFF;
  font-family: var(--mono); font-size: 12px; line-height: 20px; text-align: center;
}
.chat-fab.is-hinted { animation: chat-hint 2.4s var(--ease) 1.2s 2; }
/* ---- 面板 ---- */
.chat-panel {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(370px, calc(100vw - 32px));
  height: min(540px, calc(100vh - 150px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px;
  background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(11, 18, 32, .22);
  /* 用 visibility 而不是 display，才有淡入淡出可言 */
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98);
  transform-origin: 100% 100%;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.chat-root.is-open .chat-panel { opacity: 1; visibility: visible; transform: none; }
.chat-head { flex: none; padding: 16px 20px; background: var(--accent); color: var(--accent-ink); }
.chat-title { font-size: 17px; font-weight: var(--w-title); line-height: 1.3; }
.chat-sub {
  display: flex; align-items: center; gap: 7px; margin-top: 4px;
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: .04em;
  color: rgba(26, 10, 0, .8);
}
/* 在線狀態小圓點：離線是空心灰，在線才亮綠並呼吸 */
.chat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(26, 10, 0, .3);
}
.chat-dot.is-on { background: #0B7A3B; animation: chat-pulse 2.4s ease-in-out infinite; }
/* ---- 訊息區 ---- */
.chat-log {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-2);
}
.chat-msg {
  max-width: 84%; padding: 10px 13px;
  font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
}
.chat-msg--agent, .chat-msg--sys {
  align-self: flex-start; background: var(--bg); color: var(--fg-1);
  border: 1px solid var(--line); border-radius: 4px 14px 14px 14px;
}
.chat-msg--me {
  align-self: flex-end; background: #E8730A; color: #FFFFFF;
  border-radius: 14px 4px 14px 14px;
}
.chat-msg--sys { align-self: center; max-width: 100%; background: transparent; border: 0; color: var(--fg-3); font-size: 13.5px; }
.chat-msg--sys a { color: var(--accent-text); text-decoration: underline; }
.chat-msg time { display: block; margin-top: 4px; font-size: 11px; opacity: .6; }
/* 對方輸入中：三顆點 */
.chat-typing { display: flex; gap: 4px; padding: 13px; }
.chat-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fg-3);
  animation: chat-bounce 1.2s infinite;
}
.chat-typing i:nth-child(2) { animation-delay: .15s }
.chat-typing i:nth-child(3) { animation-delay: .3s }
/* ---- 對話前的必填表單：獨立 dialog ----
   不塞在面板裡：面板只有 540px 高，表單一長就得在小框內上下捲，
   填到一半看不到送出鈕。獨立一層之後可以給足夠的寬度與留白。 */
.chat-modal {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(11, 18, 32, .55);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.chat-modal[hidden] { display: none; }
/* dialog 開著時鎖背景捲動，手機上尤其明顯 */
.chat-lock, .chat-lock body { overflow: hidden; }
.chat-modal-box {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: clamp(24px, 3vw, 34px);
  background: var(--bg);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(11, 18, 32, .35);
}
.chat-modal-x {
  position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--fg-3); font-size: 24px; line-height: 1; cursor: pointer;
}
.chat-modal-x:hover { background: var(--bg-2); color: var(--fg); }
.chat-gate-h {
  font-size: 21px; font-weight: var(--w-title); color: var(--fg); line-height: 1.3;
}
.chat-gate-t { margin: 6px 0 20px; font-size: 14px; line-height: 1.65; color: var(--fg-2); }
.chat-gate label {
  display: block; margin: 0 0 6px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--fg-3);
}
.chat-gate label i { font-style: normal; color: var(--accent-text); }
.chat-gate input,
.chat-gate textarea {
  width: 100%; margin-bottom: 16px; padding: 11px 13px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-family: inherit; font-size: 15px; line-height: 1.6;
  color: var(--fg-1); background: var(--bg);
}
.chat-gate textarea { resize: vertical; min-height: 92px; }
.chat-gate input:focus,
.chat-gate textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-gate button {
  width: 100%; padding: 13px; border: 0; border-radius: var(--r-sm);
  background: #E8730A; color: #FFFFFF;
  font-family: inherit; font-size: 15.5px; font-weight: var(--w-title); cursor: pointer;
}
.chat-gate-err { margin: -8px 0 12px; font-size: 13.5px; color: #B3261E; }
/* ---- 輸入列 ---- */
/* hidden 屬性只帶來 UA 樣式的 display:none，會被下面的 display:flex 蓋掉，
   所以必須自己再寫一條——沒有這行，資料還沒填完輸入列照樣出現。 */
.chat-root [hidden] { display: none !important; }
.chat-input {
  flex: none; display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 14px; background: var(--bg); border-top: 1px solid var(--line);
}
.chat-input textarea {
  flex: 1; resize: none; height: 40px; max-height: 120px; padding: 9px 12px;
  border: 1px solid var(--line-2); border-radius: 12px;
  font-family: inherit; font-size: 14.5px; line-height: 1.5;
}
.chat-input textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-input button {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: #E8730A; color: #FFFFFF; cursor: pointer;
}
@media (max-width: 480px) {
.chat-root { right: 12px; bottom: 12px; left: 12px; }
.chat-panel { left: 0; right: 0; width: auto; height: min(70vh, calc(100vh - 120px)); }
}
@media (prefers-reduced-motion: reduce) {
.chat-fab.is-hinted { animation: none; }
.chat-dot.is-on { animation: none; }
.chat-typing i { animation: none; }
.chat-panel { transition: opacity .001ms, visibility .001ms; transform: none; }
}
/* ==========================================================================
   LINE 官方帳號浮動按鈕
   ---------------------------------------------------------------------------
   右緣垂直置中，做成貼邊的側標。z-index 115 在導覽列(90)之上、
   客服按鈕(120)之下 —— 客服面板展開時該蓋過它。
   ========================================================================== */
.line-fab {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 115;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 10px;
  background: #06C755;            /* LINE 品牌綠 */
  color: #FFFFFF;
  border-radius: 12px 0 0 12px;
  box-shadow: -2px 4px 18px rgba(11, 18, 32, .22);
  transition: padding-right .3s var(--ease), background-color .3s var(--ease);
}
.line-fab:hover { background: #05B34C; padding-right: 14px; }
.line-fab svg { width: 26px; height: 26px; flex: none; }
/* 直排文字：側標本來就窄，橫排會被壓成一字一行 */
.line-fab-t {
  writing-mode: vertical-rl;
  font-size: 13px; font-weight: var(--w-title); letter-spacing: .14em;
  line-height: 1;
}
@media (max-width: 560px) {
/* 手機螢幕窄，只留圖示；文字拿掉才不會擋住內容 */
  .line-fab { padding: 12px 9px; }
.line-fab-t { display: none; }
.line-fab svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
.line-fab { transition: none; }
}