/* 舊的客服浮動按鈕（由 GTM-PXNDTH7 外部腳本注入，原始碼裡找不到，只能用 CSS 強制隱藏）*/
#qa-fab { display: none !important; }

/* 數字人 AI 語音客服 - 浮動小工具樣式 */
#vcs-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  font-family: "Microsoft JhengHei", "PingFang TC", Arial, sans-serif;
}

#vcs-launcher {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f0ad4e, #ec971f);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 20px 12px 14px;
  box-shadow: 0 6px 18px rgba(236, 151, 31, 0.45);
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  animation: vcs-bounce-in 0.5s ease;
}
#vcs-launcher:hover { filter: brightness(1.05); }
#vcs-launcher .vcs-launcher-icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: #ec971f;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

#vcs-panel {
  display: none;
  flex-direction: column;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 100px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
#vcs-panel.vcs-open { display: flex; }

#vcs-header {
  background: linear-gradient(135deg, #2b3e50, #1a2733);
  color: #fff;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#vcs-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: #f0ad4e;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  position: relative;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
#vcs-avatar::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(240, 173, 78, 0.6);
  opacity: 0;
}
#vcs-avatar.vcs-act-listening::after { opacity: 1; animation: vcs-pulse 1.2s infinite; }
#vcs-avatar.vcs-act-thinking { animation: vcs-tilt 1s infinite; }
#vcs-avatar.vcs-act-nod { animation: vcs-nod 0.5s ease; }
#vcs-avatar.vcs-act-shake_head { animation: vcs-shake 0.5s ease; }
#vcs-avatar.vcs-act-smile,
#vcs-avatar.vcs-act-wave { animation: vcs-bounce 0.4s ease; }
#vcs-avatar.vcs-act-celebrate { animation: vcs-bounce 0.6s ease 2; }

#vcs-header-text { flex: 1; min-width: 0; }
#vcs-header-title { font-weight: bold; font-size: 14px; }
#vcs-header-sub { font-size: 12px; opacity: 0.75; }
#vcs-close {
  background: transparent; border: none; color: #fff;
  font-size: 20px; cursor: pointer; opacity: 0.8; line-height: 1;
}
#vcs-close:hover { opacity: 1; }

#vcs-voice-toggle {
  background: transparent; border: none; color: #fff;
  font-size: 17px; cursor: pointer; opacity: 0.85; line-height: 1; flex-shrink: 0;
}
#vcs-voice-toggle:hover { opacity: 1; }

#vcs-voice-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #eef1f4; border-bottom: 1px solid #e4e7eb;
}
#vcs-voice-select {
  flex: 1; min-width: 0; font-size: 12.5px; padding: 5px 6px;
  border: 1px solid #ddd; border-radius: 6px; background: #fff;
}
#vcs-voice-test {
  border: 1px solid #f0ad4e; color: #ec971f; background: #fff;
  border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; flex-shrink: 0;
}
#vcs-voice-test:hover { background: #fff6ea; }

#vcs-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  background: #f6f7f9;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vcs-bubble { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.vcs-bubble-bot { align-self: flex-start; background: #fff; color: #2b3e50; border: 1px solid #e4e7eb; border-bottom-left-radius: 4px; }
.vcs-bubble-user { align-self: flex-end; background: #f0ad4e; color: #fff; border-bottom-right-radius: 4px; }
.vcs-bubble-error { border-color: #e07a7a; }

#vcs-quick-replies { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; }
.vcs-chip {
  border: 1px solid #f0ad4e; color: #ec971f; background: #fff;
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer;
}
.vcs-chip:hover { background: #fff6ea; }

#vcs-input-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px; border-top: 1px solid #eee; background: #fff;
}
#vcs-text-input {
  flex: 1; border: 1px solid #ddd; border-radius: 999px;
  padding: 9px 14px; font-size: 13.5px; outline: none;
}
#vcs-text-input:focus { border-color: #f0ad4e; }
#vcs-mic-btn, #vcs-send-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: #2b3e50; color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#vcs-mic-btn.vcs-mic-active { background: #d9534f; animation: vcs-pulse-bg 1s infinite; }
#vcs-mic-btn:disabled { opacity: 0.35; cursor: not-allowed; }
#vcs-send-btn { background: #f0ad4e; }

#vcs-asr-hint { font-size: 11.5px; color: #999; text-align: center; padding: 0 10px 6px; }

@keyframes vcs-bounce-in { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes vcs-pulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes vcs-pulse-bg { 0%, 100% { box-shadow: 0 0 0 0 rgba(217,83,79,0.5); } 50% { box-shadow: 0 0 0 8px rgba(217,83,79,0); } }
@keyframes vcs-tilt { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } }
@keyframes vcs-nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes vcs-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes vcs-bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

@media (max-width: 420px) {
  #vcs-widget { right: 10px; bottom: 10px; }
  #vcs-panel { width: calc(100vw - 20px); height: 347px; max-height: calc(100vh - 100px); }
}