/* ══════════════════════════════════════════════════════════════
   集梦影视 · 在线客服面板
   ══════════════════════════════════════════════════════════════ */

/* 遮罩 */
.jm-cs-mask {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.jm-cs-mask.on { opacity: 1; pointer-events: auto; }

/* 主面板 */
.jm-cs {
  position: fixed; z-index: 9999;
  right: 24px; bottom: 96px;
  width: 380px; max-height: 620px;
  display: flex; flex-direction: column;
  background: #0d1626;
  border: 1px solid #24314f;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65);
  overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.97);
  pointer-events: none;
  transition: opacity .22s, transform .22s cubic-bezier(.4, 0, .2, 1);
  font-size: 13px;
}
.jm-cs.on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* ── 头部 ── */
.jm-cs-hd {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 17px;
  background: linear-gradient(135deg, #1a3a6b, #0f2347);
  border-bottom: 1px solid rgba(52, 224, 255, .22);
  flex-shrink: 0;
}
.jm-cs-hd .av {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #3f8cff, #34e0ff);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; flex-shrink: 0;
}
.jm-cs-hd .tx { flex: 1; min-width: 0; }
.jm-cs-hd .tx b {
  display: block; color: #edf3ff; font-size: 14px;
  font-weight: 900; margin-bottom: 2px;
}
.jm-cs-hd .tx i {
  display: flex; align-items: center; gap: 5px;
  color: #7fd4e8; font-size: 10.5px; font-style: normal;
}
.jm-cs-hd .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, .8);
}
.jm-cs-hd .dot.off { background: #6b7899; box-shadow: none; }
.jm-cs-hd .x {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  display: flex; align-items: center; justify-content: center;
  color: #c9d6f0 !important; font-size: 15px; cursor: pointer;
  border: 0; flex-shrink: 0; text-decoration: none !important;
}
.jm-cs-hd .x:hover { background: rgba(255, 255, 255, .2); }

/* ── 主体 ── */
.jm-cs-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 15px;
  min-height: 0;
}
.jm-cs-body::-webkit-scrollbar { width: 5px; }
.jm-cs-body::-webkit-scrollbar-thumb { background: #24314f; border-radius: 3px; }

/* ── 欢迎语 ── */
.jm-cs-hello {
  padding: 13px 15px; margin-bottom: 15px;
  background: linear-gradient(135deg, rgba(52, 224, 255, .1), rgba(63, 140, 255, .04));
  border: 1px solid rgba(52, 224, 255, .24);
  border-radius: 12px;
}
.jm-cs-hello b {
  display: block; color: #34e0ff; font-size: 13px;
  font-weight: 900; margin-bottom: 5px;
}
.jm-cs-hello p {
  margin: 0; color: #8fa4c8; font-size: 11.5px; line-height: 1.75;
}

/* ── FAQ ── */
.jm-cs-sec-t {
  display: flex; align-items: center; gap: 6px;
  color: #6b7899; font-size: 10.5px; font-weight: 800;
  margin: 16px 0 9px; letter-spacing: .3px;
}
.jm-cs-sec-t::after {
  content: ""; flex: 1; height: 1px;
  background: rgba(36, 49, 79, .8);
}
.jm-cs-faq { display: flex; flex-direction: column; gap: 7px; }
.jm-cs-faq-item {
  border: 1px solid #24314f; border-radius: 10px;
  background: #0b1222; overflow: hidden;
}
.jm-cs-faq-q {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; cursor: pointer;
  color: #c9d6f0 !important; font-size: 12px; font-weight: 700;
  text-decoration: none !important;
  transition: .15s;
}
.jm-cs-faq-q:hover { background: rgba(52, 224, 255, .05); color: #34e0ff !important; }
.jm-cs-faq-q .ar {
  margin-left: auto; color: #3d4a68; font-size: 11px;
  transition: transform .2s;
}
.jm-cs-faq-item.on .jm-cs-faq-q .ar { transform: rotate(90deg); }
.jm-cs-faq-a {
  display: none; padding: 0 13px 12px;
  color: #8fa4c8; font-size: 11.5px; line-height: 1.85;
}
.jm-cs-faq-item.on .jm-cs-faq-a { display: block; }

/* ── 消息气泡 ── */
.jm-cs-msgs {
  display: flex; flex-direction: column; gap: 11px;
  margin-bottom: 12px;
}
.jm-cs-msg { display: flex; gap: 8px; max-width: 86%; }
.jm-cs-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.jm-cs-msg .b {
  padding: 10px 13px; border-radius: 12px;
  font-size: 12.5px; line-height: 1.65;
  word-break: break-word; white-space: pre-wrap;
}
.jm-cs-msg.user .b {
  background: #16233d; color: #dbe6f5;
  border: 1px solid #24314f;
  border-bottom-left-radius: 4px;
}
.jm-cs-msg.me .b {
  background: linear-gradient(135deg, #3f8cff, #34e0ff);
  color: #06121f; font-weight: 600;
  border-bottom-right-radius: 4px;
}
.jm-cs-msg .tm {
  align-self: flex-end; font-size: 9.5px; color: #4a5878;
  padding-bottom: 2px; white-space: nowrap;
}

/* ── 输入区 ── */
.jm-cs-ft {
  flex-shrink: 0;
  border-top: 1px solid #24314f;
  background: #0a1020;
  padding: 11px 13px;
}
.jm-cs-inrow {
  display: flex; align-items: flex-end; gap: 8px;
}
.jm-cs-in {
  flex: 1; min-width: 0;
  padding: 10px 13px;
  background: #0b1222; border: 1.5px solid #24314f;
  border-radius: 11px;
  color: #edf3ff; font-size: 12.5px; font-family: inherit;
  resize: none; max-height: 88px; min-height: 40px;
  line-height: 1.55; transition: .15s;
}
.jm-cs-in:focus { outline: none; border-color: #34e0ff; }
.jm-cs-in::placeholder { color: #4a5878; }
.jm-cs-send {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 11px; border: 0;
  background: linear-gradient(135deg, #3f8cff, #34e0ff);
  color: #06121f; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: .15s;
}
.jm-cs-send:hover { transform: scale(1.05); }
.jm-cs-send:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.jm-cs-tip {
  margin-top: 7px; font-size: 10.5px; color: #4a5878;
  display: flex; align-items: center; gap: 5px;
}
.jm-cs-tip.warn { color: #ffc857; }

/* ── 离线留言表单 ── */
.jm-cs-leave { display: none; }
.jm-cs-leave.on { display: block; }
.jm-cs-leave .fd { margin-bottom: 10px; }
.jm-cs-leave .fd label {
  display: block; color: #8fa4c8; font-size: 11px;
  font-weight: 700; margin-bottom: 6px;
}
.jm-cs-leave .fd input,
.jm-cs-leave .fd textarea {
  width: 100%; padding: 10px 12px;
  background: #0b1222; border: 1.5px solid #24314f;
  border-radius: 9px; color: #edf3ff; font-size: 12px;
  font-family: inherit; box-sizing: border-box;
  transition: .15s;
}
.jm-cs-leave .fd input:focus,
.jm-cs-leave .fd textarea:focus { outline: none; border-color: #34e0ff; }
.jm-cs-leave .fd textarea { resize: vertical; min-height: 76px; line-height: 1.6; }
.jm-cs-leave .btn {
  width: 100%; padding: 11px; border: 0; border-radius: 10px;
  background: linear-gradient(135deg, #3f8cff, #34e0ff);
  color: #06121f; font-size: 12.5px; font-weight: 900;
  cursor: pointer; font-family: inherit;
}
.jm-cs-leave .btn:hover { transform: translateY(-1px); }
.jm-cs-leave .btn:disabled { opacity: .5; transform: none; cursor: not-allowed; }

/* ── 状态提示 ── */
.jm-cs-state {
  padding: 9px 12px; border-radius: 9px;
  font-size: 11.5px; font-weight: 700;
  margin-bottom: 11px; display: none;
}
.jm-cs-state.on { display: block; }
.jm-cs-state.ok {
  background: rgba(74, 222, 128, .12);
  border: 1px solid rgba(74, 222, 128, .35);
  color: #4ade80;
}
.jm-cs-state.err {
  background: rgba(255, 90, 90, .1);
  border: 1px solid rgba(255, 90, 90, .35);
  color: #ff7b7b;
}

/* ── 移动端：底部抽屉 ── */
@media (max-width: 900px) {
  .jm-cs {
    right: 0; left: 0; bottom: 0;
    width: 100%; max-height: 88vh;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    transform: translateY(100%);
  }
  .jm-cs.on { transform: translateY(0); }
  .jm-cs-hd { border-radius: 20px 20px 0 0; padding: 13px 15px; }
  .jm-cs-body { padding: 13px; }
  .jm-cs-msg { max-width: 90%; }
  .jm-cs-in { font-size: 16px; }  /* 防止 iOS 缩放 */
  .jm-cs-leave .fd input,
  .jm-cs-leave .fd textarea { font-size: 16px; }
}