/* ── 강사와 떠 있는 채팅 — 공용 메시지 기능을 작은 창에 담는다 ───────────── */
.floating-talk {
	position: fixed;
	/* 끝 쪽에서 비켜 설 거리(아래 "사이드바 자리"). 폭은 남은 자리에 맞추되 18rem 아래로는 줄이지 않고, 그때는 덜 비켜 화면 안에 머문다 */
	--talk-gap: 0px;
	--talk-size: min(25rem, calc(100% - 2 * var(--wa-space-m)), max(18rem, calc(100% - var(--talk-gap) - 2 * var(--wa-space-m))));
	inset-inline-end: min(calc(var(--talk-gap) + var(--wa-space-m)), calc(100% - var(--talk-size) - var(--wa-space-m)));
	inset-block-end: var(--wa-space-m);
	z-index: 210;
	box-sizing: border-box;
	inline-size: var(--talk-size);
	max-block-size: calc(100dvh - 2 * var(--wa-space-m));
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-normal);
	box-shadow: var(--wa-shadow-l);
	overflow: hidden;
}
/* 챗봇이 끝 쪽이면(SSOT 11절 "사이드바 자리") 챗봇 입력창을 가리지 않게 본문 쪽으로 비킨다 — 둘 다 끝 쪽이면 빠른 막대 열까지 넘는다 */
@media (min-width: 1100px) {
	[data-chat-side='end'] body:not([data-lyen-page]) .floating-talk { --talk-gap: var(--chat-size); }
	[data-chat-side='end'][data-quick-side='end'] body:not([data-lyen-page], [data-no-quickbar]) .floating-talk { --talk-gap: calc(var(--quick-width) + var(--chat-size)); }
}
.floating-talk-support { inset-inline-end: var(--wa-space-m); }
.floating-talk .floating-talk-head {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-s);
	border-block-end: 1px solid var(--wa-color-surface-border);
}
.floating-talk .floating-talk-head img { inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--wa-border-radius-circle); object-fit: cover; }
.floating-talk .floating-talk-title { flex: 1; min-inline-size: 0; display: grid; gap: 0.125rem; }
.floating-talk .floating-talk-head h2 { margin: 0; font-size: var(--wa-font-size-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.floating-talk .floating-talk-title p { margin: 0; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); line-height: 1.35; }
.floating-talk .floating-talk-head nav { display: flex; gap: var(--wa-space-3xs); }
.floating-talk .floating-talk-icon {
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--wa-border-radius-m);
	background: transparent;
	color: var(--wa-color-text-normal);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}
.floating-talk .floating-talk-icon:hover { background: var(--wa-color-surface-lowered); }
.floating-talk .floating-talk-icon[aria-pressed="true"] { background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); }
.floating-talk .floating-talk-icon:focus-visible { outline: var(--wa-focus-ring); outline-offset: -2px; }
.floating-talk .floating-talk-icon:disabled { opacity: 0.5; cursor: default; }
.floating-talk .floating-talk-body > .talk-room { display: flex; flex-direction: column; gap: 0; block-size: min(36rem, calc(100dvh - 2 * var(--wa-space-m))); min-block-size: 0; border: 0; border-radius: 0; box-shadow: none; }
/* 운영자 문의 창 — 머리 띠와 입력창이 커서 대화 칸이 좁으니 창을 높여 대화 칸을 두 배로(SSOT 13절 "운영자 문의", 2026-11-03 사용자 지시) */
.floating-talk-support .floating-talk-body > .talk-room { block-size: min(54rem, calc(100dvh - 2 * var(--wa-space-m))); }
.floating-talk .talk-log { flex: 1; min-block-size: 6rem; block-size: auto; border: 0; border-radius: 0; }
.floating-talk .talk-message { max-inline-size: 90%; }
.floating-talk .talk-room > .profile-help,
.floating-talk .talk-typing,
.floating-talk .form-status { flex: none; margin: 0; padding: var(--wa-space-2xs) var(--wa-space-s); font-size: var(--wa-font-size-xs); }
/* 운영자 문의 창 오른쪽 아래 [더 크게 보기] — 전체 화면 채팅방으로(SSOT 13절 "운영자 문의", 2026-11-03 사용자 지시) */
.floating-talk .floating-talk-expand { flex: none; display: flex; justify-content: flex-end; margin: 0; padding: 0 var(--wa-space-s) var(--wa-space-xs); }
.floating-talk .floating-talk-expand a { display: inline-flex; align-items: center; gap: var(--wa-space-2xs); padding: var(--wa-space-3xs) var(--wa-space-xs); border-radius: var(--wa-border-radius-m); color: var(--wa-color-brand-on-quiet); font-size: var(--wa-font-size-s); font-weight: 600; text-decoration: none; }
.floating-talk .floating-talk-expand a:hover { background: var(--wa-color-brand-fill-quiet); }
.floating-talk .floating-talk-expand a:focus-visible { outline: var(--wa-focus-ring); outline-offset: 2px; }
.floating-talk .floating-talk-pending > :not(header) { margin: var(--wa-space-m); }
.floating-talk .floating-talk-pending progress { inline-size: calc(100% - 2 * var(--wa-space-m)); }
.floating-talk-support-symbol {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
}
/* 강사·학생이 보는 운영자 문의 창의 머리 — 브랜드색 띠에 둥근 헤드셋 표지·굵은 제목·안내 한 줄(SSOT 13절 "운영자 문의") */
.floating-talk .floating-talk-head-support {
	gap: var(--wa-space-s);
	padding-block: var(--wa-space-m);
	padding-inline: var(--wa-space-m) var(--wa-space-s);
	border-block-end: 0;
	background:
		radial-gradient(circle at 100% 0, color-mix(in srgb, var(--wa-color-brand-on-loud) 16%, transparent), transparent 55%),
		linear-gradient(135deg, var(--wa-color-brand-fill-loud), color-mix(in srgb, var(--wa-color-brand-fill-loud) 72%, var(--wa-color-brand-fill-normal)));
	color: var(--wa-color-brand-on-loud);
}
.floating-talk .floating-talk-head-support .floating-talk-support-symbol {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 2px solid color-mix(in srgb, var(--wa-color-brand-on-loud) 35%, transparent);
	border-radius: var(--wa-border-radius-circle);
	background: color-mix(in srgb, var(--wa-color-brand-on-loud) 18%, transparent);
	color: inherit;
	font-size: var(--wa-font-size-l);
}
.floating-talk .floating-talk-head-support h2 { color: inherit; font-size: var(--wa-font-size-l); font-weight: 700; line-height: 1.25; }
.floating-talk .floating-talk-head-support .floating-talk-title p { color: color-mix(in srgb, var(--wa-color-brand-on-loud) 88%, transparent); font-size: var(--wa-font-size-s); word-break: keep-all; overflow-wrap: anywhere; }
.floating-talk .floating-talk-head-support .floating-talk-icon { color: inherit; border-radius: var(--wa-border-radius-circle); }
.floating-talk .floating-talk-head-support .floating-talk-icon:hover { background: color-mix(in srgb, var(--wa-color-brand-on-loud) 18%, transparent); }
.floating-talk .floating-talk-head-support .floating-talk-icon[aria-pressed="true"] { background: color-mix(in srgb, var(--wa-color-brand-on-loud) 28%, transparent); color: inherit; }
.floating-talk .floating-talk-head-support .floating-talk-icon:focus-visible { outline: 2px solid var(--wa-color-brand-on-loud); outline-offset: -3px; }
.floating-talk-launcher {
	position: fixed;
	inset-inline-end: var(--wa-space-m);
	inset-block-end: var(--wa-space-m);
	z-index: 210;
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-s);
	max-inline-size: calc(100% - 2 * var(--wa-space-m));
	min-block-size: 3.5rem;
	padding: var(--wa-space-s) var(--wa-space-l);
	border: 1px solid var(--wa-color-brand-border-loud);
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	box-shadow: var(--wa-shadow-l);
	font: inherit;
	cursor: pointer;
}
.floating-talk-launcher > .fa-solid { font-size: var(--wa-font-size-xl); }
/* 리엔 카드 챗봇이 있는 브랜드 사이트 — 접은 단추가 카드를 가리지 않게 옆으로 비킨다(SSOT 13절 "운영자 문의") */
body:has(.site-chat) .floating-talk-launcher { inset-inline-end: calc(19rem + 2 * var(--wa-space-m)); }
/* 리엔 음성 대화(3D 리엔 카드)가 있는 화면도 같이 — 카드 너비만큼 비킨다 */
body:has(.site-voice) .floating-talk-launcher { inset-inline-end: calc(8.5rem + 2 * var(--wa-space-m)); }
/* 화면 아래 고정 탭이 있는 학생 화면 — 접은 단추는 탭 위에 둔다 */
@media (max-width: 60rem) {
	.site[data-site='student'] .floating-talk-launcher { inset-block-end: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 48rem) {
	.okay-study .floating-talk-launcher { inset-block-end: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
	body:has(.site-chat, .site-voice) .floating-talk-launcher { inset-inline: var(--wa-space-s) auto; justify-content: center; min-inline-size: 3.5rem; padding: 0; }
	body:has(.site-chat, .site-voice) .floating-talk-launcher > span:not(.floating-talk-unread) { display: none; }
}
.floating-talk-launcher:hover { background: var(--wa-color-brand-fill-normal); }
.floating-talk-launcher:focus-visible { outline: var(--wa-focus-ring); outline-offset: 3px; }
.floating-talk-unread {
	position: absolute;
	inset-block-start: calc(-1 * var(--wa-space-xs));
	inset-inline-end: calc(-1 * var(--wa-space-xs));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-inline-size: 1.75rem;
	block-size: 1.75rem;
	padding-inline: var(--wa-space-2xs);
	border: 2px solid var(--wa-color-surface-raised);
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-danger-fill-loud);
	color: var(--wa-color-danger-on-loud);
	font-size: var(--wa-font-size-s);
	font-weight: 700;
	line-height: 1;
}
/* A short directional cue from every menu click to the support window. */
.floating-talk-guide {
	position: fixed;
	inset: 0;
	z-index: 209;
	direction: ltr;
	pointer-events: none;
	overflow: hidden;
	background: color-mix(in srgb, var(--wa-color-brand-fill-loud) 4.4%, transparent);
	opacity: 1;
	transition: opacity 160ms ease;
}
.floating-talk-guide[data-fading='true'] { opacity: 0; }
.floating-talk-guide::before,
.floating-talk-guide > span {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: clamp(33rem, 72vw, 72rem);
	block-size: auto;
	aspect-ratio: 1;
	border-radius: var(--wa-border-radius-circle);
	transform: translate(calc(var(--talk-guide-to-x) - 50%), calc(var(--talk-guide-to-y) - 50%));
}
.floating-talk-guide::before {
	content: '';
	background: radial-gradient(circle, color-mix(in srgb, var(--wa-color-brand-fill-loud) 13.2%, transparent), transparent 70%);
}
.floating-talk-guide-trail {
	background: radial-gradient(circle, color-mix(in srgb, var(--wa-color-brand-fill-loud) 24.2%, transparent), color-mix(in srgb, var(--wa-color-brand-fill-loud) 8.8%, transparent) 45%, transparent 70%);
	animation: floating-talk-guide-travel 900ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.floating-talk-guide-ripple {
	box-sizing: border-box;
	border: 2px solid color-mix(in srgb, var(--wa-color-brand-fill-loud) 26.4%, transparent);
	background: radial-gradient(circle, transparent 48%, color-mix(in srgb, var(--wa-color-brand-fill-loud) 7.7%, transparent) 64%, transparent 70%);
	opacity: 0;
	animation: floating-talk-guide-ripple 1600ms ease-out 300ms 3 both;
}
.floating-talk-guide-ripple-middle { animation-delay: 420ms; }
.floating-talk-guide-ripple-delayed { animation-delay: 540ms; }
@keyframes floating-talk-guide-travel {
	0% { opacity: 0; transform: translate(calc(var(--talk-guide-from-x) - 50%), calc(var(--talk-guide-from-y) - 50%)) scale(0.18); }
	18% { opacity: 0.8; }
	80% { opacity: 0.65; }
	100% { opacity: 0; transform: translate(calc(var(--talk-guide-to-x) - 50%), calc(var(--talk-guide-to-y) - 50%)) scale(1.15); }
}
@keyframes floating-talk-guide-ripple {
	0% { opacity: 0; transform: translate(calc(var(--talk-guide-to-x) - 50%), calc(var(--talk-guide-to-y) - 50%)) scale(0.2); }
	20% { opacity: 0.7; }
	100% { opacity: 0; transform: translate(calc(var(--talk-guide-to-x) - 50%), calc(var(--talk-guide-to-y) - 50%)) scale(1.7); }
}
@media (prefers-reduced-motion: reduce) {
	.floating-talk-guide { transition: none; }
	.floating-talk-guide > span { animation: none; display: none; }
}
@media (max-width: 599px) {
	.floating-talk { inset-inline-end: var(--wa-space-xs); inset-block-end: var(--wa-space-xs); inline-size: calc(100% - 2 * var(--wa-space-xs)); max-block-size: calc(100dvh - 2 * var(--wa-space-xs)); }
	.floating-talk .floating-talk-body > .talk-room { block-size: min(36rem, calc(100dvh - 2 * var(--wa-space-xs))); }
	.floating-talk-support .floating-talk-body > .talk-room { block-size: min(54rem, calc(100dvh - 2 * var(--wa-space-xs))); }
}