@charset "utf-8";
/* ISVM 실시간 챗봇 위젯 (Phase 1) 스타일. chatWidget.jsp 에서 include. 설계: ISVM_CHATBOT_DESIGN.md */

:root {
	--isvm-brand: #4f46e5;
	--isvm-brand2: #6366f1;
}

/* 로그인 폼 강조(챗봇 '로그인하기' 클릭 시 좌측 로그인 영역으로 시선 유도) — 어두운 배경에서도 잘 보이도록 밝은 앰버 글로우 */
@keyframes isvmLoginFlash {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
		outline-color: rgba(255, 193, 7, 0);
	}
	25%, 75% {
		box-shadow: 0 0 0 4px rgba(255, 193, 7, .95);
		outline-color: rgba(255, 193, 7, 1);
	}
	50% {
		box-shadow: 0 0 22px 9px rgba(255, 193, 7, .9);
		outline-color: rgba(255, 193, 7, 1);
	}
}

.isvm-login-flash {
	outline: 3px solid rgba(255, 193, 7, 0) !important;
	outline-offset: 2px !important;
	animation: isvmLoginFlash .8s ease-in-out 4 !important;
	border-radius: 6px !important;
}

#isvmChatBtn {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--isvm-brand), var(--isvm-brand2));
	color: #fff;
	border: none;
	box-shadow: 0 8px 24px rgba(79, 70, 229, .45);
	cursor: pointer;
	font-size: 27px;
	z-index: 99999;
	display: none;
	transition: transform .15s ease, box-shadow .15s ease
}

#isvmChatBtn:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 12px 28px rgba(79, 70, 229, .55)
}

#isvmChatBtn:active {
	transform: scale(.96)
}

#isvmChatPanel {
	position: fixed;
	right: 24px;
	bottom: 96px;
	width: 420px;
	max-width: 94vw;
	height: 640px;
	max-height: 84vh;
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(17, 24, 39, .28);
	z-index: 99999;
	display: none;
	flex-direction: column;
	overflow: hidden;
	font-family: 'Noto Sans KR', -apple-system, 'Malgun Gothic', sans-serif;
	transform: translateY(16px) scale(.98);
	opacity: 0;
	transition: transform .18s ease, opacity .18s ease
}

#isvmChatPanel.open {
	display: flex;
	transform: translateY(0) scale(1);
	opacity: 1
}

#isvmChatPanel.big {
	width: 560px;
	height: 740px;
	max-height: 86vh
}

#isvmChatHead {
	background: linear-gradient(135deg, var(--isvm-brand), var(--isvm-brand2));
	color: #fff;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 12px
}

#isvmChatHead .ava {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex: 0 0 auto
}

#isvmChatHead .meta {
	flex: 1;
	line-height: 1.3
}

#isvmChatHead .meta .t {
	font-weight: 700;
	font-size: 15px
}

#isvmChatHead .meta .s {
	font-size: 11.5px;
	opacity: .85;
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 2px
}

#isvmChatHead .meta .s .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 2px rgba(74, 222, 128, .3)
}

#isvmChatHead .acts {
	display: flex;
	gap: 4px
}

#isvmChatHead .ico {
	cursor: pointer;
	background: none;
	border: none;
	color: #fff;
	opacity: .85;
	font-size: 18px;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	line-height: 1;
	transition: background .12s
}

#isvmChatHead .ico:hover {
	background: rgba(255, 255, 255, .18);
	opacity: 1
}

#isvmChatBody {
	flex: 1;
	overflow-y: auto;
	padding: 16px 14px;
	background: #f4f5fb
}

#isvmChatBody::-webkit-scrollbar {
	width: 7px
}

#isvmChatBody::-webkit-scrollbar-thumb {
	background: #d7d9e8;
	border-radius: 4px
}

.isvm-msg {
	margin: 10px 0;
	display: flex;
	align-items: flex-end;
	gap: 8px
}

.isvm-msg.user {
	justify-content: flex-end
}

.isvm-msg .av {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex: 0 0 auto;
	background: linear-gradient(135deg, var(--isvm-brand), var(--isvm-brand2));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px
}

.isvm-msg.user .av {
	display: none
}

.isvm-msg .bubble {
	max-width: 74%;
	padding: 10px 13px;
	border-radius: 15px;
	font-size: 13.5px;
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
	box-shadow: 0 1px 2px rgba(17, 24, 39, .06)
}

.isvm-msg.bot .bubble {
	background: #fff;
	color: #1f2937;
	border-bottom-left-radius: 5px
}

.isvm-msg.user .bubble {
	background: linear-gradient(135deg, var(--isvm-brand), var(--isvm-brand2));
	color: #fff;
	border-bottom-right-radius: 5px
}

.isvm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 4px 0 8px 36px
}

.isvm-chip {
	background: #fff;
	border: 1px solid #e3e6f3;
	color: #3730a3;
	border-radius: 20px;
	padding: 7px 13px;
	font-size: 12.5px;
	cursor: pointer;
	transition: all .12s;
	display: inline-flex;
	align-items: center;
	gap: 5px
}

.isvm-chip:hover {
	background: var(--isvm-brand);
	color: #fff;
	border-color: var(--isvm-brand);
	transform: translateY(-1px)
}

.isvm-feedback {
	display: flex;
	gap: 6px;
	padding: 2px 0 4px 44px;
	align-items: center
}

.isvm-feedback .fb-btn {
	background: none;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	padding: 2px 8px;
	font-size: 14px;
	cursor: pointer;
	transition: background .15s
}

.isvm-feedback .fb-btn:hover {
	background: #f3f4f6
}

.isvm-feedback .fb-done {
	font-size: 12px;
	color: #888
}

.vision-prod-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 8px
}

.vision-prod-link {
	display: block;
	background: #f0f4ff;
	border: 1px solid #c7d2fe;
	border-radius: 8px;
	padding: 7px 12px;
	font-size: 13px;
	color: #4f46e5;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.vision-prod-link:hover {
	background: #e0e7ff
}

.isvm-typing {
	display: inline-flex;
	gap: 4px;
	padding: 3px 2px
}

.isvm-typing i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #b9bdd6;
	display: inline-block;
	animation: isvmBlink 1.2s infinite
}

.isvm-typing i:nth-child(2) {
	animation-delay: .2s
}

.isvm-typing i:nth-child(3) {
	animation-delay: .4s
}

@keyframes isvmBlink {
	0%, 80%, 100% {
		opacity: .3;
		transform: translateY(0)
	}
	40% {
		opacity: 1;
		transform: translateY(-3px)
	}
}

#isvmChatProg {
	font-size: 11.5px;
	color: #8b8fa7;
	padding: 0 16px 4px 38px;
	min-height: 14px
}

@keyframes isvmBubblePop {
	0% {
		transform: scale(.7);
		opacity: 0
	}
	60% {
		transform: scale(1.06)
	}
	100% {
		transform: scale(1);
		opacity: 1
	}
}

@keyframes isvmBubblePulse {
	0%, 100% {
		box-shadow: 0 8px 22px rgba(17, 24, 39, .18);
		transform: scale(1)
	}
	50% {
		box-shadow: 0 12px 38px rgba(79, 70, 229, .75);
		transform: scale(1.05)
	}
}

#isvmChatFoot {
	border-top: 1px solid #eef0f6;
	padding: 10px 12px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: flex-end;
	background: #fff
}

#isvmChatAttach, #isvmVisionBtn {
	flex: 0 0 auto;
	width: 34px;
	height: 42px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 19px;
	color: #8b8fa7;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
}

#isvmVisionBtn {
	display: none;
}

#isvmChatInput {
	flex: 1;
	resize: none;
	border: 1px solid #dcdff0;
	border-radius: 22px;
	padding: 10px 14px;
	font-size: 13.5px;
	height: 42px;
	max-height: 104px;
	font-family: inherit;
	outline: none;
	transition: border-color .12s;
	box-sizing: border-box;
	line-height: 1.4;
	overflow-y: hidden
}

#isvmChatInput:focus {
	border-color: var(--isvm-brand)
}

#isvmChatSend {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: linear-gradient(135deg, var(--isvm-brand), var(--isvm-brand2));
	color: #fff;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .12s
}

#isvmChatSend:disabled {
	opacity: .5;
	cursor: default
}

#isvmChatHandoff {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 11.5px;
	color: #6b7280;
	background: #fff;
	border: none;
	border-top: 1px solid #f1f2f7;
	padding: 8px 0;
	cursor: pointer
}

#isvmChatHandoff:hover {
	color: var(--isvm-brand)
}

/* 입력 자동완성(FAQ 후보) 드롭다운 */
#isvmSuggest {
	display: none;
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 62px;
	background: #fff;
	border: 1px solid #e3e6f3;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(17, 24, 39, .16);
	max-height: 240px;
	overflow-y: auto;
	z-index: 6
}

#isvmSuggest.on {
	display: block
}

#isvmSuggest .sg {
	padding: 10px 13px;
	font-size: 13px;
	color: #1f2937;
	cursor: pointer;
	display: flex;
	gap: 8px;
	align-items: center;
	border-bottom: 1px solid #f1f2f7
}

#isvmSuggest .sg:last-child {
	border-bottom: none
}

#isvmSuggest .sg:hover {
	background: #f5f6fc
}

#isvmSuggest .sg .ic {
	flex: 0 0 auto
}

#isvmSuggest .sg .tx {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

#isvmSuggest .sg.search {
	color: var(--isvm-brand);
	font-weight: 600
}

@media (max-width: 480px) {
	/* 모바일: 패널 전체화면 (위치 인라인스타일을 덮어쓰기 위해 !important) */
	#isvmChatPanel {
		right: 0 !important;
		left: 0 !important;
		bottom: 0 !important;
		width: 100vw;
		max-width: 100vw;
		height: 88vh;
		max-height: 88vh;
		border-radius: 18px 18px 0 0
	}

	/* 하단 고정 네비게이션(.bottom-navigation) 위로 버튼 올림 */
	#isvmChatBtn {
		bottom: 74px !important
	}
}