/* ============================================================
   半勺生活 · AI 客服挂件（自包含配色，浅色/深色主题都能用）
   依赖：assets/js/ai-chat.js
   ============================================================ */
.bsa-launcher {
  position: fixed;
  right: 22px;
  bottom: 28px;
  z-index: 96;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px 0 15px;
  height: 52px;
  border: 1px solid rgba(0, 229, 255, .38);
  border-radius: 26px;
  background: linear-gradient(135deg, #0C1520 0%, #101C2A 100%);
  color: #E8EDF5;
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 0 0 0 rgba(0, 229, 255, .5);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.bsa-launcher:hover { transform: translateY(-2px); border-color: rgba(0, 229, 255, .7); }
.bsa-launcher .bsa-pulse {
  position: relative;
  width: 9px; height: 9px; flex-shrink: 0;
  border-radius: 50%;
  background: #00E5FF;
  box-shadow: 0 0 10px rgba(0, 229, 255, .9);
}
.bsa-launcher .bsa-pulse::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 229, 255, .65);
  animation: bsa-ring 1.9s ease-out infinite;
}
@keyframes bsa-ring {
  0%   { transform: scale(.7); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}
.bsa-launcher .bsa-lbl { white-space: nowrap; }
.bsa-launcher .bsa-ico { width: 0; overflow: hidden; opacity: 0; }

/* ---------- 面板 ---------- */
.bsa-panel {
  position: fixed;
  right: 22px;
  bottom: 28px;
  z-index: 97;
  width: 372px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 56px);
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(0, 229, 255, .22);
  border-radius: 18px;
  background: #0A0E17;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .62), 0 0 44px rgba(0, 229, 255, .10);
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  color: #E8EDF5;
  transform: translateY(14px) scale(.98);
  opacity: 0;
  transition: transform .24s cubic-bezier(.2, .9, .3, 1), opacity .24s ease;
}
.bsa-panel.open { display: flex; }
.bsa-panel.shown { transform: none; opacity: 1; }

.bsa-head {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(120deg, #101A27 0%, #0C121C 100%);
  flex-shrink: 0;
}
.bsa-avatar {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #00E5FF 0%, #0090B8 100%);
  color: #04121A;
  font-weight: 800; font-size: 13px;
  letter-spacing: -.3px;
  box-shadow: 0 0 16px rgba(0, 229, 255, .35);
}
.bsa-head-txt { flex: 1; min-width: 0; }
.bsa-head-txt b { display: block; font-size: 15px; font-weight: 650; letter-spacing: .2px; }
.bsa-head-txt span {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: #7E8B9E; margin-top: 1px;
}
.bsa-head-txt span i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #23D18B; box-shadow: 0 0 7px #23D18B;
  display: inline-block;
}
.bsa-close {
  width: 30px; height: 30px; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 9px;
  background: transparent; color: #8A97A9;
  font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: .18s;
}
.bsa-close:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }

.bsa-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 16px 15px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
  -webkit-overflow-scrolling: touch;
}
.bsa-body::-webkit-scrollbar { width: 5px; }
.bsa-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; }

.bsa-msg { display: flex; margin-bottom: 13px; animation: bsa-in .26s ease both; }
@keyframes bsa-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bsa-msg.me { justify-content: flex-end; }
.bsa-bubble {
  max-width: 83%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14.2px;
  line-height: 1.72;
  white-space: pre-wrap;
  word-break: break-word;
}
.bsa-msg.ai .bsa-bubble {
  background: #131C29;
  border: 1px solid rgba(255, 255, 255, .07);
  border-top-left-radius: 5px;
  color: #DCE4F0;
}
.bsa-msg.me .bsa-bubble {
  background: linear-gradient(135deg, #EB5D01 0%, #FF7A2E 100%);
  color: #fff;
  border-top-right-radius: 5px;
}
.bsa-bubble b { color: #00E5FF; font-weight: 650; }
.bsa-msg.me .bsa-bubble b { color: #fff; }
.bsa-bubble a { color: #00E5FF; text-decoration: underline; text-underline-offset: 2px; }
.bsa-msg.me .bsa-bubble a { color: #fff; }

.bsa-typing { display: flex; gap: 4px; padding: 13px; }
.bsa-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4A5A6E;
  animation: bsa-dot 1.2s infinite;
}
.bsa-typing i:nth-child(2) { animation-delay: .18s; }
.bsa-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes bsa-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.bsa-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 0 6px; }
.bsa-chip {
  padding: 7px 12px;
  border: 1px solid rgba(0, 229, 255, .26);
  border-radius: 15px;
  background: rgba(0, 229, 255, .06);
  color: #9FDCE8;
  font-size: 12.6px;
  cursor: pointer;
  transition: .18s;
}
.bsa-chip:hover { background: rgba(0, 229, 255, .16); color: #fff; }

/* 留电话卡片 */
.bsa-lead {
  margin: 8px 0 12px;
  padding: 13px;
  border: 1px dashed rgba(0, 229, 255, .34);
  border-radius: 13px;
  background: rgba(0, 229, 255, .05);
}
.bsa-lead p { font-size: 13px; color: #A9B6C8; margin-bottom: 9px; line-height: 1.6; }
.bsa-lead-row { display: flex; gap: 7px; }
.bsa-lead input {
  flex: 1; min-width: 0;
  height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: #0D1521;
  color: #E8EDF5;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.bsa-lead input:focus { border-color: rgba(0, 229, 255, .55); }
.bsa-lead button {
  height: 38px; padding: 0 14px; flex-shrink: 0;
  border: none; border-radius: 10px;
  background: linear-gradient(135deg, #00E5FF 0%, #00A6C4 100%);
  color: #04121A; font-size: 13.5px; font-weight: 650;
  cursor: pointer; font-family: inherit;
}
.bsa-lead .bsa-lead-ok { font-size: 13px; color: #23D18B; }

/* ---------- 输入区 ---------- */
.bsa-foot {
  flex-shrink: 0;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 11px 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: #0C121C;
}
.bsa-foot textarea {
  flex: 1; min-width: 0;
  max-height: 92px; min-height: 40px; height: 40px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: #131C29;
  color: #E8EDF5;
  font-size: 14px; line-height: 1.5;
  font-family: inherit;
  resize: none; outline: none;
  overflow-y: auto;
}
.bsa-foot textarea:focus { border-color: rgba(0, 229, 255, .5); }
.bsa-foot textarea::placeholder { color: #5F6C7E; }
.bsa-send {
  width: 40px; height: 40px; flex-shrink: 0;
  border: none; border-radius: 12px;
  background: linear-gradient(135deg, #EB5D01 0%, #FF7A2E 100%);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: .18s;
}
.bsa-send:disabled { opacity: .45; cursor: default; }
.bsa-tip {
  padding: 0 14px 9px;
  font-size: 11px; color: #5A6678; text-align: center;
  background: #0C121C; flex-shrink: 0;
}

@media (max-width: 900px) {
  .bsa-launcher { bottom: 92px; right: 14px; }
  .bsa-panel {
    right: 10px; left: 10px;
    width: auto; max-width: none;
    bottom: 10px; top: 74px;
    height: auto; max-height: none;
    border-radius: 16px;
  }
  .bsa-launcher { padding: 0 15px 0 13px; height: 48px; font-size: 13.5px; }
}