/* AI 技術問答浮動視窗 — 配色沿用客戶提供的橘色示意稿 */
:root{
  --ai-orange:#F26522;
  --ai-orange-dark:#D8551A;
  --ai-line:#E5E5E5;
  --ai-ink:#1A1A1A;
}

.ai-widget{font-family:inherit}

/* 啟動鈕：刻意放在 tawk.to 氣泡上方，兩個客服入口不重疊 */
.ai-launcher{
  position:fixed;right:22px;bottom:96px;z-index:300;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:6px 14px 6px 6px;border:0;border-radius:999px;cursor:pointer;
  background:#fff;box-shadow:0 6px 22px rgba(0,0,0,.18);
  transition:transform .2s ease,box-shadow .2s ease;
}
.ai-launcher img{width:44px;height:44px;border-radius:50%;display:block}
.ai-launcher__label{font-size:13px;font-weight:700;color:var(--ai-ink);letter-spacing:.02em;white-space:nowrap}
.ai-launcher:hover,.ai-launcher:focus-visible{transform:translateY(-2px);box-shadow:0 10px 28px rgba(242,101,34,.32)}
.ai-launcher[aria-expanded="true"]{opacity:0;pointer-events:none}

/* Cookie 同意條顯示時整體抬高，避免被壓住 */
body:has(#cookie-banner.is-visible) .ai-launcher{bottom:200px}
body:has(#cookie-banner.is-visible) .ai-panel{bottom:200px}

.ai-panel{
  position:fixed;right:22px;bottom:96px;z-index:301;
  width:min(370px,calc(100vw - 32px));height:min(540px,calc(100vh - 140px));
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.24);
}
.ai-panel[hidden]{display:none}

.ai-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:14px 16px;background:var(--ai-orange);color:#fff;
}
.ai-head__title{font-size:15px;font-weight:700}
.ai-close{
  background:transparent;border:0;color:#fff;font-size:22px;line-height:1;
  cursor:pointer;padding:0 2px;border-radius:4px;
}
.ai-close:hover,.ai-close:focus-visible{opacity:.8}

.ai-log{
  flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  background:#fff;
}
.ai-msg{
  max-width:86%;padding:10px 13px;border-radius:10px;font-size:14px;line-height:1.65;
  white-space:pre-wrap;word-break:break-word;
}
.ai-msg--bot{align-self:flex-start;background:#F1F1F1;color:var(--ai-ink)}
.ai-msg--user{align-self:flex-end;background:var(--ai-orange);color:#fff}
.ai-msg--error{align-self:center;background:#FDECEA;color:#B3261E;font-size:13px;text-align:center}

/* 等待指示：上游首字約需 9 秒，沒有這個會像當掉 */
.ai-typing{align-self:flex-start;display:flex;gap:5px;padding:12px 14px;background:#F1F1F1;border-radius:10px}
.ai-typing span{
  width:7px;height:7px;border-radius:50%;background:#B0B0B0;
  animation:ai-blink 1.3s infinite ease-in-out both;
}
.ai-typing span:nth-child(2){animation-delay:.16s}
.ai-typing span:nth-child(3){animation-delay:.32s}
@keyframes ai-blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.ai-form{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--ai-line);background:#fff}
.ai-text{
  flex:1;min-width:0;padding:10px 12px;font-size:14px;font-family:inherit;
  border:1px solid #D8D8D8;border-radius:8px;outline:none;color:var(--ai-ink);
}
.ai-text:focus{border-color:var(--ai-orange);box-shadow:0 0 0 3px rgba(242,101,34,.15)}
.ai-send{
  padding:10px 18px;border:0;border-radius:8px;cursor:pointer;
  background:var(--ai-orange);color:#fff;font-size:14px;font-weight:700;font-family:inherit;
}
.ai-send:hover:not(:disabled),.ai-send:focus-visible{background:var(--ai-orange-dark)}
.ai-send:disabled{opacity:.5;cursor:not-allowed}

.ai-note{
  margin:0;padding:8px 14px 12px;font-size:11.5px;line-height:1.5;
  color:#8A8A8A;background:#fff;text-align:center;
}

@media (max-width:520px){
  .ai-launcher{right:14px;bottom:84px}
  .ai-launcher__label{display:none}
  .ai-launcher{padding:6px}
  .ai-panel{right:12px;left:12px;width:auto;bottom:84px;height:min(70vh,520px)}
  body:has(#cookie-banner.is-visible) .ai-launcher,
  body:has(#cookie-banner.is-visible) .ai-panel{bottom:210px}
}

@media (prefers-reduced-motion:reduce){
  .ai-launcher{transition:none}
  .ai-launcher:hover,.ai-launcher:focus-visible{transform:none}
  .ai-typing span{animation:none;opacity:.5}
}