/* PSA 웹 채팅 위젯 — Tidio 스타일. 스코프 #psa-widget-root.
   ▸ 모든 색·박스는 아래 CSS 변수로 노출 → 사장님 커스텀 CSS(⑦)에서
     #psa-widget-root{ --psa-accent:#e11d48; } 식으로 손쉽게 재정의. */
#psa-widget-root {
	/* 강조/브랜드 */
	--psa-accent: #1c6ef2;
	--psa-accent-ink: #ffffff;
	/* 패널·대화 배경 */
	--psa-panel-bg: #ffffff;
	--psa-log-bg: #ffffff;
	--psa-border: #eef0f3;
	/* 봇 말풍선 박스 — 중립 회색(Tidio) */
	--psa-bot-bg: #f1f3f5;
	--psa-bot-ink: #1f2733;
	/* 내 말풍선 박스 — 유일한 강조색 */
	--psa-me-bg: #1c6ef2;
	--psa-me-ink: #ffffff;
	/* 상담원 말풍선 박스 — 봇과 동일(색 최소화, 라벨로만 구분) */
	--psa-agent-bg: #f1f3f5;
	--psa-agent-ink: #1f2733;
	--psa-agent-border: transparent;
	--psa-agent-tag: #8a94a6;
	/* 런처 */
	--psa-launcher-bg: var(--psa-accent);
	--psa-launcher-ink: #ffffff;
	--psa-launcher-open-bg: #55606e;
	/* 안읽음 뱃지 */
	--psa-badge-bg: #ff3b30;
	--psa-badge-ink: #ffffff;
	/* 입력부 */
	--psa-input-bg: #ffffff;
	--psa-placeholder: #9aa5b1;
	--psa-send-disabled: #d3d8e0;
	/* 형태 — Tidio: 창 12px, 말풍선 18px */
	--psa-radius: 12px;
	--psa-radius-bubble: 18px;
	--psa-shadow-panel: 0 8px 40px rgba(0,0,0,.16), 0 2px 10px rgba(0,0,0,.08);
	--psa-shadow-launcher: 0 6px 18px rgba(28,110,242,.45), 0 3px 8px rgba(0,0,0,.18);
	--psa-shadow-bubble: 0 1px 2px rgba(0,0,0,.05);
	/* 본문 폰트 크기(홈페이지 본문체 상속) */
	--psa-fs: 13px;

	/* 홈페이지 본문 폰트 상속(gmarket-sans 등) */
	font-family: inherit;
}

/* 테마 '맨 위로'(Blocksy .ct-back-to-top) — 채팅 런처와 같은 크기·모양·정렬로, 바로 위에 배치.
   런처: right 20 / bottom 20 / 56px 원형 → back-to-top: right 20 / bottom 88(12px 간격) / 56px 원형. */
.ct-back-to-top {
	right: 20px !important;
	bottom: 88px !important;
	left: auto !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	max-width: 56px !important;
	border-radius: 50% !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--psa-accent, #1c6ef2) !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(28,110,242,.45), 0 3px 8px rgba(0,0,0,.18) !important;
}
.ct-back-to-top svg { width: 22px !important; height: 22px !important; fill: currentColor !important; }
/* 채팅 열리면 숨김(패널과 겹침 방지) */
body.psa-body-open .ct-back-to-top { display: none !important; }

/* ── 런처: 56px 원형, 말풍선 아이콘만(테마 button 간섭 방지) ── */
#psa-widget-root .psa-launcher {
	position: fixed; right: 20px; bottom: 20px; z-index: 2147483000;
	box-sizing: border-box; width: 56px; height: 56px; min-width: 56px; max-width: 56px;
	padding: 0; margin: 0; border: 0; border-radius: 50%; line-height: 0; cursor: pointer; appearance: none;
	display: flex; align-items: center; justify-content: center;
	background: var(--psa-launcher-bg); color: var(--psa-launcher-ink);
	box-shadow: var(--psa-shadow-launcher);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#psa-widget-root .psa-launcher:hover { transform: scale(1.06); }
#psa-widget-root .psa-launcher:active { transform: scale(.96); }
#psa-widget-root .psa-l-ic { position: absolute; display: flex; align-items: center; justify-content: center; transition: opacity .12s ease, transform .18s ease; }
#psa-widget-root .psa-l-close { opacity: 0; transform: rotate(-90deg) scale(.6); }
#psa-widget-root .psa-launcher--open .psa-l-open { opacity: 0; transform: rotate(90deg) scale(.6); }
#psa-widget-root .psa-launcher--open .psa-l-close { opacity: 1; transform: none; }
#psa-widget-root .psa-launcher--open { background: var(--psa-launcher-open-bg); box-shadow: 0 6px 18px rgba(0,0,0,.28); }

/* 안읽음 뱃지(빨간 원 + 숫자) */
#psa-widget-root .psa-l-badge {
	position: absolute; top: -3px; right: -3px; box-sizing: border-box;
	min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
	background: var(--psa-badge-bg); color: var(--psa-badge-ink); font-size: 12px; font-weight: 700;
	display: none; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#psa-widget-root.psa-has-unread .psa-launcher:not(.psa-launcher--open) .psa-l-badge { display: flex; }

/* ── 패널 ── */
#psa-widget-root .psa-panel {
	position: fixed; right: 20px; bottom: 88px; z-index: 2147483000;
	width: 372px; max-width: calc(100vw - 40px); height: 600px; max-height: calc(100vh - 120px);
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--psa-panel-bg); border-radius: var(--psa-radius);
	box-shadow: var(--psa-shadow-panel);
	animation: psa-pop .18s ease;
}
@keyframes psa-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
#psa-widget-root .psa-hidden { display: none !important; }

/* 확대(expand) 상태 — 위아래(높이)만 늘어남. 폭은 그대로. */
#psa-widget-root .psa-panel.psa-expanded {
	height: calc(100vh - 108px);
}

/* 우상단 컨트롤 스트립(확대/축소) — 무배경·얇게 */
#psa-widget-root .psa-ctrl {
	flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center;
	padding: 8px 8px 0; background: transparent;
}
#psa-widget-root .psa-expand {
	width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer; padding: 0;
	background: transparent; color: #98a2b3; display: flex; align-items: center; justify-content: center;
	position: relative;
}
#psa-widget-root .psa-expand:hover { background: #f1f3f6; color: #52606d; }
#psa-widget-root .psa-x-ic { position: absolute; display: flex; transition: opacity .12s ease; }
#psa-widget-root .psa-x-close { opacity: 0; }
#psa-widget-root .psa-panel.psa-expanded .psa-x-open { opacity: 0; }
#psa-widget-root .psa-panel.psa-expanded .psa-x-close { opacity: 1; }

/* 헤더 없음(Tidio) — 메시지가 상단부터 */
#psa-widget-root .psa-log {
	flex: 1; overflow-y: auto; padding: 6px 12px 14px 16px;
	display: flex; flex-direction: column; gap: 12px; background: var(--psa-log-bg);
	scrollbar-width: thin; scrollbar-color: #cfd6df transparent; /* Firefox: 얇게·화살표 없음 */
	overscroll-behavior: contain;
}
/* WebKit: 얇은 인셋 스크롤바(상/하 화살표 없음) */
#psa-widget-root .psa-log::-webkit-scrollbar { width: 10px; }
#psa-widget-root .psa-log::-webkit-scrollbar-button { display: none; height: 0; }
#psa-widget-root .psa-log::-webkit-scrollbar-track { background: transparent; }
#psa-widget-root .psa-log::-webkit-scrollbar-thumb {
	background: #cfd6df; border-radius: 8px; border: 3px solid transparent; background-clip: content-box;
}
#psa-widget-root .psa-log::-webkit-scrollbar-thumb:hover { background: #b6bfca; background-clip: content-box; border: 3px solid transparent; }
#psa-widget-root .psa-msg { display: flex; }
#psa-widget-root .psa-msg--me { justify-content: flex-end; }
#psa-widget-root .psa-b {
	max-width: 86%; padding: 10px 14px; border-radius: var(--psa-radius-bubble); font-size: var(--psa-fs); line-height: 1.55;
	word-break: break-word; white-space: normal; box-shadow: var(--psa-shadow-bubble);
}
#psa-widget-root .psa-msg--bot .psa-b { background: var(--psa-bot-bg); color: var(--psa-bot-ink); border-bottom-left-radius: 6px; }
#psa-widget-root .psa-msg--me .psa-b { background: var(--psa-me-bg); color: var(--psa-me-ink); border-bottom-right-radius: 6px; }
#psa-widget-root .psa-msg--agent { flex-direction: column; align-items: flex-start; }
#psa-widget-root .psa-msg--agent .psa-b { background: var(--psa-agent-bg); color: var(--psa-agent-ink); border: 1px solid var(--psa-agent-border); border-bottom-left-radius: 6px; }
#psa-widget-root .psa-agent-tag { font-size: 11px; font-weight: 700; color: var(--psa-agent-tag); margin: 0 0 3px 4px; }
#psa-widget-root .psa-b a { color: inherit; text-decoration: underline; }
#psa-widget-root .psa-msg--bot .psa-b a { color: var(--psa-accent); }

/* 타이핑 */
#psa-widget-root .psa-typing .psa-b { display: inline-flex; align-items: center; gap: 4px; padding: 12px 15px; }
#psa-widget-root .psa-typing-tx { margin-left: 8px; font-size: 12.5px; color: #52606d; white-space: nowrap; }
#psa-widget-root .psa-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9aa5b1; display: inline-block; animation: psa-blink 1.2s infinite ease-in-out; }
#psa-widget-root .psa-typing span:nth-child(2) { animation-delay: .2s; }
#psa-widget-root .psa-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes psa-blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* 로그인 카드 */
#psa-widget-root .psa-login-card { padding: 12px 16px; border-top: 1px solid var(--psa-border); background: var(--psa-panel-bg); }
#psa-widget-root .psa-login-inner { text-align: center; }
#psa-widget-root .psa-login-msg { font-size: 13.5px; line-height: 1.5; color: #1f2733; margin: 4px 0 12px; }
#psa-widget-root .psa-login-open, #psa-widget-root .psa-login-done {
	display: block; width: 100%; margin: 0 0 8px; padding: 11px; border-radius: 10px; cursor: pointer;
	font-size: 14px; font-weight: 700; border: 0;
}
#psa-widget-root .psa-login-open { background: var(--psa-accent); color: var(--psa-accent-ink); }
#psa-widget-root .psa-login-done { background: #fff; color: var(--psa-accent); border: 1px solid var(--psa-accent); }
#psa-widget-root .psa-login-note { font-size: 11.5px; color: #7b8794; margin: 4px 0 0; }

/* 첨부 미리보기 바 */
#psa-widget-root .psa-attach-bar { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px 0; background: var(--psa-panel-bg); }
#psa-widget-root .psa-chip { position: relative; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; border: 1px solid #e3e7ee; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
#psa-widget-root .psa-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
#psa-widget-root .psa-chip--busy { opacity: .5; }
#psa-widget-root .psa-chip--busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; border-top-color: transparent; animation: psa-spin .8s linear infinite; }
@keyframes psa-spin { to { transform: rotate(360deg); } }
#psa-widget-root .psa-chip-x { position: absolute; top: 1px; right: 1px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
#psa-widget-root .psa-b-imgs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 4px; }
#psa-widget-root .psa-b-imgs img { max-width: 150px; max-height: 150px; border-radius: 12px; display: block; box-shadow: 0 1px 4px rgba(0,0,0,.12); }

/* ── 입력부: 얇게, 텍스트 위 / 도구(첨부·전송) 아래 ── */
#psa-widget-root .psa-input {
	display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 10px;
	border-top: 1px solid var(--psa-border); background: var(--psa-input-bg);
}
#psa-widget-root .psa-input textarea {
	width: 100%; box-sizing: border-box; resize: none; border: 0; outline: none;
	padding: 8px 6px 2px; font-size: var(--psa-fs); line-height: 1.45; max-height: 110px;
	font-family: inherit; background: transparent; color: #1f2733;
}
#psa-widget-root .psa-input textarea::placeholder { color: var(--psa-placeholder); }
#psa-widget-root .psa-tools { display: flex; align-items: center; gap: 6px; }
#psa-widget-root .psa-attach {
	flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
	background: transparent; color: #7b8794; display: flex; align-items: center; justify-content: center;
}
#psa-widget-root .psa-attach:hover { background: #f1f3f6; color: #52606d; }
#psa-widget-root .psa-send {
	flex: 0 0 auto; margin-left: auto; box-sizing: border-box; width: 32px; height: 32px;
	border-radius: 50%; border: 0; cursor: pointer; padding: 0; line-height: 0;
	background: var(--psa-accent); color: var(--psa-accent-ink); display: flex; align-items: center; justify-content: center;
	transition: opacity .15s ease, background .15s ease;
}
#psa-widget-root .psa-send:disabled { background: var(--psa-send-disabled); color: #fff; cursor: default; }

/* 모바일: 전체화면 */
@media (max-width: 480px) {
	#psa-widget-root .psa-panel {
		right: 0; bottom: 0; top: 0; left: 0; width: 100%; height: 100%;
		max-width: 100%; max-height: 100%; border-radius: 0;
	}
	body.psa-body-open { overflow: hidden; }
	#psa-widget-root .psa-launcher { right: 16px; bottom: 16px; }
	/* 전체화면에서 X 런처는 우상단으로(입력창과 겹침 방지) */
	#psa-widget-root .psa-launcher--open {
		top: 10px; right: 10px; bottom: auto; width: 40px; height: 40px; min-width: 40px; max-width: 40px;
		background: transparent; color: #55606e; box-shadow: none;
	}
	/* 전체화면에선 확대 불필요(런처 X와 겹침) → 컨트롤 숨김 */
	#psa-widget-root .psa-ctrl { display: none; }
	#psa-widget-root .psa-panel.psa-expanded { width: 100%; height: 100%; }
	#psa-widget-root .psa-log { padding-top: 52px; }
}