/* AI 產品小客服 —— 清爽大字體可愛版（水滴吉祥物「小凱」💧）
   設計語彙參考 aiHelper 的小盾風格，配色換成凱昱藍。 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

.kf-assistant {
  --kf-primary:   #1565c0;
  --kf-primary-d: #0d47a1;
  --kf-primary-l: #e3f2fd;
  --kf-accent:    #29b6f6;
  --kf-ink:       #16334d;
  --kf-ink-soft:  #5b7387;
  --kf-line:      #e2e8f0;
  --kf-font:      18px;

  max-width: 880px;
  margin: 0 auto;
  padding: 28px 16px 64px;
  font-family: 'Noto Sans TC', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--kf-ink);
}

/* ============ 頂部品牌列 ============ */
.kf-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px;
}
.kf-bar-brand { display: flex; align-items: center; gap: 12px; }
.kf-bar-avatar { width: 46px; height: 54px; flex: 0 0 auto; }
.kf-bar-name { font-size: 20px; font-weight: 900; line-height: 1.2; }
.kf-bar-sub  { font-size: 14px; color: var(--kf-ink-soft); }
.kf-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 700;
  background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9;
}
.kf-dot { width: 9px; height: 9px; border-radius: 50%; background: #43a047; box-shadow: 0 0 0 4px rgba(67,160,71,.18); }

/* ============ 對話視窗外框 ============ */
.kf-window {
  background: #fff;
  border: 1px solid var(--kf-line);
  border-radius: 24px;
  box-shadow: 0 16px 50px rgba(21,101,192,.10);
  overflow: hidden;
}

/* ============ 訊息區 ============ */
.kf-messages {
  min-height: 46vh; max-height: 62vh; overflow-y: auto;
  padding: 26px 22px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    radial-gradient(900px 380px at 85% -20%, #eaf4ff 0%, rgba(234,244,255,0) 60%),
    #f7fafd;
}

/* 開場 Hero（首次進入） */
.kf-hero { text-align: center; padding: 18px 8px 8px; }
.kf-hero-mascot { width: 150px; height: 175px; margin: 0 auto 6px; }
.kf-hero-title { font-size: 34px; font-weight: 900; margin: 6px 0 0; letter-spacing: -.01em; }
.kf-hero-sub   { font-size: var(--kf-font); line-height: 1.75; color: var(--kf-ink-soft); margin: 12px auto 0; max-width: 560px; }

/* 對話列 */
.kf-row { display: flex; gap: 12px; align-items: flex-end; }
.kf-row-user { justify-content: flex-end; }
.kf-row-bot  { justify-content: flex-start; }
.kf-avatar { width: 50px; height: 58px; flex: 0 0 auto; align-self: flex-end; }

/* 對話泡泡 */
.kf-bubble {
  font-size: var(--kf-font); line-height: 1.8; border-radius: 22px;
  padding: 15px 20px; max-width: 80%; word-break: break-word;
}
.kf-bubble-user {
  background: var(--kf-primary); color: #fff; font-weight: 500;
  border-bottom-right-radius: 7px;
  box-shadow: 0 6px 16px rgba(21,101,192,.26);
}
.kf-bubble-bot {
  background: #fff; color: var(--kf-ink);
  border: 1px solid var(--kf-line); border-bottom-left-radius: 7px;
  box-shadow: 0 4px 14px rgba(21,101,192,.07);
}
.kf-bubble-bot a { color: var(--kf-primary); font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; }
.kf-bubble-bot a:hover { background: var(--kf-primary-l); border-radius: 4px; }

/* 回覆內的段落與清單：留白舒服、層次清楚 */
.kf-bubble .kf-p { margin: 0 0 .55em; }
.kf-bubble .kf-p:last-child { margin-bottom: 0; }
.kf-bubble .kf-list { margin: .3em 0 .55em; padding-left: 1.35em; display: flex; flex-direction: column; gap: .5em; }
.kf-bubble .kf-list:last-child { margin-bottom: 0; }
.kf-bubble .kf-list li { padding-left: .15em; }
.kf-bubble .kf-list li::marker { color: var(--kf-primary); font-weight: 800; }
/* 產品連結：做成藍底膠囊，名稱大而好點，絕不顯示亂碼 slug */
.kf-bubble-bot a.kf-prod {
  display: inline; font-weight: 800; color: var(--kf-primary-d);
  border-bottom: 2px solid var(--kf-accent); padding: 0 1px;
}
.kf-bubble-bot a.kf-prod:hover { background: var(--kf-primary-l); border-radius: 6px; }

/* 打字中三點 */
.kf-typing { display: inline-flex; gap: 7px; align-items: center; }
.kf-typing span { width: 10px; height: 10px; border-radius: 50%; background: #b9c8d6; animation: kf-typing 1.2s infinite ease-in-out; }
.kf-typing span:nth-child(2) { animation-delay: .18s; }
.kf-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes kf-typing { 0%,80%,100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-7px); opacity: 1; } }
/* 等待較久時的安心提示（冷啟動可能要十幾秒） */
.kf-wait { margin-top: 10px; font-size: 14.5px; color: var(--kf-ink-soft); animation: kf-wait-in .3s ease; }
@keyframes kf-wait-in { from { opacity: 0; } to { opacity: 1; } }

/* ============ 常見需求大卡片 ============ */
.kf-suggest {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  padding: 18px 22px; background: #fff; border-top: 1px solid var(--kf-line);
}
/* 對話開始後收起建議卡片：HTML hidden 屬性會被上面的 display:grid 蓋過，這裡補強。 */
.kf-suggest[hidden] { display: none !important; }
.kf-card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px 18px; border-radius: 18px; cursor: pointer; font-family: inherit;
  background: #fff; border: 1.5px solid var(--kf-line);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.kf-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(21,101,192,.16); border-color: var(--kf-accent); }
.kf-card-emoji {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: var(--kf-primary-l);
}
.kf-card-q { font-size: 16px; font-weight: 700; line-height: 1.5; }

/* ============ 輸入列 ============ */
.kf-form { display: flex; gap: 14px; align-items: stretch; padding: 18px 22px 22px; border-top: 1px solid var(--kf-line); background: #fff; }
.kf-input {
  flex: 1 1 auto; width: 100%; font-family: inherit; font-size: 20px;
  padding: 0 22px; height: 68px; min-height: 68px; box-sizing: border-box;
  border: 2px solid #cdd9e5; border-radius: 20px; background: #fff; color: var(--kf-ink);
  transition: border-color .15s, box-shadow .15s;
}
.kf-input::placeholder { color: #9fb1c1; }
.kf-input:focus { outline: none; border-color: var(--kf-primary); box-shadow: 0 0 0 4px rgba(21,101,192,.14); }
.kf-input:disabled { background: #f1f5f9; }
.kf-send {
  flex: 0 0 auto; width: 68px; height: 68px; border-radius: 20px; border: none; cursor: pointer;
  background: var(--kf-primary); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(21,101,192,.30); transition: transform .12s, filter .15s;
}
.kf-send:hover:not(:disabled) { filter: brightness(1.05); }
.kf-send:active:not(:disabled) { transform: scale(.93); }
.kf-send:disabled { background: #b9c8d6; cursor: not-allowed; box-shadow: none; }
.kf-send svg { width: 26px; height: 26px; }

.kf-foot { max-width: 720px; margin: 16px auto 0; text-align: center; font-size: 13.5px; line-height: 1.7; color: var(--kf-ink-soft); }

/* ============ 水滴吉祥物動畫 ============ */
.kf-mascot { display: block; }
.kf-mascot .kf-body  { transform-box: view-box; transform-origin: 60px 72px; animation: kf-float 4s ease-in-out infinite; }
.kf-mascot .kf-shadow{ transform-box: view-box; transform-origin: 60px 134px; animation: kf-shadow 4s ease-in-out infinite; }
.kf-mascot .kf-eyes  { transform-box: view-box; transform-origin: 60px 90px; animation: kf-blink 4.6s infinite; }
@keyframes kf-float  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes kf-shadow { 0%,100% { transform: scaleX(1); opacity: .12; } 50% { transform: scaleX(.84); opacity: .07; } }
@keyframes kf-blink  { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* 思考泡泡（is-thinking 時顯示） */
.kf-mascot .kf-think { opacity: 0; transition: opacity .2s; }
.kf-mascot.is-thinking .kf-think { opacity: 1; }
.kf-mascot.is-thinking .kf-body { animation: kf-float 4s ease-in-out infinite, kf-tilt 4.5s ease-in-out infinite; }
@keyframes kf-tilt { 0%,100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.kf-think .kf-tdot { animation: kf-tdot 1.1s ease-in-out infinite; }
.kf-think .kf-tdot:nth-of-type(2) { animation-delay: .2s; }
.kf-think .kf-tdot:nth-of-type(3) { animation-delay: .4s; }
@keyframes kf-tdot { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }

/* 講話（is-talking 時換成嘟嘴 O 型） */
.kf-mascot .kf-mouth-talk { display: none; transform-box: view-box; transform-origin: 60px 107px; }
.kf-mascot.is-talking .kf-mouth-talk  { display: block; animation: kf-talk .32s ease-in-out infinite alternate; }
.kf-mascot.is-talking .kf-mouth-smile { display: none; }
@keyframes kf-talk { from { transform: scaleY(.5); } to { transform: scaleY(1.05); } }

@media (prefers-reduced-motion: reduce) {
  .kf-mascot .kf-body, .kf-mascot .kf-shadow, .kf-mascot .kf-eyes,
  .kf-think .kf-tdot, .kf-mascot.is-talking .kf-mouth-talk { animation: none !important; }
}

/* ============ 響應式 ============ */
@media (max-width: 620px) {
  .kf-assistant { --kf-font: 17px; padding: 18px 12px 48px; }
  .kf-hero-title { font-size: 28px; }
  .kf-suggest { grid-template-columns: 1fr; }
  .kf-bubble { max-width: 90%; }
  .kf-bar-sub { display: none; }
}

/* ── 「詢問：<產品名>」入口（F-5／AC-6：帶 SourceProductId 跳 /contact） ── */
.kf-inquire-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--kf-line); }
.kf-inquire {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--kf-primary); color: #fff !important; text-decoration: none !important;
  font-size: 15px; font-weight: 700; line-height: 1.2; border: none !important;
  box-shadow: 0 4px 12px rgba(21,101,192,.22); transition: transform .12s, background .15s, box-shadow .15s;
}
.kf-inquire:hover { background: var(--kf-primary-d); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(21,101,192,.30); }
.kf-inquire:focus-visible { outline: 3px solid var(--kf-accent); outline-offset: 2px; }
.kf-inquire-ic { font-size: 14px; line-height: 1; }