/* ==========================================================================
   咔啦荻士 TK-101 — AI 客服聊天氣泡 / 聊天視窗
   設計語彙：明亮 · 舒服 · 現代 · 白底 + 粉色系（與主站一致）
   ========================================================================== */
/* ---------------------------------------------------------------------------
   修正：主站只在 body 設 overflow-x:hidden，html 未設，導致 documentElement
   被 .ticker-track (width:max-content) 撐寬（430px 視窗下 innerWidth 達 471px），
   使所有 position:fixed 的右下角元件（AI 客服氣泡、Line 按鈕、回頂端）右側
   被裁到畫面外。補上 html 的 overflow-x 即可一併修正。
   --------------------------------------------------------------------------- */
html { overflow-x: hidden; max-width: 100%; }

:root {
  --kchat-pink: #ff7085;
  --kchat-pink-deep: #e8384f;
  --kchat-pink-soft: #ffeef2;
  --kchat-pink-soft-2: #ffe0e8;
  --kchat-ink: #1f2733;
  --kchat-ink-2: #47546b;
  --kchat-ink-3: #7b8798;
  --kchat-line: #e8edf4;
  --kchat-shadow: 0 14px 40px rgba(232, 56, 79, .16);
  --kchat-shadow-lg: 0 24px 64px rgba(31, 39, 51, .18);
  /* 定位參數（桌機：讓出右側 side-cta 三顆按鈕的空間） */
  --kchat-right: 22px;
  --kchat-bottom: 232px;
}

/* -------------------------------------------------------------- 浮動氣泡 */
.kchat-fab {
  position: fixed;
  right: var(--kchat-right);
  bottom: var(--kchat-bottom);
  z-index: 960;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  background: linear-gradient(135deg, #ff9aa8 0%, var(--kchat-pink) 48%, var(--kchat-pink-deep) 100%);
  box-shadow: var(--kchat-shadow);
  transition: transform .26s cubic-bezier(.2, .8, .3, 1), box-shadow .26s ease, opacity .24s ease;
  -webkit-tap-highlight-color: transparent;
}
.kchat-fab:hover { transform: translateY(-4px) scale(1.08); box-shadow: 0 20px 48px rgba(232, 56, 79, .3); }
.kchat-fab:active { transform: scale(.96); }
.kchat-fab.kchat-hide { opacity: 0; pointer-events: none; transform: scale(.7); }

.kchat-fab-ico {
  width: 28px; height: 28px; display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .12));
}

/* 呼吸光環 */
.kchat-fab::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 20px;
  border: 2px solid rgba(255, 112, 133, .5);
  animation: kchat-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes kchat-pulse {
  0%   { transform: scale(1);    opacity: .75; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* 未讀紅點 */
.kchat-dot {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #fff;
  color: var(--kchat-pink-deep);
  font-size: 11px; font-weight: 900; line-height: 18px; text-align: center;
  box-shadow: 0 2px 8px rgba(31, 39, 51, .2);
}
.kchat-dot[hidden] { display: none; }

/* 桌機 hover 提示 */
.kchat-tip {
  position: absolute; right: 66px; top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--kchat-ink); color: #fff;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  padding: 7px 12px; border-radius: 9px;
  opacity: 0; pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}
.kchat-fab:hover .kchat-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* --------------------------------------------------------------- 聊天視窗 */
/* 注意：主站 style.css 對 section 設有 padding: 82px 0，必須用 padding:0 覆蓋 */
.kchat-panel {
  position: fixed;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
  align-items: stretch;
  right: var(--kchat-right);
  bottom: var(--kchat-bottom);
  z-index: 970;
  width: 374px;
  max-width: calc(100vw - 32px);
  height: 560px;
  /* 扣掉底部定位距離(232px) + 頂部導覽列與留白(88px)，確保不會超出視窗 */
  max-height: calc(100vh - var(--kchat-bottom) - 88px);
  background: #fff;
  border-radius: 22px;
  border: 1px solid var(--kchat-line);
  box-shadow: var(--kchat-shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  transform: translateY(16px) scale(.94);
  pointer-events: none;
  transition: opacity .28s cubic-bezier(.2, .8, .3, 1), transform .28s cubic-bezier(.2, .8, .3, 1);
}
.kchat-panel.kchat-open { opacity: 1; transform: none; pointer-events: auto; }

/* 標題列 */
.kchat-head {
  flex-shrink: 0;
  padding: 14px 14px 14px 16px;
  background: linear-gradient(135deg, #ff9aa8 0%, var(--kchat-pink) 52%, var(--kchat-pink-deep) 100%);
  color: #fff;
  display: flex; align-items: center; gap: 11px;
}
.kchat-avatar {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 13px;
  background: rgba(255, 255, 255, .22);
  display: grid; place-items: center; font-size: 21px;
  border: 1px solid rgba(255, 255, 255, .32);
}
.kchat-hmeta { flex: 1; min-width: 0; line-height: 1.35; }
.kchat-hmeta b { display: block; font-size: 15.5px; font-weight: 900; letter-spacing: .01em; }
.kchat-hmeta span {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .92);
}
.kchat-live {
  width: 7px; height: 7px; border-radius: 50%; background: #6ef2a8;
  box-shadow: 0 0 0 0 rgba(110, 242, 168, .8);
  animation: kchat-live 2s ease-out infinite;
}
@keyframes kchat-live {
  0%   { box-shadow: 0 0 0 0 rgba(110, 242, 168, .8); }
  70%  { box-shadow: 0 0 0 7px rgba(110, 242, 168, 0); }
  100% { box-shadow: 0 0 0 0 rgba(110, 242, 168, 0); }
}
.kchat-close {
  flex-shrink: 0; width: 34px; height: 34px; border: none; cursor: pointer;
  border-radius: 11px; background: rgba(255, 255, 255, .18); color: #fff;
  font-size: 19px; line-height: 1; display: grid; place-items: center;
  transition: background .2s ease, transform .2s ease;
}
.kchat-close:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }

/* 訊息區 */
.kchat-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain;
  /* 內容不足時靠底對齊，符合即時通訊視覺習慣，避免下方大片空白 */
  display: flex; flex-direction: column;
  padding: 16px 14px 8px;
  background: linear-gradient(180deg, #fffafb 0%, #ffffff 22%, #ffffff 100%);
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.kchat-body::-webkit-scrollbar { width: 6px; }
.kchat-body::-webkit-scrollbar-track { background: transparent; }
.kchat-body::-webkit-scrollbar-thumb { background: #f0d3da; border-radius: 3px; }
.kchat-body::-webkit-scrollbar-thumb:hover { background: #e5b9c3; }

.kchat-row { display: flex; flex-shrink: 0; margin-bottom: 12px; animation: kchat-in .34s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes kchat-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.kchat-row.me { justify-content: flex-end; }

.kchat-msg {
  max-width: 84%;
  padding: 11px 14px;
  font-size: 14.5px;
  line-height: 1.72;
  white-space: pre-wrap;
  word-break: break-word;
  letter-spacing: .01em;
}
.kchat-row.ai .kchat-msg {
  background: #fff;
  color: var(--kchat-ink);
  border: 1px solid var(--kchat-line);
  border-radius: 16px 16px 16px 5px;
  box-shadow: 0 3px 12px rgba(43, 108, 176, .06);
}
.kchat-row.me .kchat-msg {
  background: linear-gradient(135deg, #ff8496, var(--kchat-pink-deep));
  color: #fff;
  border-radius: 16px 16px 5px 16px;
  box-shadow: 0 4px 14px rgba(232, 56, 79, .22);
  font-weight: 500;
}

/* 打字中 */
.kchat-typing { display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; }
.kchat-typing i {
  width: 7px; height: 7px; border-radius: 50%; background: #f2aab7;
  animation: kchat-bounce 1.3s ease-in-out infinite;
}
.kchat-typing i:nth-child(2) { animation-delay: .18s; }
.kchat-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes kchat-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: .55; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* 快捷問題 */
.kchat-quick { display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 7px; padding: 2px 2px 12px; }
.kchat-quick button {
  border: 1px solid var(--kchat-pink-soft-2);
  background: var(--kchat-pink-soft);
  color: var(--kchat-pink-deep);
  font-size: 12.8px; font-weight: 800;
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  font-family: inherit;
}
.kchat-quick button:hover {
  background: var(--kchat-pink-soft-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(232, 56, 79, .14);
}
.kchat-quick button:active { transform: translateY(0); }

/* 底部輸入區 */
.kchat-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--kchat-line);
  background: #fff;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.kchat-inputbar {
  display: flex; align-items: flex-end; gap: 8px;
  background: #f7f9fc;
  border: 1px solid var(--kchat-line);
  border-radius: 16px;
  padding: 6px 6px 6px 13px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.kchat-inputbar:focus-within {
  background: #fff;
  border-color: #ffb7c3;
  box-shadow: 0 0 0 3px rgba(255, 112, 133, .13);
}
.kchat-input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent; resize: none;
  font-family: inherit; font-size: 15px; line-height: 1.6; color: var(--kchat-ink);
  max-height: 96px; padding: 6px 0;
}
.kchat-input::placeholder { color: var(--kchat-ink-3); }
.kchat-send {
  flex-shrink: 0; width: 38px; height: 38px; border: none; cursor: pointer;
  border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(135deg, #ff8496, var(--kchat-pink-deep));
  color: #fff; box-shadow: 0 4px 12px rgba(232, 56, 79, .26);
  transition: transform .2s ease, opacity .2s ease;
}
.kchat-send:hover:not(:disabled) { transform: scale(1.07); }
.kchat-send:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.kchat-send svg { width: 18px; height: 18px; }

.kchat-note {
  text-align: center; font-size: 11px; color: var(--kchat-ink-3);
  margin-top: 7px; letter-spacing: .01em;
}
.kchat-note a { color: var(--kchat-pink-deep); font-weight: 800; text-decoration: none; }
.kchat-note a:hover { text-decoration: underline; }

/* -------------------------------------------------------- 手機版（≤860px） */
@media (max-width: 860px) {
  :root {
    --kchat-right: 16px;
    --kchat-bottom: 88px;   /* 避開底部「立即訂購」列 */
  }
  .kchat-fab { width: 54px; height: 54px; border-radius: 17px; }
  .kchat-fab-ico { width: 26px; height: 26px; }
  .kchat-tip { display: none; }

  .kchat-panel {
    right: 10px; left: 10px;
    bottom: 82px;
    width: auto; max-width: none;
    height: auto;
    top: 66px;
    max-height: none;
    border-radius: 20px;
  }
  .kchat-msg { max-width: 88%; font-size: 15px; }
  .kchat-input { font-size: 16px; }  /* 避免 iOS 自動放大 */
}

/* 桌機視窗高度較矮時（例如筆電 768p），降低面板定位以保留足夠高度 */
@media (min-width: 861px) and (max-height: 760px) {
  .kchat-panel { bottom: 100px; height: 480px; max-height: calc(100vh - 188px); }
}

@media (max-width: 380px) {
  .kchat-panel { right: 8px; left: 8px; bottom: 78px; }
}

/* 開啟聊天視窗時，手機版隱藏氣泡避免遮擋 */
@media (max-width: 860px) {
  .kchat-fab.kchat-hide { display: none; }
}

/* 減少動態偏好 */
@media (prefers-reduced-motion: reduce) {
  .kchat-fab::after, .kchat-live, .kchat-typing i { animation: none; }
  .kchat-panel, .kchat-row { transition: none; animation: none; }
}
.kchat-body > .kchat-msg:first-child { margin-top: auto; }

/* 聊天視窗開啟時，禁止 Android 下拉重新整理 */
body.kchat-no-pull { overscroll-behavior-y: contain; }

/* AI 客服圖示用圖片 */
img.kchat-fab-ico { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }