/*
 * 바이브 코딩 위젯과 떠 있는 위젯 버튼 — 이전 사이트 VibeWidget.svelte · VibeWidgetDock.svelte 의 스타일을 옮겼다.
 * 모든 화면이 읽는다(layouts/app). 선택자는 .vibe-widget · .vibe-dock 아래로 좁힌다. 방향이 있는 속성은 논리 속성만.
 * 보라→분홍 그러데이션은 위젯의 얼굴이라 테마와 무관하게 둔다(이전 사이트와 같다).
 */

/* ── 위젯 ─────────────────────────────────────── */
.vibe-widget {
	--vw-height: 32rem;
	container-type: inline-size;
	display: grid;
	gap: var(--wa-space-s);
	padding: var(--wa-space-s);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 1.25rem;
	background: var(--wa-color-surface-default);
	color: var(--wa-color-text-normal);
	box-shadow: var(--wa-shadow-m);
}

.vibe-widget [x-cloak] {
	display: none !important;
}

.vw-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wa-space-xs) var(--wa-space-s);
	padding-inline: var(--wa-space-2xs);
}

.vw-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: linear-gradient(135deg, #8b5cf6, #ec4899);
	color: #fff;
	font-size: var(--wa-font-size-xs);
	font-weight: var(--wa-font-weight-bold);
	white-space: nowrap;
}

.vw-heading {
	display: grid;
	flex: 1 1 14rem;
	min-inline-size: 0;
}

.vw-heading strong {
	font-size: var(--wa-font-size-m);
}

.vw-heading small {
	font-size: var(--wa-font-size-xs);
	line-height: 1.5;
	color: var(--wa-color-text-quiet);
}

.vw-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-inline-start: auto;
}

.vw-tool {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.65rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 999px;
	background: var(--wa-color-surface-raised);
	color: inherit;
	font: inherit;
	font-size: var(--wa-font-size-xs);
	font-weight: var(--wa-font-weight-semibold);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.vw-tool:hover {
	border-color: color-mix(in srgb, #8b5cf6 45%, var(--wa-color-surface-border));
}

.vw-tool:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* 본문 — 좁으면 미리보기 위·채팅 아래, 넓으면 [채팅 | 미리보기] */
.vw-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wa-space-s);
}

.vw-stage {
	position: relative;
	overflow: hidden;
	block-size: 19rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 1rem;
	background: var(--wa-color-surface-raised);
}

/* 게임 무대는 테마와 무관하게 어둡다 — 캔버스 게임이 흰 바탕에 떠 보이지 않게 */
.vibe-widget[data-preset='game'] .vw-stage {
	border-color: #1e293b;
	background:
		radial-gradient(90% 90% at 0% 0%, rgba(139, 92, 246, 0.35), transparent 60%),
		radial-gradient(90% 90% at 100% 100%, rgba(236, 72, 153, 0.25), transparent 60%),
		#0b1020;
	color: #fff;
}

.vw-chat {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto auto;
	gap: var(--wa-space-xs);
	block-size: 20rem;
	min-block-size: 0;
}

@container (min-width: 44rem) {
	.vw-body {
		grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.2fr);
		block-size: var(--vw-height);
	}

	.vw-stage {
		order: 2;
		block-size: auto;
	}

	.vw-chat {
		block-size: auto;
	}
}

.vw-frame {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	background: #fff;
}

/* 게임에 키보드를 넘기는 덮개 — 한 번 누르면 사라진다 */
.vw-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.4rem;
	padding: var(--wa-space-m);
	border: 0;
	background: rgba(6, 10, 24, 0.45);
	backdrop-filter: blur(2px);
	color: #fff;
	font: inherit;
	text-align: center;
	white-space: normal;
	cursor: pointer;
}

.vw-play-icon {
	display: grid;
	place-items: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: 50%;
	background: linear-gradient(135deg, #8b5cf6, #ec4899);
	box-shadow: 0 12px 30px -10px #ec4899;
	font-size: 1.4rem;
	transition: transform var(--wa-transition-fast);
}

.vw-play:hover .vw-play-icon {
	transform: scale(1.08);
}

.vw-play small {
	max-inline-size: 22rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.vw-busy {
	position: absolute;
	inset-block-start: 0.6rem;
	inset-inline-end: 0.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: rgba(6, 10, 24, 0.72);
	color: #fff;
	font-size: var(--wa-font-size-xs);
	font-weight: var(--wa-font-weight-semibold);
}

.vw-errors {
	position: absolute;
	inset-inline: 0.6rem;
	inset-block-end: 0.6rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid #fca5a5;
	border-radius: 0.8rem;
	background: #fee2e2;
	color: #7f1d1d;
	font-size: var(--wa-font-size-xs);
}

.vw-errors button {
	padding: 0.3rem 0.7rem;
	border: 0;
	border-radius: 999px;
	background: #dc2626;
	color: #fff;
	font: inherit;
	font-weight: var(--wa-font-weight-bold);
	white-space: normal;
	cursor: pointer;
}

.vw-empty {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 0.6rem;
	block-size: 100%;
	padding: var(--wa-space-l);
	box-sizing: border-box;
	text-align: center;
}

.vw-empty p {
	max-inline-size: 22rem;
	margin: 0;
	font-size: var(--wa-font-size-s);
	line-height: 1.6;
	opacity: 0.85;
}

.vw-empty-icon {
	display: grid;
	place-items: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 1rem;
	background: linear-gradient(135deg, #8b5cf6, #ec4899);
	color: #fff;
	font-size: 1.4rem;
}

.vw-spin {
	inline-size: 0.9rem;
	block-size: 0.9rem;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-block-start-color: #fff;
	border-radius: 50%;
	animation: vw-spin 0.8s linear infinite;
}

.vibe-widget:not([data-preset='game']) .vw-empty .vw-spin {
	border-color: color-mix(in srgb, #8b5cf6 30%, transparent);
	border-block-start-color: #8b5cf6;
}

.vw-spin-big {
	inline-size: 2rem;
	block-size: 2rem;
	border-width: 3px;
}

@keyframes vw-spin {
	to {
		transform: rotate(360deg);
	}
}

/* 채팅 */
.vw-lines {
	display: grid;
	align-content: start;
	gap: 0.55rem;
	min-block-size: 0;
	margin: 0;
	padding: var(--wa-space-xs);
	overflow-y: auto;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 1rem;
	background: var(--wa-color-surface-raised);
	list-style: none;
}

.vw-examples {
	display: grid;
	gap: 0.45rem;
}

.vw-examples-title {
	font-size: var(--wa-font-size-xs);
	font-weight: var(--wa-font-weight-semibold);
	color: var(--wa-color-text-quiet);
}

.vw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.vw-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.75rem;
	border: 1px solid color-mix(in srgb, #8b5cf6 30%, var(--wa-color-surface-border));
	border-radius: 999px;
	background: color-mix(in srgb, #8b5cf6 10%, var(--wa-color-surface-default));
	color: inherit;
	font: inherit;
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
	white-space: normal;
	cursor: pointer;
}

.vw-chip:hover {
	border-color: #8b5cf6;
}

.vw-chip:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.vw-line {
	display: grid;
	gap: 0.2rem;
	max-inline-size: 92%;
}

.vw-line[data-role='user'] {
	justify-self: end;
	justify-items: end;
}

.vw-line[data-role='assistant'] {
	justify-self: start;
}

.vw-who {
	font-size: 0.7rem;
	font-weight: var(--wa-font-weight-semibold);
	color: var(--wa-color-text-quiet);
}

.vw-line p {
	margin: 0;
	padding: 0.5rem 0.75rem;
	border-radius: 0.9rem;
	font-size: var(--wa-font-size-s);
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.vw-line[data-role='user'] p {
	border-end-end-radius: 0.3rem;
	background: linear-gradient(135deg, #7c3aed, #db2777);
	color: #fff;
}

.vw-line[data-role='assistant'] p {
	border: 1px solid var(--wa-color-surface-border);
	border-end-start-radius: 0.3rem;
	background: var(--wa-color-surface-default);
}

.vw-applied {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.72rem;
	font-weight: var(--wa-font-weight-semibold);
	color: #059669;
}

.vw-dots {
	display: inline-flex;
	gap: 0.2rem;
	margin-inline-end: 0.35rem;
	vertical-align: middle;
}

.vw-dots i {
	inline-size: 0.35rem;
	block-size: 0.35rem;
	border-radius: 50%;
	background: #8b5cf6;
	animation: vw-bounce 1s ease-in-out infinite;
}

.vw-dots i:nth-child(2) {
	animation-delay: 0.15s;
}

.vw-dots i:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes vw-bounce {
	0%,
	80%,
	100% {
		opacity: 0.35;
		transform: translateY(0);
	}

	40% {
		opacity: 1;
		transform: translateY(-3px);
	}
}

.vw-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.4rem;
	margin: 0;
	font-size: var(--wa-font-size-xs);
	line-height: 1.5;
	color: var(--wa-color-text-quiet);
}

.vw-notice > i {
	flex: none;
	margin-block-start: 0.2rem;
	color: #d97706;
}

.vw-notice > span {
	flex: 1;
	min-inline-size: 10rem;
}

.vw-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 0.5rem;
}

.vw-form textarea {
	box-sizing: border-box;
	min-block-size: 2.9rem;
	max-block-size: 7rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 0.9rem;
	background: var(--wa-color-surface-raised);
	color: inherit;
	font: inherit;
	font-size: var(--wa-font-size-s);
	line-height: 1.5;
	resize: vertical;
}

.vw-form textarea:focus-visible {
	outline: 2px solid #8b5cf6;
	outline-offset: 1px;
}

.vw-send {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.65rem 1rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #7c3aed, #db2777);
	box-shadow: 0 10px 22px -14px #7c3aed;
	color: #fff;
	font: inherit;
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-bold);
	white-space: nowrap;
	cursor: pointer;
}

.vw-send[data-stop] {
	background: #334155;
	box-shadow: none;
}

.vw-send:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── 떠 있는 위젯 ───────────────────────────────── */
.vibe-dock-fab {
	position: fixed;
	inset-block-end: max(1.25rem, env(safe-area-inset-bottom));
	inset-inline-end: 1.25rem;
	z-index: 55;
	display: grid;
	place-items: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border: 0;
	border-radius: 1.1rem;
	background: linear-gradient(135deg, #8b5cf6, #ec4899);
	box-shadow: 0 12px 30px -10px rgba(139, 92, 246, 0.8);
	color: #fff;
	font-size: 1.3rem;
	cursor: pointer;
	transition: transform var(--wa-transition-fast);
}

.vibe-dock-fab:hover {
	transform: translateY(-2px) scale(1.03);
}

.vibe-dock-fab:focus-visible {
	outline: 3px solid #c4b5fd;
	outline-offset: 3px;
}

.vibe-dock-fab[aria-expanded='true'] {
	background: #334155;
	box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.7);
}

.vibe-dock-panel {
	position: fixed;
	inset-block-end: 5.25rem;
	inset-inline-end: 1.25rem;
	z-index: 55;
	inline-size: min(52rem, calc(100vw - 2.5rem));
	max-block-size: calc(100dvh - 7rem);
	overflow: auto;
	border-radius: 1.4rem;
	box-shadow: 0 30px 80px -30px rgba(15, 23, 42, 0.55);
}

.vibe-dock-panel .vibe-widget {
	--vw-height: min(30rem, calc(100dvh - 12rem));
}

@media (max-width: 1099px) {
	.vibe-dock-fab {
		inset-block-end: max(1rem, env(safe-area-inset-bottom));
		inset-inline-end: 1rem;
	}

	.vibe-dock-panel {
		inset-inline: 0.75rem;
		inset-block-end: 4.75rem;
		inline-size: auto;
	}

	/* 챗봇을 열면 그 위에 떠 있지 않게 한다 */
	body[data-chat-open='true'] .vibe-dock {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vw-spin,
	.vw-dots i {
		animation: none;
	}

	.vibe-dock-fab,
	.vw-play-icon {
		transition: none;
	}
}