/* mca/cs.css — 고객 응대 위젯. 창구 두 개(상담 / 전담 호스트).
   색은 테넌트 테마값(--mca-acc)을 따라간다. 브랜드 색을 여기에 박지 않는다. */
#mcsWrap {
  --mcs-bg: #14161a;
  --mcs-line: #2a2d33;
  --mcs-ink: #e9ecef;
  --mcs-muted: #9aa0aa;
  --mcs-acc: var(--mca-acc, #e6b64c);
  position: fixed; right: 18px; bottom: 18px; z-index: 9000;
  font-family: inherit;
}
.mcs-fab {
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; border: none;
  background: var(--mcs-acc); color: #14161a;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.mcs-fab svg { width: 24px; height: 24px; }

.mcs-panel {
  position: absolute; right: 0; bottom: 64px; width: 340px; max-width: calc(100vw - 32px);
  height: 460px; max-height: calc(100vh - 140px);
  display: none; flex-direction: column; overflow: hidden;
  background: var(--mcs-bg); color: var(--mcs-ink);
  border: 1px solid var(--mcs-line); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.mcs-panel.show { display: flex; }

.mcs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px; border-bottom: 1px solid var(--mcs-line);
}
.mcs-title { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.mcs-dot { width: 7px; height: 7px; border-radius: 50%; background: #2fbf71; }
.mcs-x { background: none; border: none; color: var(--mcs-muted); cursor: pointer; font-size: 15px; line-height: 1; }

.mcs-tabs { display: flex; gap: 6px; padding: 8px 10px 0; }
.mcs-tabs[hidden] { display: none; }
.mcs-tab {
  flex: 1; padding: 7px 0; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--mcs-muted); background: transparent; cursor: pointer;
  border: 1px solid var(--mcs-line); border-radius: 8px;
}
.mcs-tab.on { color: var(--mcs-acc); border-color: var(--mcs-acc); }

.mcs-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.mcs-msg {
  max-width: 84%; padding: 9px 11px; border-radius: 12px;
  font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.mcs-msg.bot { align-self: flex-start; background: #1d2026; border: 1px solid var(--mcs-line); }
.mcs-msg.me { align-self: flex-end; background: var(--mcs-acc); color: #14161a; }

.mcs-typing { display: flex; gap: 4px; align-items: center; }
.mcs-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mcs-muted);
  animation: mcs-blink 1.2s infinite;
}
.mcs-typing span:nth-child(2) { animation-delay: .2s; }
.mcs-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes mcs-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.mcs-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--mcs-line); }
.mcs-input input {
  flex: 1; padding: 9px 11px; font: inherit; font-size: 13px;
  color: var(--mcs-ink); background: #1d2026;
  border: 1px solid var(--mcs-line); border-radius: 9px; outline: none;
}
.mcs-input input:focus { border-color: var(--mcs-acc); }
.mcs-send {
  width: 38px; border: none; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center; background: var(--mcs-acc); color: #14161a;
}
.mcs-send svg { width: 17px; height: 17px; }

@media (max-width: 520px) {
  /* 하단 고정바를 가리지 않는다 */
  #mcsWrap { right: 12px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .mcs-panel { height: 420px; }
}