/* bs-chat.css — asiatv.co BIBLESOFT 상담 채팅창(1030 형 49625). 모양 = 텔레그램 대화창(어두운 판).
   색 · 크기는 아래 :root 변수만 쓴다. 그리는 쪽 = bs-chat.js */
:root {
  --bsc-bg: #0E1621; --bsc-head: #17212B; --bsc-in: #182533; --bsc-out: #2B5278; --bsc-ink: #F5F5F5;
  --bsc-mut: #A4B1BF; --bsc-acc: #64B5EF; --bsc-read: #6FC3FF; --bsc-line: rgba(255, 255, 255, .08);
  --bsc-note: rgba(0, 0, 0, .38); --bsc-shadow: 0 18px 48px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);
  --bsc-r: 12px; --bsc-fs: 14px;
}
/* 상담 단추(1030 형 49935 다시 만듦): 사이트 자체 값 그대로 — 강조색 #C6FF3D(첫 화면 머리줄 단추·데모 요청과 같은 색), 글자 #06070A,
   반경 6px(사이트 단추 반경), 글꼴 Pretendard, 보이는 높이 44. 알약·광택 그라데이션·파란색 없음. 열린 창(.bsc-box)은 그대로. */
:root {
  --bsc-fab-bg: #C6FF3D; --bsc-fab-ink: #06070A; --bsc-fab-hover: #EDEFF3; --bsc-fab-ring: #EDEFF3; --bsc-fab-r: 6px; --bsc-fab-h: 44px;
  --bsc-fab-gap: 16px; --bsc-fab-shadow: 0 10px 28px -10px rgba(0, 0, 0, .75), 0 0 0 1px rgba(6, 7, 10, .35);
}
.bsc-fab {
  position: fixed; right: var(--bsc-fab-gap); bottom: max(var(--bsc-fab-gap), calc(env(safe-area-inset-bottom, 0px) + 12px)); z-index: 2147483000;
  display: inline-flex; align-items: center; gap: 8px; height: var(--bsc-fab-h); padding: 0 16px 0 14px; border: 0; border-radius: var(--bsc-fab-r); cursor: pointer;
  background: var(--bsc-fab-bg); color: var(--bsc-fab-ink); font: 700 14px/1 'Pretendard Variable', Pretendard, system-ui, sans-serif; letter-spacing: .01em;
  box-shadow: var(--bsc-fab-shadow); transition: transform 140ms cubic-bezier(.23, 1, .32, 1), background-color 160ms ease;
}
.bsc-fab::before { content: ""; position: absolute; inset: -4px; }
.bsc-fab:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .bsc-fab:hover { background: var(--bsc-fab-hover); } }
.bsc-fab:focus-visible { outline: 2px solid var(--bsc-fab-ring); outline-offset: 3px; }
.bsc-box button:focus-visible, .bsc-box textarea:focus-visible { outline: 2px solid var(--bsc-acc); outline-offset: 2px; }
.bsc-fab svg { width: 20px; height: 20px; }
.bsc-fab .bsc-dot { display: none; }
.bsc-fab[hidden] { display: none; }

.bsc-box {
  position: fixed; right: 20px; bottom: 20px; z-index: 2147483001; width: 380px; height: min(620px, calc(100vh - 40px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--bsc-r); background: var(--bsc-bg);
  box-shadow: var(--bsc-shadow); color: var(--bsc-ink); font: 400 var(--bsc-fs)/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  animation: bscIn .22s cubic-bezier(.23, 1, .32, 1) both;
}
.bsc-box[hidden] { display: none; }
@keyframes bscIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.bsc-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bsc-head); border-bottom: 1px solid var(--bsc-line); }
.bsc-ava { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #fff; background: linear-gradient(135deg, #5AA9F0, #2F6DB5); }
.bsc-who { flex: 1; min-width: 0; }
.bsc-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsc-st { font-size: 13px; color: var(--bsc-mut); }
.bsc-st.on { color: var(--bsc-acc); }
.bsc-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--bsc-mut); cursor: pointer; display: grid; place-items: center; }
.bsc-x:hover { background: rgba(255, 255, 255, .06); color: var(--bsc-ink); }
.bsc-x svg { width: 18px; height: 18px; }

.bsc-log { flex: 1; overflow-y: auto; padding: 12px 10px 8px; display: flex; flex-direction: column; gap: 4px; overscroll-behavior: contain;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(100, 181, 239, .06), transparent 70%), var(--bsc-bg); }
.bsc-note { align-self: center; margin: 8px 0; padding: 4px 10px; border-radius: 10px; background: var(--bsc-note); color: #DCE4EC; font-size: 13px; text-align: center; max-width: 90%; }
.bsc-msg { position: relative; max-width: 82%; padding: 6px 10px 6px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; animation: bscMsg .18s cubic-bezier(.23, 1, .32, 1) both; }
.bsc-msg.in { align-self: flex-start; background: var(--bsc-in); border-bottom-left-radius: 4px; }
.bsc-msg.out { align-self: flex-end; background: var(--bsc-out); border-bottom-right-radius: 4px; }
@keyframes bscMsg { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bsc-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -2px 10px; font-size: 12px; color: var(--bsc-mut); line-height: 1; }
.bsc-msg.out .bsc-meta { color: #B7CDE3; }
.bsc-ck { width: 16px; height: 11px; }
.bsc-ck path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bsc-ck.read { color: var(--bsc-read); }
.bsc-msg a { color: var(--bsc-acc); text-decoration: underline; }

.bsc-langs { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 4px; }
.bsc-langs button { height: 40px; border: 1px solid var(--bsc-line); border-radius: 10px; background: var(--bsc-in); color: var(--bsc-ink); font: 600 14px/1 inherit; cursor: pointer; transition: background .14s; }
.bsc-langs button:hover { background: #22364A; }
.bsc-langs button:disabled { opacity: .5; cursor: default; }

.bsc-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 12px; border-bottom-left-radius: 4px; background: var(--bsc-in); }
.bsc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--bsc-mut); animation: bscDot 1.2s infinite ease-in-out; }
.bsc-typing i:nth-child(2) { animation-delay: .15s; } .bsc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bscDot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.bsc-bar { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px; background: var(--bsc-head); border-top: 1px solid var(--bsc-line); }
.bsc-in { flex: 1; min-height: 40px; max-height: 120px; resize: none; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--bsc-bg); color: var(--bsc-ink); font: inherit; }
.bsc-in::placeholder { color: var(--bsc-mut); }
.bsc-in:disabled { opacity: .55; }
.bsc-send { flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--bsc-acc); color: #0E1621; cursor: pointer; display: grid; place-items: center; transition: transform .14s; }
.bsc-send:active { transform: scale(.94); }
.bsc-send:disabled { opacity: .45; cursor: default; }
.bsc-send svg { width: 20px; height: 20px; }

@media (max-width: 520px) {
  .bsc-box { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .bsc-box, .bsc-msg, .bsc-typing i { animation: none; } .bsc-fab { transition: none; } }