/* ============================================================
   QA 客服彈窗 — site-v4（V1 系：純黑 × 酸性萊姆 × 細線）
   API 版：接後端 /api/session + /api/chat
   ============================================================ */
/* 統整為 44px icon 圓（與右下 ↑ 同尺寸），文字改由 aria-label/title 提供 */
.qa-fab{
  position:fixed; right:28px; bottom:28px; z-index:900;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0;
  background:rgba(5,5,5,.85); color:var(--acid);
  border:1px solid var(--acid); border-radius:50%;
  cursor:pointer; font-size:16px;
  backdrop-filter:blur(8px);
  box-shadow:0 8px 32px rgba(198,242,20,.16);
  transition:background .3s, color .3s, box-shadow .3s;
}
.qa-fab:hover{ background:var(--acid); color:var(--bg); box-shadow:0 0 44px rgba(198,242,20,.5) }
.qa-fab i{ font-style:normal }
.qa-fab span{ display:none }

.qa-overlay{ position:fixed; inset:0; z-index:2000; display:flex; align-items:flex-end; justify-content:flex-end }
.qa-overlay[hidden]{ display:none }
.qa-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5) }

.qa-panel{
  position:relative; width:min(420px, calc(100vw - 32px)); height:min(600px, calc(100svh - 48px));
  margin:0 28px 24px 0; display:flex; flex-direction:column;
  background:#0a0a0a; border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(0,0,0,.7), 0 0 70px rgba(198,242,20,.06);
}
.qa-head{
  display:flex; align-items:center; gap:10px; padding:17px 22px;
  border-bottom:1px solid var(--line); flex-shrink:0;
}
.qa-head-star{ color:var(--acid); font-size:15px }
.qa-head-title{ color:var(--white); font-family:var(--font-zh); font-weight:400; font-size:16px; letter-spacing:.1em }
.qa-close{
  margin-left:auto; background:none; border:0; color:var(--gray);
  font-size:22px; padding:2px 8px; cursor:pointer; transition:color .3s;
}
.qa-close:hover{ color:var(--acid) }

.qa-msgs{ flex:1; overflow-y:auto; padding:22px; display:flex; flex-direction:column; gap:14px }
.qa-msgs::-webkit-scrollbar{ width:6px }
.qa-msgs::-webkit-scrollbar-thumb{ background:rgba(244,244,242,.18); border-radius:3px }
.qa-msg{
  max-width:86%; padding:13px 17px;
  font-family:var(--font-zh); font-weight:400; font-size:15px; line-height:1.8;
  white-space:pre-wrap; word-break:break-word;
}
.qa-msg-bot{
  align-self:flex-start;
  background:var(--bg-elevated); border:1px solid var(--line); color:var(--white);
}
.qa-msg-user{
  align-self:flex-end;
  background:var(--acid); color:var(--bg); font-weight:500;
  box-shadow:0 6px 24px rgba(198,242,20,.2);
}
.qa-msg-thinking{ color:var(--gray) }
.qa-msg-thinking i{ display:inline-block; font-style:normal; animation:qaBlink 1.2s infinite }
.qa-msg-thinking i:nth-child(2){ animation-delay:.2s }
.qa-msg-thinking i:nth-child(3){ animation-delay:.4s }
.qa-caret{ display:inline-block; width:8px; color:var(--acid); animation:qaBlink .8s infinite }
@keyframes qaBlink{ 0%,100%{ opacity:.2 } 50%{ opacity:1 } }

.qa-chips{ display:none; flex-wrap:wrap; gap:8px; padding:0 22px 12px; flex-shrink:0 } /* 延伸問題 chips 先隱藏，開啟改回 display:flex */
.qa-chip{
  background:none; border:1px solid var(--line); color:var(--gray);
  border-radius:999px; padding:8px 15px; cursor:pointer;
  font-family:var(--font-zh); font-size:13px; transition:color .3s, border-color .3s;
}
.qa-chip:hover{ color:var(--acid); border-color:var(--acid) }

.qa-form{
  display:flex; gap:10px; padding:14px 22px 20px;
  border-top:1px solid var(--line); flex-shrink:0;
}
.qa-input{
  flex:1; min-width:0; background:var(--bg-elevated); border:1px solid var(--line);
  color:var(--white); font-family:var(--font-zh); font-size:15px; padding:12px 15px;
}
.qa-input::placeholder{ color:rgba(198,198,204,.5) }
.qa-input:focus{ outline:none; border-color:var(--acid) }
.qa-send{
  background:var(--acid); color:var(--bg); border:0;
  font-family:var(--font-zh); font-weight:500; font-size:14px; letter-spacing:.12em;
  padding:0 22px; cursor:pointer; transition:transform .3s, box-shadow .3s;
}
.qa-send:hover{ transform:translateY(-2px); box-shadow:0 0 30px rgba(198,242,20,.4) }
.qa-send:disabled{ opacity:.35; cursor:default; transform:none; box-shadow:none }

@media (max-width: 768px){
  .qa-fab{ right:16px; bottom:16px; padding:12px 18px }
  .qa-overlay{ justify-content:center }
  .qa-panel{ width:100vw; height:min(80svh, 640px); margin:0; border-left:0; border-right:0; border-bottom:0 }
}