ANTOOZA-FRONTEND/app/styles/chat-dock.scss

// ─────────────────────────────────────────────────────────────
// 우측 고정 채팅 도크 (ChatDock) — 색/치수는 토큰 변수만 사용(하드코딩 금지)
// mobile(<1124px): 우측 fixed 드로어 + 플로팅 버튼 / desktop(≥1124px): grid chat 컬럼(접기=레일)
// #chat-room 본체 스타일은 (main)/chat/style.scss 에서 로드(도크가 함께 import)
// ─────────────────────────────────────────────────────────────

.chat-dock {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bg-page);

	// ── mobile 기본 = 우측 슬라이드 드로어(fixed) ──
	position: fixed;
	top: var(--header-h, 56px);
	right: 0;
	width: min(360px, 90vw);
	height: calc(100vh - var(--header-h, 56px));
	height: calc(100dvh - var(--header-h, 56px));
	z-index: 1100;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	border-left: 1px solid var(--border-default);
	box-shadow: none;

	&--open {
		transform: translateX(0);
		box-shadow: -4px 0 12px var(--shadow-color);
	}

	@media (prefers-reduced-motion: reduce) {
		transition: none;
	}

	// ── desktop = grid chat 컬럼(흐름 안) ──
	@media (min-width: 1124px) {
		position: relative;
		grid-area: chat;
		top: auto;
		right: auto;
		width: auto;
		height: auto;
		z-index: auto;
		transform: none;
		transition: none;
		box-shadow: none;
	}

	// 본체 래퍼 — #chat-room(height:100%)을 채우도록 flex 채움
	&__inner {
		display: flex;
		flex: 1;
		min-height: 0;
	}

	// 도크 안 #chat-room 은 좁은 폭에 맞춰 패딩·타이포 축소
	#chat-room {
		flex: 1;
		min-width: 0;
		padding: var(--sp-3);
		gap: var(--sp-2);

		// 좁은 폭: 참여자 수 버튼 타이포 축소
		.chat-room__count {
			padding: var(--sp-1);
			font-size: var(--fs-xs);
		}
	}

	// 헤더 주입 컨트롤(접기/닫기)
	&__ctrl {
		display: none;
		align-items: center;
		justify-content: center;
		width: var(--sp-6);
		height: var(--sp-6);
		border: none;
		background: transparent;
		color: var(--text-secondary);
		font-size: var(--fs-lg);
		cursor: pointer;
		border-radius: 0; // Twitch 플랫: 헤더 접기/닫기 버튼도 사각 (형제 아이콘 버튼과 일치)

		&:hover {
			background: var(--bg-icon);
			color: var(--text-primary);
		}

		// desktop: 접기만 노출 / mobile: 닫기만 노출
		&--collapse {
			@media (min-width: 1124px) {
				display: inline-flex;
			}
		}

		&--close {
			@media (max-width: 1123.98px) {
				display: inline-flex;
			}
		}
	}

	// ── 접힘 레일(desktop 전용) — 기본 숨김, --collapsed 에서만 노출 ──
	&__rail {
		display: none;
		flex-direction: column;
		align-items: center;
		gap: var(--sp-3);
		width: 100%;
		height: 100%;
		padding: var(--sp-4) 0;
		border: none;
		background: transparent;
		color: var(--text-secondary);
		cursor: pointer;

		&:hover {
			color: var(--az-accent);
		}

		svg {
			font-size: var(--fs-xl);
		}
	}

	&__rail-label {
		writing-mode: vertical-rl;
		text-orientation: upright;
		font-size: var(--fs-xs);
		letter-spacing: 0.1em;
	}

	// desktop 접힘: 본체 숨기고 레일 노출
	@media (min-width: 1124px) {
		&--collapsed {
			.chat-dock__inner {
				display: none;
			}

			.chat-dock__rail {
				display: flex;
			}
		}
	}

	// mobile 에서는 접기(레일) 개념 없음 — 본체 항상 표시
	@media (max-width: 1123.98px) {
		&__rail {
			display: none;
		}

		.chat-dock__inner {
			display: flex;
		}
	}
}

// ── 모바일 플로팅 토글 버튼(FAB) — desktop 미표시 ──
.chat-dock__fab {
	display: none;
	position: fixed;
	right: 16px;
	bottom: 16px;
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 50%;
	background: var(--az-accent);
	color: var(--btn-primary-text);
	font-size: var(--fs-xl);
	cursor: pointer;
	z-index: 1000;
	box-shadow: 0 var(--sp-1) var(--sp-4) var(--shadow-color);

	@media (max-width: 1123.98px) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	&:hover {
		background: var(--az-accent-hover);
	}
}

// 드로어 열림 시 FAB 숨김(오버레이와 중첩 방지)
.chat-dock--open ~ .chat-dock__fab {
	display: none;
}

// ── 모바일 오버레이 ──
.chat-dock__overlay {
	display: none;

	@media (max-width: 1123.98px) {
		position: fixed;
		top: var(--header-h, 56px);
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--overlay-color);
		z-index: 1050;
	}

	&--visible {
		@media (max-width: 1123.98px) {
			display: block;
		}
	}
}