/*
 * 리엔 음성 대화(x-widget.site.voice-chat — okaystudy.com, SSOT 23절 "리엔 음성 대화").
 * 작을 때: 화면 오른쪽 아래(RTL 은 왼쪽 아래)에 리엔 3D 모델 카드 하나와 이름 띠. 커지면([data-open=true]): 화면 가운데 큰 대화 화면 —
 * 넓은 화면은 왼쪽 리엔 · 오른쪽 대화, 좁은 화면(48rem 미만)은 화면 전체(위 리엔 · 아래 대화). 색은 토큰만.
 * 머리에는 [대화 언어] [공부할 주제] 두 고르기 단추. 대화는 말하기가 먼저 — 가운데 큰 마이크, 글 입력칸은 [글로 입력]을 눌러야 열린다.
 */
.site-voice {
	--site-voice-w: 8.5rem;
	--site-voice-h: 10.5rem;
	position: fixed;
	inset-block-end: var(--wa-space-m);
	inset-inline-end: var(--wa-space-m);
	z-index: 40;
	display: grid;
	inline-size: var(--site-voice-w);
	color: var(--wa-color-text-normal);
	font-size: var(--wa-font-size-m);
	line-height: 1.6;
}
.site-voice,
.site-voice * { box-sizing: border-box; }
.site-voice :is(button, a):focus-visible { outline: var(--wa-focus-ring); outline-offset: 3px; }

/* 리엔 무대 — 3D 캔버스가 받기 전에는 아이콘을 보인다 */
.site-voice-stage {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: var(--site-voice-h);
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--wa-color-brand-border-quiet);
	border-radius: var(--wa-border-radius-l);
	background: radial-gradient(circle at 50% 30%, var(--wa-color-brand-fill-quiet), var(--wa-color-surface-raised) 75%);
	box-shadow: var(--wa-shadow-l);
	color: var(--wa-color-brand-on-quiet);
	font: inherit;
	cursor: pointer;
	transition: transform 160ms ease, box-shadow 160ms ease;
}
.site-voice:not([data-open='true']) .site-voice-stage:hover { transform: translateY(-3px); box-shadow: var(--wa-shadow-l), 0 0 0 3px var(--wa-color-brand-border-quiet); }
.site-voice-stage:focus-visible { outline: var(--wa-focus-ring); outline-offset: 3px; }
.site-voice-fallback { font-size: var(--wa-font-size-3xl); opacity: 0.6; }
.site-voice-stage:has(.lyen-avatar.is-ready) .site-voice-fallback { display: none; }
.site-voice .lyen-avatar { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; transition: opacity 160ms ease; }
.site-voice .lyen-avatar.is-ready { opacity: 1; }
.site-voice-badge {
	position: absolute;
	inset-block-end: var(--wa-space-2xs);
	inset-inline: var(--wa-space-2xs);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wa-space-2xs);
	padding: var(--wa-space-3xs) var(--wa-space-xs);
	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-2xs);
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.3;
	text-align: center;
}
.site-voice-status {
	margin: 0;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
	line-height: 1.5;
	text-align: center;
}
.site-voice-status span { display: block; min-inline-size: 0; max-block-size: 4.5em; overflow-y: auto; overflow-wrap: break-word; }

/* 큰 대화 화면 */
.site-voice[data-open='true'] {
	--site-voice-h: 100%;
	z-index: 60;
	inset-block: 50% auto;
	inset-inline: max(var(--wa-space-m), calc((100vw - 70rem) / 2));
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	grid-template-rows: minmax(0, 1fr);
	inline-size: auto;
	block-size: min(46rem, calc(100dvh - 3rem));
	transform: translateY(-50%);
	overflow: hidden;
	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), 0 0 0 100vmax var(--wa-color-overlay-modal);
}
.site-voice[data-open='true'] .site-voice-stage { min-block-size: 0; border: 0; border-inline-end: 1px solid var(--wa-color-surface-border); border-radius: 0; box-shadow: none; cursor: default; }
.site-voice[data-open='true'] .lyen-avatar { inset-block-start: -10rem; block-size: calc(100% + 10rem); }
.site-voice-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); min-inline-size: 0; min-block-size: 0; overflow: hidden; }
.site-voice-panel > :is(.site-voice-pick, .site-voice-talk) { grid-row: 2; grid-column: 1; }

.site-voice-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wa-space-s); min-inline-size: 0; padding: var(--wa-space-l); border-block-end: 1px solid var(--wa-color-surface-border); }
.site-voice-name { display: grid; gap: var(--wa-space-3xs); flex: 1 1 15rem; min-inline-size: 0; line-height: 1.4; }
.site-voice-name strong { font-size: var(--wa-font-size-xl); }
.site-voice-name small { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); overflow-wrap: break-word; }
.site-voice-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--wa-space-2xs); margin-inline-start: auto; }
.site-voice-choice,
.site-voice-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wa-space-2xs);
	flex: none;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	padding-inline: var(--wa-space-xs);
	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;
	cursor: pointer;
}
.site-voice-icon { padding: 0; color: var(--wa-color-text-quiet); }
.site-voice-icon:hover { border-color: var(--wa-color-brand-border-loud); color: var(--wa-color-brand-on-quiet); }
/* 고르기 단추 — 작은 이름(대화 언어 · 공부할 주제) 위, 고른 값 아래. 지금 고르는 단계는 브랜드 테두리, 아직 안 고른 값은 브랜드 글자 */
.site-voice-choice { gap: var(--wa-space-xs); padding-inline: var(--wa-space-s) var(--wa-space-m); text-align: start; }
.site-voice-choice > .fa-solid { color: var(--wa-color-brand-on-quiet); font-size: var(--wa-font-size-l); }
.site-voice-choice > span { display: grid; min-inline-size: 0; line-height: 1.25; }
.site-voice-choice small { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-2xs); }
.site-voice-choice b { max-inline-size: 10rem; overflow: hidden; font-size: var(--wa-font-size-s); font-weight: var(--wa-font-weight-semibold); text-overflow: ellipsis; white-space: nowrap; }
.site-voice-choice[data-empty='true'] b { color: var(--wa-color-brand-on-quiet); }
.site-voice-choice[data-current='true'] { border-color: var(--wa-color-brand-border-loud); background: var(--wa-color-brand-fill-quiet); box-shadow: inset 0 0 0 1px var(--wa-color-brand-border-loud); }
.site-voice-choice:hover:not(:disabled) { border-color: var(--wa-color-brand-border-loud); }
.site-voice-choice:disabled { opacity: 0.5; cursor: default; }

/* ① 대화 언어 고르기 */
.site-voice-pick { display: grid; align-content: start; gap: var(--wa-space-l); min-block-size: 0; padding: var(--wa-space-l); overflow-y: auto; overscroll-behavior: contain; }
.site-voice-pick-lead {
	margin: 0;
	padding: var(--wa-space-s) var(--wa-space-m);
	border-inline-start: 4px solid var(--wa-color-brand-border-loud);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
	font-size: var(--wa-font-size-l);
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.5;
}
.site-voice-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--wa-space-xs); }
.site-voice-langs button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-xs);
	min-block-size: 3rem;
	padding: var(--wa-space-xs) var(--wa-space-s);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-default);
	color: var(--wa-color-text-normal);
	font: inherit;
	font-size: var(--wa-font-size-m);
	text-align: start;
	cursor: pointer;
}
.site-voice-langs button .fa-solid { color: var(--wa-color-brand-on-quiet); font-size: var(--wa-font-size-xs); }
.site-voice-langs button:hover { border-color: var(--wa-color-brand-border-loud); }
.site-voice-langs button[data-chosen='true'] { border-color: var(--wa-color-brand-border-loud); box-shadow: inset 0 0 0 1px var(--wa-color-brand-border-loud); }
/* ② 공부할 주제 — 아이콘 · 이름(브라우저 언어) · 고른 대화 언어의 이름 */
.site-voice-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--wa-space-xs); }
.site-voice-topics button {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	align-items: center;
	column-gap: var(--wa-space-s);
	block-size: auto;
	min-block-size: 3.5rem;
	overflow: visible;
	white-space: normal;
	padding: var(--wa-space-xs) var(--wa-space-s);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-default);
	color: var(--wa-color-text-normal);
	font: inherit;
	text-align: start;
	cursor: pointer;
}
.site-voice-topics button > .fa-solid { display: grid; place-items: center; 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); }
.site-voice-topics button > span { display: grid; gap: var(--wa-space-3xs); min-inline-size: 0; line-height: 1.35; overflow-wrap: break-word; }
.site-voice-topics b { font-weight: var(--wa-font-weight-semibold); }
.site-voice-topics small { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); line-height: 1.35; overflow-wrap: break-word; }
.site-voice-topics button:hover,
.site-voice-topics button[data-chosen='true'] { border-color: var(--wa-color-brand-border-loud); }
.site-voice-note { display: block; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); line-height: 1.5; }

/* ② 대화 — 손님이면 맨 위에 회원 가입 띠 */
/* 가입 띠의 x-show 여부와 무관하게 로그만 늘고 줄어든다. 입력부는 항상 자기 높이를 가진다. */
.site-voice-talk { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 0; overflow: hidden; }
.site-voice-join {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	flex: none;
	gap: var(--wa-space-xs);
	margin: var(--wa-space-m) var(--wa-space-l) 0;
	padding: var(--wa-space-s);
	border: 1px solid var(--wa-color-brand-border-quiet);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
}
.site-voice-signup {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	min-block-size: 2.75rem;
	margin-block-start: var(--wa-space-2xs);
	padding: var(--wa-space-2xs) var(--wa-space-m);
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.4;
	text-decoration: none;
}
.site-voice-join .site-voice-signup { margin: 0; }
.site-voice-signup:hover { background: var(--wa-color-brand-fill-normal); }
.site-voice-signup:focus-visible { outline: var(--wa-focus-ring); outline-offset: 2px; }
.site-voice-log { display: grid; align-content: start; gap: var(--wa-space-m); flex: 1 1 0; min-inline-size: 0; min-block-size: 0; padding: var(--wa-space-l); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.site-voice-msg { justify-self: start; min-inline-size: 0; max-inline-size: 94%; margin: 0; padding: var(--wa-space-s) var(--wa-space-m); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-default); color: var(--wa-color-text-normal); font-size: var(--wa-font-size-m); line-height: 1.75; overflow-wrap: break-word; }
.site-voice-msg[data-role='user'] { justify-self: end; background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); }
.site-voice-msg[data-role='user'] > span { white-space: pre-wrap; }
.site-voice-prose > :first-child { margin-block-start: 0; }
.site-voice-prose > :last-child { margin-block-end: 0; }
.site-voice-prose :is(p, ul, ol) { margin-block: var(--wa-space-2xs); }
.site-voice-prose :is(ul, ol) { padding-inline-start: var(--wa-space-l); }
.site-voice-prose a { color: var(--wa-color-brand-on-quiet); font-weight: var(--wa-font-weight-semibold); }
.site-voice-prose :is(pre, table) { max-inline-size: 100%; overflow-x: auto; }
.site-voice-prose a { overflow-wrap: anywhere; }
.site-voice-starters { display: grid; gap: var(--wa-space-2xs); }
.site-voice-starters button {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-xs) var(--wa-space-s);
	border: 1px solid var(--wa-color-surface-border);
	min-block-size: 2.75rem;
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-default);
	color: var(--wa-color-text-normal);
	font: inherit;
	text-align: start;
	cursor: pointer;
}
.site-voice-starters button:hover { border-color: var(--wa-color-brand-border-loud); color: var(--wa-color-brand-on-quiet); }
.site-voice-starters .fa-solid { color: var(--wa-color-brand-on-quiet); }
.site-voice-typing { display: inline-flex; gap: 3px; padding-block: 0.35em; }
.site-voice-typing i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--wa-color-text-quiet); animation: site-voice-dot 1s infinite ease-in-out; }
.site-voice-typing i:nth-child(2) { animation-delay: 0.15s; }
.site-voice-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes site-voice-dot { 50% { opacity: 0.25; } }

/* 말하기가 먼저 — 가운데 큰 마이크와 그 아래 음성 상태, 끝에 작은 [글로 입력]. 긴 대화에서도 이 칸은 높이를 유지한다 */
.site-voice-composer { display: grid; gap: var(--wa-space-xs); flex: none; min-inline-size: 0; padding: var(--wa-space-m) var(--wa-space-l); border-block-start: 1px solid var(--wa-color-surface-border); background: var(--wa-color-surface-raised); }
.site-voice-composer > .site-voice-note { text-align: center; }
.site-voice-speak { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: '. mic type' 'status status status'; align-items: center; gap: var(--wa-space-xs); min-inline-size: 0; }
.site-voice-speak .site-voice-mic { grid-area: mic; }
.site-voice-speak .site-voice-status { grid-area: status; }
.site-voice-type {
	grid-area: type;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	min-block-size: 2.5rem;
	padding: var(--wa-space-3xs) var(--wa-space-s);
	border: 1px solid transparent;
	border-radius: var(--wa-border-radius-pill);
	background: transparent;
	color: var(--wa-color-text-quiet);
	font: inherit;
	font-size: var(--wa-font-size-xs);
	cursor: pointer;
}
.site-voice-type:hover,
.site-voice-type[aria-pressed='true'] { border-color: var(--wa-color-surface-border); color: var(--wa-color-brand-on-quiet); }
.site-voice-type:focus-visible { outline: var(--wa-focus-ring); outline-offset: 2px; }
.site-voice-form { display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem; align-items: center; gap: var(--wa-space-xs); min-inline-size: 0; margin: 0; padding: var(--wa-space-2xs) var(--wa-space-2xs) var(--wa-space-2xs) var(--wa-space-s); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-default); }
.site-voice-form:focus-within { border-color: var(--wa-color-brand-border-loud); box-shadow: 0 0 0 2px var(--wa-color-brand-fill-quiet); }
.site-voice-form textarea { inline-size: 100%; min-inline-size: 0; block-size: 2.75rem; min-block-size: 2.75rem; margin: 0; padding: var(--wa-space-2xs); border: 0; border-radius: var(--wa-border-radius-s); background: transparent; color: var(--wa-color-text-normal); font: inherit; font-size: var(--wa-font-size-m); line-height: 1.5; resize: none; outline: none; box-shadow: none; }
.site-voice-form textarea::placeholder { color: var(--wa-color-text-quiet); opacity: 1; }
.site-voice-form textarea:focus { outline: none; }
.site-voice-mic,
.site-voice-send { display: inline-grid; place-items: center; flex: none; border: 0; border-radius: var(--wa-border-radius-pill); cursor: pointer; }
.site-voice-mic { inline-size: 4.5rem; block-size: 4.5rem; background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); font-size: var(--wa-font-size-2xl); box-shadow: var(--wa-shadow-m); transition: transform 160ms ease; }
.site-voice-mic:hover { transform: scale(1.04); }
.site-voice-mic[data-active='true'] { background: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud); }
/* 듣는 중 — 마이크 둘레가 숨 쉬듯 퍼진다 */
.site-voice-mic[data-listening='true'] { animation: site-voice-listen 1.4s ease-out infinite; }
@keyframes site-voice-listen { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wa-color-danger-fill-loud) 45%, transparent); } to { box-shadow: 0 0 0 1rem color-mix(in srgb, var(--wa-color-danger-fill-loud) 0%, transparent); } }
.site-voice-send { inline-size: 2.75rem; block-size: 2.75rem; background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); font-size: var(--wa-font-size-m); }
.site-voice-send:disabled { opacity: 0.45; cursor: default; }
:is(.site-voice-mic, .site-voice-send):focus-visible { outline: var(--wa-focus-ring); outline-offset: 2px; }

/* 좁은 화면 — 작을 때는 아래 고정 탭 막대(okaystudy.css) 위에 작게, 커지면 화면 전체(위 리엔 · 아래 대화) */
@media (max-width: 48rem) {
	.site-voice { --site-voice-w: 5.75rem; --site-voice-h: 7rem; inset-block-end: calc(4.25rem + env(safe-area-inset-bottom, 0px)); inset-inline-end: var(--wa-space-s); }
	.site-voice-badge .fa-solid { display: none; }
	.site-voice[data-open='true'] { inset: 0; block-size: 100dvh; transform: none; grid-template-columns: 1fr; grid-template-rows: clamp(5rem, 16dvh, 8.5rem) minmax(0, 1fr); border: 0; border-radius: 0; }
	.site-voice[data-open='true'] .site-voice-stage { border-inline-end: 0; border-block-end: 1px solid var(--wa-color-surface-border); }
	.site-voice[data-open='true'] .lyen-avatar { inset-block-start: -6.5rem; inset-inline: 0; inline-size: 18rem; max-inline-size: 100%; block-size: 26rem; margin-inline: auto; }
	.site-voice-head { gap: var(--wa-space-xs); padding: var(--wa-space-s) var(--wa-space-m); }
	.site-voice-name { flex-basis: 12rem; }
	.site-voice-name strong { font-size: var(--wa-font-size-l); }
	.site-voice-pick, .site-voice-log { padding: var(--wa-space-m); }
	.site-voice-join { margin: var(--wa-space-s) var(--wa-space-m) 0; }
	.site-voice-composer { padding: var(--wa-space-s) var(--wa-space-m); padding-block-end: calc(var(--wa-space-s) + env(safe-area-inset-bottom, 0px)); }
	.site-voice-langs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-voice-topics { grid-template-columns: minmax(0, 1fr); }
	.site-voice-tools { inline-size: 100%; }
	.site-voice-choice { flex: 1 1 8rem; }
	.site-voice-choice b { max-inline-size: none; }
	.site-voice-mic { inline-size: 4rem; block-size: 4rem; }
}
@media (max-height: 44rem) and (max-width: 48rem) {
	.site-voice-head .site-voice-name small { display: none; }
	.site-voice-head, .site-voice-composer { padding-block: var(--wa-space-xs); }
}
@media (max-height: 36rem) and (max-width: 64rem) and (orientation: landscape) {
	.site-voice[data-open='true'] { inset: 0; block-size: 100dvh; transform: none; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); grid-template-rows: minmax(0, 1fr); border: 0; border-radius: 0; }
	.site-voice[data-open='true'] .site-voice-stage { border-block-end: 0; border-inline-end: 1px solid var(--wa-color-surface-border); }
	.site-voice[data-open='true'] .lyen-avatar { inset-block-start: -5rem; inline-size: 100%; block-size: calc(100% + 5rem); }
	.site-voice-head, .site-voice-composer { padding-block: var(--wa-space-xs); }
	.site-voice-head .site-voice-name small { display: none; }
	.site-voice-join { padding-block: var(--wa-space-2xs); }
}
@media (prefers-reduced-motion: reduce) {
	.site-voice-stage, .site-voice .lyen-avatar { transition: none; }
	.site-voice-typing i { animation: none; }
	.site-voice-mic { transition: none; }
	.site-voice-mic[data-listening='true'] { animation: none; box-shadow: 0 0 0 3px var(--wa-color-danger-border-loud); }
	.site-voice-mic:hover { transform: none; }
	.site-voice:not([data-open='true']) .site-voice-stage:hover { transform: none; }
}