/**
 * IVS Chat 오버레이 모드 — 모바일/임베드 라이브커머스 UI.
 *
 * 위치:
 *   - .bc-chat-overlay 는 #bc-player-wrap (영상 컨테이너) 안에 absolute 로 배치.
 *   - 메시지: 좌측 하단에서 위로 떠오르는 채팅 스트림.
 *   - 입력 바: 영상 하단 가로 고정 (이모지 / 입력 / 전송 / 하트).
 *
 * 트렌드 디자인 포인트:
 *   - 기본(쇼츠형): 배경 없는 텍스트 + 외곽선 그림자 (영상 위 플로팅)
 *   - 캡슐형 말풍선은 body.bc-ui-chat-{default|glass|bubble|…} 에서만 적용
 *   - 닉네임 컬러 hash (data-hue), 호스트는 골드
 *   - 가로 모드는 오버레이 사용 X (사이드바 그대로)
 */

/* ===== 오버레이 컨테이너 ===== */
.bc-chat-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	pointer-events: none;
	z-index: 30;
	/* 영상 하단 약 45% 영역에만 오버레이 — 시청 방해 최소화 */
	max-height: 60%;
}
.bc-chat-overlay > * { pointer-events: auto; }

/* 메시지 목록 — 좌측 하단에서 위로 흐름 (기본: 쇼츠형, 마스크 없음) */
.bc-chat-overlay-messages {
	flex: 1 1 auto;
	min-height: 0;
	max-height: 100%;
	margin: 0;
	padding: 4px 8px 8px;
	list-style: none;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2px;
	font-size: 13.5px;
	line-height: 1.45;
	color: #fff;
	background: transparent;
	-webkit-mask-image: none;
	mask-image: none;
	pointer-events: none;
}

/* 단일 메시지 — 기본 쇼츠형 (배경·캡슐 없음, 텍스트+그림자) */
.bc-chat-overlay-msg {
	display: block;
	max-width: 100%;
	margin: 0 0 5px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: #fff;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.45;
	white-space: normal;
	word-break: break-word;
	pointer-events: auto;
	animation: bc-chat-overlay-in .22s ease-out;
	text-shadow:
		0 0 2px #000,
		0 1px 2px #000,
		1px 1px 0 rgba(0,0,0,.95),
		-1px -1px 0 rgba(0,0,0,.95),
		1px -1px 0 rgba(0,0,0,.95),
		-1px 1px 0 rgba(0,0,0,.95),
		0 0 8px rgba(0,0,0,.8);
}
@keyframes bc-chat-overlay-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.bc-chat-overlay-msg.is-system {
	background: transparent;
	color: #b8f0ff;
	font-size: 11.5px;
	padding: 0;
	border-radius: 0;
	opacity: .95;
	text-shadow:
		0 0 2px #000,
		1px 1px 0 rgba(0,0,0,.95),
		-1px -1px 0 rgba(0,0,0,.95),
		1px -1px 0 rgba(0,0,0,.95),
		-1px 1px 0 rgba(0,0,0,.95),
		0 0 8px rgba(0,0,0,.8);
}

.bc-chat-overlay-msg.is-self {
	background: transparent;
	box-shadow: none;
}

/* 호스트 — 기본은 텍스트 강조만 (뱃지는 SCM admin 테마) */
.bc-chat-overlay-msg.is-host {
	background: transparent;
	box-shadow: none;
	font-weight: 600;
}
.bc-chat-overlay-msg.is-host::before {
	content: none;
	display: none;
}

/* 비-쇼츠 테마: 기존 캡슐(반투명 말풍선) 스타일 */
body.bc-ui-chat-default .bc-chat-overlay-messages,
body.bc-ui-chat-glass .bc-chat-overlay-messages,
body.bc-ui-chat-bubble .bc-chat-overlay-messages,
body.bc-ui-chat-minimal .bc-chat-overlay-messages,
body.bc-ui-chat-neon .bc-chat-overlay-messages,
body.bc-ui-chat-dark .bc-chat-overlay-messages {
	padding: 6px 8px 4px;
	gap: 0;
	font-size: 13px;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 22%, #000 50%);
	mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 22%, #000 50%);
}
body.bc-ui-chat-default .bc-chat-overlay-msg,
body.bc-ui-chat-glass .bc-chat-overlay-msg,
body.bc-ui-chat-bubble .bc-chat-overlay-msg,
body.bc-ui-chat-minimal .bc-chat-overlay-msg,
body.bc-ui-chat-neon .bc-chat-overlay-msg,
body.bc-ui-chat-dark .bc-chat-overlay-msg {
	display: inline-block;
	max-width: 86%;
	margin: 0 0 6px;
	padding: 5px 11px 5px 9px;
	background: rgba(0, 0, 0, 0.45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-radius: 999px;
	box-shadow: none;
	font-size: 13px;
	text-shadow:
		0 0 2px #000,
		0 1px 2px #000,
		1px 1px 0 rgba(0,0,0,.95),
		-1px -1px 0 rgba(0,0,0,.95),
		1px -1px 0 rgba(0,0,0,.95),
		-1px 1px 0 rgba(0,0,0,.95),
		0 0 8px rgba(0,0,0,.75);
}
body.bc-ui-chat-default .bc-chat-overlay-msg.is-system,
body.bc-ui-chat-glass .bc-chat-overlay-msg.is-system,
body.bc-ui-chat-bubble .bc-chat-overlay-msg.is-system,
body.bc-ui-chat-minimal .bc-chat-overlay-msg.is-system,
body.bc-ui-chat-neon .bc-chat-overlay-msg.is-system,
body.bc-ui-chat-dark .bc-chat-overlay-msg.is-system {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 11.5px;
	padding: 3px 10px;
	border-radius: 999px;
	opacity: .85;
}
body.bc-ui-chat-default .bc-chat-overlay-msg.is-self,
body.bc-ui-chat-glass .bc-chat-overlay-msg.is-self,
body.bc-ui-chat-bubble .bc-chat-overlay-msg.is-self,
body.bc-ui-chat-minimal .bc-chat-overlay-msg.is-self,
body.bc-ui-chat-neon .bc-chat-overlay-msg.is-self,
body.bc-ui-chat-dark .bc-chat-overlay-msg.is-self {
	background: linear-gradient(90deg, rgba(61,124,255,.55), rgba(99,102,241,.55));
	box-shadow: 0 4px 12px rgba(61,124,255,.18);
}
body.bc-ui-chat-default .bc-chat-overlay-msg.is-host,
body.bc-ui-chat-glass .bc-chat-overlay-msg.is-host,
body.bc-ui-chat-bubble .bc-chat-overlay-msg.is-host,
body.bc-ui-chat-minimal .bc-chat-overlay-msg.is-host,
body.bc-ui-chat-neon .bc-chat-overlay-msg.is-host,
body.bc-ui-chat-dark .bc-chat-overlay-msg.is-host {
	background: linear-gradient(90deg, rgba(255,182,72,.85), rgba(232,51,51,.85));
	box-shadow: 0 6px 18px rgba(232,51,51,.28);
	font-weight: 600;
}
body.bc-ui-chat-default .bc-chat-overlay-msg.is-host::before,
body.bc-ui-chat-glass .bc-chat-overlay-msg.is-host::before,
body.bc-ui-chat-bubble .bc-chat-overlay-msg.is-host::before,
body.bc-ui-chat-minimal .bc-chat-overlay-msg.is-host::before,
body.bc-ui-chat-neon .bc-chat-overlay-msg.is-host::before,
body.bc-ui-chat-dark .bc-chat-overlay-msg.is-host::before {
	content: '★';
	display: inline-block;
	margin-right: 6px;
	color: #fff8d0;
	font-size: 12px;
	text-shadow: 0 0 6px rgba(255,224,128,.7);
}
.bc-chat-overlay-msg.bc-pop-in {
	animation: bc-chat-overlay-pop .45s ease-out;
}
@keyframes bc-chat-overlay-pop {
	0%   { transform: scale(0.85); opacity: 0; }
	60%  { transform: scale(1.04); opacity: 1; }
	100% { transform: scale(1); }
}

/* 닉네임 칩 */
.bc-chat-overlay-nick {
	display: inline-block;
	margin-right: 6px;
	font-weight: 700;
	font-size: 12.5px;
	color: #ffd76a;
	letter-spacing: 0.01em;
	text-shadow:
		0 0 2px #000,
		1px 1px 0 rgba(0,0,0,.95),
		-1px -1px 0 rgba(0,0,0,.95),
		1px -1px 0 rgba(0,0,0,.95),
		-1px 1px 0 rgba(0,0,0,.95),
		0 0 8px rgba(0,0,0,.8);
}
/* 닉네임 hue (10단계) — 일반 게스트 색상 분산 */
.bc-chat-overlay-nick[data-hue="0"] { color: #ff8a8a; }
.bc-chat-overlay-nick[data-hue="1"] { color: #ffb86c; }
.bc-chat-overlay-nick[data-hue="2"] { color: #ffe566; }
.bc-chat-overlay-nick[data-hue="3"] { color: #7dffb0; }
.bc-chat-overlay-nick[data-hue="4"] { color: #6ef0ff; }
.bc-chat-overlay-nick[data-hue="5"] { color: #7eb6ff; }
.bc-chat-overlay-nick[data-hue="6"] { color: #c4a8ff; }
.bc-chat-overlay-nick[data-hue="7"] { color: #ffa3f0; }
.bc-chat-overlay-nick[data-hue="8"] { color: #ff8fb0; }
.bc-chat-overlay-nick[data-hue="9"] { color: #ffd24d; }
/* 호스트/관리자 닉네임은 hue 무시하고 골드 / 라임 */
.bc-chat-overlay-nick[data-role="host"] { color: #ffe28a; }
.bc-chat-overlay-nick[data-role="admin"] { color: #a7f3d0; }
.bc-chat-overlay-nick[data-role="reseller"] { color: #93c5fd; }

/* 본문 — 메시지 내용 해시 색상 (흰 옷 위에서도 구분·가독) */
.bc-chat-overlay-text {
	color: #fff;
	font-weight: 600;
	text-shadow:
		0 0 2px #000,
		1px 1px 0 rgba(0,0,0,.95),
		-1px -1px 0 rgba(0,0,0,.95),
		1px -1px 0 rgba(0,0,0,.95),
		-1px 1px 0 rgba(0,0,0,.95),
		0 0 8px rgba(0,0,0,.85);
}
.bc-chat-overlay-text[data-hue="0"] { color: #ffc9c9; }
.bc-chat-overlay-text[data-hue="1"] { color: #ffd7a8; }
.bc-chat-overlay-text[data-hue="2"] { color: #fff3a3; }
.bc-chat-overlay-text[data-hue="3"] { color: #b8ffd4; }
.bc-chat-overlay-text[data-hue="4"] { color: #b3f7ff; }
.bc-chat-overlay-text[data-hue="5"] { color: #c5dcff; }
.bc-chat-overlay-text[data-hue="6"] { color: #ddd0ff; }
.bc-chat-overlay-text[data-hue="7"] { color: #ffd0f5; }
.bc-chat-overlay-text[data-hue="8"] { color: #ffc4d6; }
.bc-chat-overlay-text[data-hue="9"] { color: #ffe9a8; }

/* 호스트 뱃지 (왕관) */
.bc-chat-overlay-msg .bc-ui-admin-badge {
	margin-right: 4px;
	vertical-align: middle;
}

/* ===== 입력 바 ===== */
.bc-chat-overlay-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 60%);
	pointer-events: auto;
}
/* 셀러 구매자 라이브 미리보기 — 채팅 목록만 보이고 입력·하트·이모지 비활성 */
.bc-chat-overlay.is-view-only .bc-chat-overlay-bar,
.bc-chat-overlay.is-view-only .bc-chat-overlay-emoji-pop {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}
.bc-chat-overlay.is-readonly .bc-chat-overlay-bar {
	opacity: 0.72;
	pointer-events: none !important;
	cursor: not-allowed;
}
.bc-chat-overlay.is-readonly .bc-chat-overlay-form {
	background: #f1f5f9;
	border-color: #e2e8f0;
}
.bc-chat-overlay.is-readonly .bc-chat-overlay-form input {
	color: #64748b;
	cursor: not-allowed;
	-webkit-text-fill-color: #64748b;
	background: #f1f5f9;
}
.bc-chat-overlay.is-readonly .bc-chat-overlay-form input::placeholder {
	color: #94a3b8;
	-webkit-text-fill-color: #94a3b8;
}
.bc-chat-overlay.is-readonly .bc-chat-overlay-send,
.bc-chat-overlay.is-readonly .bc-chat-overlay-emoji,
.bc-chat-overlay.is-readonly .bc-chat-overlay-heart {
	opacity: 0.45;
	cursor: not-allowed;
	filter: grayscale(0.35);
}
.bc-chat-overlay.is-readonly .bc-chat-overlay-emoji-pop {
	display: none !important;
}
.bc-chat-overlay-form {
	flex: 1;
	display: flex;
	align-items: center;
	/* iOS Safari: backdrop-filter 조상 + 흰 글자/강제 흰 배경이면 입력 글자가 안 보임 */
	background: #ffffff;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 999px;
	padding: 0 4px 0 14px;
	min-width: 0;
	color-scheme: light;
}
.bc-chat-overlay-form input {
	flex: 1;
	min-width: 0;
	background: #ffffff;
	border: 0;
	outline: 0;
	color: #111111;
	-webkit-text-fill-color: #111111;
	caret-color: #111111;
	font-size: 16px;
	height: 36px;
	padding: 0;
	opacity: 1;
	-webkit-appearance: none;
	appearance: none;
	color-scheme: light;
	-webkit-user-select: text;
	user-select: text;
}
.bc-chat-overlay-form input:focus {
	background: #ffffff;
	color: #111111;
	-webkit-text-fill-color: #111111;
	caret-color: #111111;
}
.bc-chat-overlay-form input::placeholder {
	color: #64748b;
	-webkit-text-fill-color: #64748b;
	opacity: 1;
}
.bc-chat-overlay-form input:-webkit-autofill,
.bc-chat-overlay-form input:-webkit-autofill:hover,
.bc-chat-overlay-form input:-webkit-autofill:focus {
	-webkit-text-fill-color: #111111;
	caret-color: #111111;
	box-shadow: 0 0 0 1000px #ffffff inset;
	transition: background-color 99999s ease-out;
}
.bc-chat-overlay-send {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 0;
	background: linear-gradient(135deg, #D82D28, #D82D28);
	color: #fff;
	cursor: pointer;
	transition: transform .12s;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.bc-chat-overlay-send:hover { transform: scale(1.05); }
.bc-chat-overlay-send:active { transform: scale(.92); }

.bc-chat-overlay-emoji,
.bc-chat-overlay-heart {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,.16);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,.2);
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .12s, background .12s;
}
.bc-chat-overlay-emoji:hover,
.bc-chat-overlay-heart:hover { background: rgba(255,255,255,.24); transform: scale(1.06); }
.bc-chat-overlay-heart { color: #ff5b7a; }
.bc-chat-overlay-heart.is-pulse {
	animation: bc-heart-pulse .42s ease-out;
}
@keyframes bc-heart-pulse {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.3); }
	60%  { transform: scale(.92); }
	100% { transform: scale(1); }
}

/* 이모지 팝업 — 10열 × 3행 */
.bc-chat-overlay-emoji-pop {
	position: absolute;
	left: 8px;
	bottom: 60px;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 2px;
	padding: 6px 8px;
	max-width: min(100%, 320px);
	background: rgba(15,18,28,.92);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(0,0,0,.4);
	z-index: 4;
}
.bc-chat-overlay-emoji-pop[hidden] { display: none; }
/* PiP overflow:hidden 탈출 — body 고정 레이어 (ivs-chat.js) */
.bc-chat-overlay-emoji-pop.is-bc-emoji-pop-open {
	position: fixed !important;
	left: 8px;
	display: grid !important;
	grid-template-columns: repeat(10, 1fr);
	gap: 2px;
	padding: 6px 8px;
	max-width: min(100vw - 16px, 320px);
	background: rgba(15,18,28,.92);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(0,0,0,.4);
	z-index: 2147483640;
	pointer-events: auto;
	touch-action: manipulation;
}
.bc-chat-overlay-emoji-pop button {
	background: transparent;
	border: 0;
	font-size: 18px;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	cursor: pointer;
	transition: background .12s;
}
.bc-chat-overlay-emoji-pop button:hover { background: rgba(255,255,255,.08); }

/* ===== 가로형 / 임베드 비-오버레이 (보조 보호) ===== */
body.bc-landscape:not(.bc-embed) .bc-chat-overlay { display: none; }

/* ===== 모바일 PiP 임베드 — 추가 보정 ===== */
body.bc-embed .bc-chat-overlay {
	max-height: 65%;
}
body.bc-embed.bc-portrait .bc-chat-overlay {
	max-height: 55%;
}

/* ===== 사이드바 모드 — 자동 입장 뱃지 (현재 닉네임) ===== */
.bc-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bc-chat-me-pill {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(61,124,255,.22);
	color: #93c5fd;
	max-width: 140px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 사이드바 호스트 메시지 강조 */
.bc-chat-messages .bc-chat-msg.is-host {
	background: linear-gradient(90deg, rgba(255,182,72,.16), rgba(232,51,51,.16));
	border-left: 3px solid #ffb648;
	padding: 6px 10px;
	margin: 6px -10px;
	border-radius: 6px;
}
.bc-chat-messages .bc-chat-msg.bc-chat-system {
	color: #9aa8c7;
	font-size: 12px;
	font-style: italic;
}

/* 호스트 뱃지 — SCM(어드민)이 「라이브 UI 테마 > 관리자 뱃지」에서 선택한 변형이
   적용되지 않은 페이지(테마 CSS / body 클래스 미로드)에서만 보이는 폴백.
   변형이 적용된 페이지(body[class*="bc-ui-admin-"])에서는 아래 override 가
   width/height/background/content 를 모두 풀어 테마 변형이 직접 그리도록 양보한다. */
.bc-chat-role-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 4px;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #f59e0b, #D82D28);
	vertical-align: middle;
}
.bc-chat-role-badge[data-role="host"]::before { content: '★'; }
.bc-chat-role-badge[data-role="admin"]::before { content: '✓'; }

/* 테마(SCM 「관리자 뱃지」) 변형이 활성화된 경우 — 폴백 width/height/배경/아이콘을 해제.
   body[class*="bc-ui-admin-"] 선택자는 bc-ui-admin-crown / -shield / -star / -host / -none
   중 어떤 것이 붙어도 매칭된다. 본 override 의 명시도는 ::before 의 경우 (0,2,2) 로
   broadcast-ui-themes.css 의 body.bc-ui-admin-crown ... ::before (0,3,2) 보다 낮아
   테마 변형 ::before content 가 그대로 표시된다. */
body[class*="bc-ui-admin-"] .bc-chat-role-badge {
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	background: none;
}
body[class*="bc-ui-admin-"] .bc-chat-role-badge::before {
	content: none;
}

/* ===== 호스트(셀러) 페이지에서 채팅 영역이 영상보다 위에 있어야 하는 경우 ===== */
.bc-ui-viewer { z-index: 29; }
.bc-ui-notice { z-index: 31; }
.bc-ui-product-card { z-index: 32; }
.bc-ui-coupon { z-index: 50; }
.bc-ui-toast { z-index: 33; }

/* 오버레이 모드 — 기존 우하단 ❤ 버튼은 채팅 입력바의 하트로 대체 */
body.bc-chat-overlay .bc-ui-like-btn { display: none; }

/* ===== 좁은 화면 (≤360px) 추가 보정 ===== */
@media (max-width: 360px) {
	.bc-chat-overlay-bar { gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
	.bc-chat-overlay-emoji,
	.bc-chat-overlay-heart { width: 32px; height: 32px; font-size: 16px; }
	.bc-chat-overlay-send { width: 28px; height: 28px; }
	.bc-chat-overlay-form input { font-size: 16px; height: 32px; }
}