/*
 * 리엔 카드 챗봇(x-widget.site.chatbot) — 화면 오른쪽 아래에 챗봇 그대로 작게(아이콘이 아니다). 사용자가 다가가면([data-open=true]) 창과 입력창이 커진다.
 * SSOT 23절 "리엔 카드 챗봇". 색은 토큰만(브랜드 색은 okay.css 가 Web Awesome brand 를 다시 정한다). 좁은 화면은 아래 고정 탭 막대 위에 놓는다.
 */
.site-chat {
	--site-chat-width: 19rem;
	position: fixed;
	inset-block-end: var(--wa-space-m);
	inset-inline-end: var(--wa-space-m);
	z-index: 40;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto auto;
	gap: var(--wa-space-xs);
	box-sizing: border-box;
	inline-size: var(--site-chat-width);
	max-inline-size: calc(100vw - 2 * var(--wa-space-m));
	padding: var(--wa-space-s);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-raised);
	box-shadow: var(--wa-shadow-l);
	font-size: var(--wa-font-size-s);
	cursor: pointer;
	transition: inline-size 220ms ease, box-shadow 220ms ease;
}
.site-chat[data-open='true'] { --site-chat-width: 24rem; cursor: auto; }

.site-chat-head { display: flex; align-items: center; gap: var(--wa-space-xs); min-inline-size: 0; }
.site-chat-icon {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
	padding: 0;
	border: 0;
	font: inherit;
	cursor: pointer;
}
.site-chat-name { display: grid; flex: 1; min-inline-size: 0; line-height: 1.3; }
.site-chat-name strong { font-size: var(--wa-font-size-s); }
.site-chat-name small { overflow: hidden; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-2xs); text-overflow: ellipsis; white-space: nowrap; }
.site-chat-shrink {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 2rem;
	block-size: 2rem;
	border: 0;
	border-radius: var(--wa-border-radius-pill);
	background: transparent;
	color: var(--wa-color-text-quiet);
	cursor: pointer;
}
.site-chat-shrink:hover { background: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-text-normal); }

/* 대화 — 작을 때는 마지막 몇 줄만, 커지면 높게 */
.site-chat-log {
	display: grid;
	align-content: start;
	gap: var(--wa-space-xs);
	max-block-size: 4.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	transition: max-block-size 220ms ease;
}
.site-chat[data-open='true'] .site-chat-log { block-size: clamp(12rem, 45vh, 24rem); max-block-size: none; }
.site-chat-msg { justify-self: start; max-inline-size: 92%; margin: 0; padding: var(--wa-space-2xs) var(--wa-space-s); border-radius: var(--wa-border-radius-m); background: var(--wa-color-neutral-fill-quiet); line-height: 1.55; overflow-wrap: anywhere; }
.site-chat-msg[data-role='user'] { justify-self: end; background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); white-space: pre-wrap; }
.site-chat-prose > :first-child { margin-block-start: 0; }
.site-chat-prose > :last-child { margin-block-end: 0; }
.site-chat-prose :is(p, ul, ol) { margin-block: var(--wa-space-2xs); }
.site-chat-prose :is(ul, ol) { padding-inline-start: var(--wa-space-l); }
.site-chat-prose a { color: var(--wa-color-brand-on-quiet); font-weight: var(--wa-font-weight-semibold); }
.site-chat-starters { display: grid; gap: var(--wa-space-2xs); }
.site-chat-starters button {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-2xs) var(--wa-space-s);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-surface-default);
	color: var(--wa-color-text-normal);
	font: inherit;
	text-align: start;
	cursor: pointer;
}
.site-chat-starters button:hover { border-color: var(--wa-color-brand-border-loud); color: var(--wa-color-brand-on-quiet); }
.site-chat-starters .fa-solid { color: var(--wa-color-brand-on-quiet); }
.site-chat-typing { display: inline-flex; gap: 3px; padding-block: 0.35em; }
.site-chat-typing i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--wa-color-text-quiet); animation: site-chat-dot 1s infinite ease-in-out; }
.site-chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.site-chat-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes site-chat-dot { 50% { opacity: 0.25; } }

/* 입력창 — 작을 때 한 줄, 다가가면 세 줄 높이로 커진다 */
.site-chat-form { display: flex; align-items: end; gap: var(--wa-space-2xs); padding: var(--wa-space-2xs); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m); background: var(--wa-color-surface-default); }
.site-chat-form:focus-within { border-color: var(--wa-color-brand-border-loud); }
.site-chat-form textarea {
	flex: 1;
	min-inline-size: 0;
	block-size: 1.6rem;
	padding: var(--wa-space-3xs) var(--wa-space-2xs);
	border: 0;
	background: transparent;
	color: var(--wa-color-text-normal);
	font: inherit;
	line-height: 1.5;
	resize: none;
	outline: none;
	transition: block-size 220ms ease;
}
.site-chat[data-open='true'] .site-chat-form textarea { block-size: 4.8rem; font-size: var(--wa-font-size-m); }
.site-chat-send {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 2rem;
	block-size: 2rem;
	border: 0;
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	cursor: pointer;
}
.site-chat-send:disabled { opacity: 0.45; cursor: default; }
.site-chat-note { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-2xs); text-align: center; }

/* 좁은 화면 — 아래 고정 탭 막대(okaystudy.css, 48rem 미만) 위에. 커지면 양옆을 거의 채운다 */
@media (max-width: 48rem) {
	.site-chat { inset-block-end: calc(4.25rem + env(safe-area-inset-bottom, 0px)); inset-inline-end: var(--wa-space-s); --site-chat-width: 16rem; }
	.site-chat[data-open='true'] { inset-inline-start: var(--wa-space-s); --site-chat-width: auto; max-inline-size: none; }
	.site-chat-log { max-block-size: 3rem; }
}
/* 닫힌 한 줄 모양 — 아이콘 + 입력창(SSOT 23절 "모양"). 시간표·수업 목록처럼 칸이 빽빽한 화면에서 내용을 가리지 않게 한다.
   OkayTeacher 는 첫 화면 넓은 화면을 뺀 모든 화면 · OkayStudy 는 수업 화면(강사 상세·수업 목록·예약) · 좁은 화면은 OkayTeacher 전부 */
:is(.okay-teacher:not(:has(.okay-home)), .okay-study:has(.teacher-detail, .my-bookings, .booking-confirmation)) .site-chat:not([data-open='true']) {
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto;
	align-items: center;
	padding: var(--wa-space-2xs);
}
:is(.okay-teacher:not(:has(.okay-home)), .okay-study:has(.teacher-detail, .my-bookings, .booking-confirmation)) .site-chat:not([data-open='true']) :is(.site-chat-log, .site-chat-name) { display: none; }
/* 좁은 화면 OkayTeacher — 접히면 동그란 아이콘 하나만(입력창 없음). 휴대폰에서 첫 화면의 [Start teaching]·FAQ 를 가리지 않게 한다.
   누르면 지금처럼 화면 양옆을 채우며 커진다(2026-11-04 사용자 결정, sonub_issues#6 — SSOT 23절 "리엔 카드 챗봇" 모양) */
@media (max-width: 48rem) {
	.okay-teacher .site-chat:not([data-open='true']) {
		--site-chat-width: auto;
		display: block;
		padding: var(--wa-space-2xs);
		border-radius: var(--wa-border-radius-pill);
	}
	.okay-teacher .site-chat:not([data-open='true']) :is(.site-chat-name, .site-chat-log, .site-chat-form, .site-chat-note) { display: none; }
	.okay-teacher .site-chat:not([data-open='true']) .site-chat-head { display: block; }
	.okay-teacher .site-chat:not([data-open='true']) .site-chat-icon {
		inline-size: 3rem;
		block-size: 3rem;
		border-radius: var(--wa-border-radius-pill);
		background: var(--wa-color-brand-fill-loud);
		color: var(--wa-color-brand-on-loud);
		font-size: var(--wa-font-size-l);
	}
}
@media (prefers-reduced-motion: reduce) {
	.site-chat, .site-chat-log, .site-chat-form textarea { transition: none; }
	.site-chat-typing i { animation: none; }
}