/* ============================================================
 * SW Job Chatbot v2 — 슬라이드 드로어 (wjmc- 접두사로 충돌 방지)
 * ============================================================ */

/* 배경 오버레이 */
.wjmc-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .4);
	opacity: 0;
	transition: opacity .3s ease;
	z-index: 99998;
}
.wjmc-overlay.wjmc-overlay--on {
	opacity: 1;
}

/* 드로어 본체 — 기본은 화면 우측 바깥에 숨김 */
.wjmc-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 420px;
	max-width: 92vw;
	background: #fff;
	box-shadow: -6px 0 24px rgba(0, 0, 0, .18);
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.4, 0, .2, 1);
	z-index: 99999;
	display: flex;
	flex-direction: column;
	font-family: -apple-system, "Noto Sans KR", "Apple SD Gothic Neo", Roboto, sans-serif;
}
.wjmc-drawer.wjmc-open {
	transform: translateX(0);
}

/* 헤더 */
.wjmc-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	background: #1a73e8;
	color: #fff;
	flex: 0 0 auto;
}
.wjmc-bot-id {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.wjmc-bot-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex: 0 0 auto;
}
.wjmc-bot-avatar--emoji {
	background: #e8f0fe;
}
.wjmc-bot-name {
	font-weight: 600;
	font-size: 15.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wjmc-close {
	background: rgba(255, 255, 255, .15);
	border: none;
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background .15s;
}
.wjmc-close:hover {
	background: rgba(255, 255, 255, .3);
}

/* 대화 로그 */
.wjmc-log {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
	background: #f8f9fa;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 메시지 행 */
.wjmc-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	max-width: 88%;
}
.wjmc-row--bot {
	align-self: flex-start;
}
.wjmc-row--user {
	align-self: flex-end;
	flex-direction: row-reverse;
}
.wjmc-msg-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}
.wjmc-msg-avatar--emoji {
	background: #e8f0fe;
}
.wjmc-msg-col {
	min-width: 0;
}
.wjmc-msg-name {
	font-size: 11.5px;
	color: #5f6368;
	margin: 0 0 3px 2px;
}
.wjmc-bubble {
	padding: 10px 14px;
	border-radius: 16px;
	font-size: 14.5px;
	line-height: 1.5;
	word-break: break-word;
	white-space: pre-wrap;
}
.wjmc-row--bot .wjmc-bubble {
	background: #fff;
	border: 1px solid #e3e3e3;
	color: #202124;
	border-top-left-radius: 4px;
}
.wjmc-row--user .wjmc-bubble {
	background: #1a73e8;
	color: #fff;
	border-top-right-radius: 4px;
}

/* 입력 영역 */
.wjmc-input {
	flex: 0 0 auto;
	padding: 14px 16px;
	border-top: 1px solid #e3e3e3;
	background: #fff;
}
.wjmc-form {
	display: flex;
	gap: 8px;
}
.wjmc-field {
	flex: 1 1 auto;
	padding: 11px 14px;
	border: 1px solid #dadce0;
	border-radius: 24px;
	font-size: 14.5px;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.wjmc-field:focus {
	border-color: #1a73e8;
	box-shadow: 0 0 0 3px rgba(26, 115, 232, .15);
}
.wjmc-send,
.wjmc-submit {
	border: none;
	cursor: pointer;
	font-weight: 600;
	font-size: 14.5px;
	font-family: inherit;
	transition: background .15s, opacity .15s;
}
.wjmc-send {
	padding: 0 20px;
	border-radius: 24px;
	background: #1a73e8;
	color: #fff;
}
.wjmc-send:hover {
	background: #1765cc;
}
.wjmc-submit {
	width: 100%;
	padding: 13px;
	border-radius: 12px;
	background: #34a853;
	color: #fff;
}
.wjmc-submit:hover {
	background: #2d9248;
}
.wjmc-submit:disabled {
	opacity: .6;
	cursor: default;
}

@media (max-width: 600px) {
	.wjmc-drawer { width: 100vw; max-width: 100vw; }
	.wjmc-row { max-width: 92%; }
}

/* 다크모드 */
@media (prefers-color-scheme: dark) {
	.wjmc-drawer { background: #1f1f1f; }
	.wjmc-log { background: #181818; }
	.wjmc-row--bot .wjmc-bubble { background: #2a2a2a; border-color: #3c4043; color: #e8eaed; }
	.wjmc-input { background: #1f1f1f; border-color: #3c4043; }
	.wjmc-field { background: #2a2a2a; border-color: #3c4043; color: #e8eaed; }
	.wjmc-msg-name { color: #9aa0a6; }
}