@charset "utf-8";
/* CSS Document */


/* 공통 */

*{
	margin:0;
	padding:0;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, figure, fieldset, input, th, td{margin:0;padding:0;}
/*
*:focus {
    outline: 0;
}
*/
.makechat :focus-visible {
    outline: 5px solid #666;
}

html,body{
	height: 100%;
	width: 100%;
	position: fixed;
	-webkit-overflow-scrolling: touch;
 }

img{border:none;}

.clear{clear:both;}

.btn{cursor:pointer;}

.click{cursor:default;}

button{
	border: none;
}

body{
	font-family: '맑은 고딕', 'notokr-regular', sans-serif;
}

.makechat {
    text-size-adjust: 100%;
    font-feature-settings: normal;
    font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-variation-settings: normal !important;
    line-height: 1.5;
    tab-size: 4;
	display:none;
	letter-spacing:-1px;
}

.makechat,.makechat_msg{
	background:#343541 !important;
}

.makechat_msg{
	padding-left: 20px;
	padding-right: 20px;
	letter-spacing:0;
	font-size:0.875rem;
}

/* 개행 표시 */
.makechat_msg_item_msg{
	white-space: pre-wrap;
}


/* 상단 */
.makechat_top{
    display: flex; /* Flexbox 사용 */
    justify-content: space-between; /* 양 끝에 요소 배치 */
    align-items: center; /* 세로 중앙 정렬 */
	color:#FFF;
	font-weight:bold;
    padding-left: 25px; /* 여백 추가 */
    padding-right: 25px; /* 여백 추가 */
}

.makechat_top_logo {
    font-size:16px;
}

.makechat_btn_shareLink {
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: background-color 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.share-button i {
  font-size: 20px;
}

.share-button:hover {
  background-color: rgba(0, 123, 255, 0.1);
}

#makechat_btn_close {
    background: none;
    border: none;
    cursor: pointer;
}

#makechat_btn_close i {
    font-size: 20px; /* 아이콘 크기 */
}


/* 하단 */
.makechat_bottom{
	background:#FFF;
	padding-top:10px;
	padding-bottom:10px;
}


.makechat_input textarea{
	width:100%;
	height:30px;
	line-height:20px;
	margin-left:5px;
	margin-right:5px;
	color:#FFF;
	font-size:1rem;
	padding-left:5px;
	padding-right:5px;
	box-sizing: border-box;
	border:none;
	outline: none !important;
	font-family: '맑은 고딕', 'notokr-regular', sans-serif;
    background-color: transparent; /* 배경색 투명 */
	font-size:14px;
	box-sizing:content-box;
	overflow:hidden;
	background:#FFF;
	margin-top: 10px;
}

/* 채팅 입력 영역 스타일 수정 */
.makechat_input {
    border: none;
    background: #f8f9fa;
    padding: 15px 20px;
    height: 80px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
}

.makechat_input textarea {
    font-size: 14px;
    height: 40px;
    margin: 0 0 10px 0;
    padding: 5px 0;
    background: transparent;
    resize: none;
    border: none;
}

/* 버튼 컨테이너 */
.chat-input-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input-buttons-left {
    display: flex;
    gap: 8px;
}

/* 좌측 아이콘 버튼 */
.chat-input-button {
	padding: 8px;
	background: #CCC; /* 배경 더 진하게 */
	color: #343a40; /* 텍스트 더 진하게 */
	border-radius: .25rem;
	transition: all .15s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
}

.chat-input-button:hover {
    background-color: #33d1f2;
    color: #FFF;
}

.chat-input-button:active {
    background-color: #33d1f2;
    color: #FFF;
}

/* 전송 버튼 */
.btn_makebot_sumit {
    padding: 8px 16px;
    border: none;
    border-radius: .25rem;
    color: white;
    font-weight: 500;
    transition: all .15s ease-in-out;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
	background: #CCC; /* 배경 더 진하게 */
}

.btn_makebot_sumit i {
    font-size: 14px;
}

.btn_makebot_sumit:hover {
    background-color: #33d1f2;
}

.btn_makebot_sumit:active {
    background-color: #11181f;
}

/* 로딩 상태의 전송 버튼 */
.btn_makebot_sumit.loading {
    background-color: #4a5568;
    cursor: not-allowed;
}

/* 버튼 내 아이콘 크기 통일 */
.chat-input-button i,
.btn_makebot_sumit i {
    font-size: 16px;
}









.makechat_input_msg {
    flex-grow: 1; /* 나머지 공간 채우기 */
    margin: 0 10px; /* 좌우 여백 */
    color: #fff; /* 글자색 (밝은색 권장) */
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

button i {
    color: #999; /* 아이콘 색상 */
    font-size: 16px; /* 아이콘 크기 */
}

/* white 스킨 */
.makechat_white.makechat{
	background:#FFF !important;
}

.makechat_white .makechat_msg{
	background:#FFF !important;
}
.makechat_top{
	color:#333;
}

.makechat_white .txt_makechat_input_msg {
    color: #333; /* 아이콘 색상 */
}
.pcoded-main-container{
	background:#FFF;
}




/* 메세지 */
.makechat_msg{
	background:#e8e8e8;
    overflow-y: scroll;
	box-sizing: border-box;
	overflow-x: hidden;
}


.makechat_msg_item_msg_conv_name{
	font-weight:900;
}

.makechat_msg_item_msg{
	margin-bottom:10px;
}
.makechat_msg_item_tools{
	height:20px;
	width:100%;
	margin-bottom:20px;
	color:#999;
}
.makechat_msg_item_tools i{
	cursor:pointer;
}

.makechat_msg_item_img {
	margin-left:20px;
    width: 20px;  /* 썸네일의 너비 */
    height: 20px; /* 썸네일의 높이 */
    border-radius: 10px; /* 원형 썸네일을 위한 border-radius */
    margin-right: 10px; /* 텍스트와의 여백 */
	margin-top:4px;
    float: left; /* 텍스트 옆에 이미지를 위치시키기 위해 */
}

/* chat-client.css와 chat.css에 추가 */
.makechat_msg_item {
    display: flex;
    margin-bottom: 20px;
    width: 100%;
}

.makechat_msg_item.agent-message {
    justify-content: flex-start;
}

.makechat_msg_item.user-message {
    justify-content: flex-end;
}

.user-message .makechat_msg_item_msg {
    background-color: #4285f4;
    color: white;
    border-radius: 15px 15px 0 15px;
    padding: 10px 15px;
    margin-left: auto;
}

.agent-message .makechat_msg_item_msg {
    background-color: #e8e8e8;
    border-radius: 15px 15px 15px 0;
    padding: 10px 15px;
}

.makechat_msg {
    overflow-y: auto;
    box-sizing: border-box; /* padding이 전체 크기에 포함되도록 설정 */
    padding-top: 20px;
    scroll-behavior: smooth; /* 부드러운 스크롤 효과 */
}


/* 코드 블락 */
.msg_block_code_head{
	color: #FFF;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    font-weight: 300;
    background: #333;
    padding-left: 10px;
    box-sizing: border-box;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
.msg_block_code_head_title{
	width:50%;
	float:left;
}
.btn_msg_block_code_copy{
	width:80px;
    height: 30px;
    line-height: 30px;
	margin-right:10px;
	float:right;
	text-align:right;
	color:#FFF;
	cursor:pointer
}
.btn_msg_block_code_copy i{
	font-size:14px;
	margin-right:4px;
}
.msg_block_code_msg{
	color:#FFF;
	font-weight:300;
	background:#000000;
	padding:10px 15px 10px 15px;
	box-sizing: border-box;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}






/* Font Awesome 아이콘 스타일 */
.fas {
    font-size: 16px; /* 아이콘 크기 */
    /*color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;*/ /* 아이콘 색상 */
}




/*********** 메세지 코드 블록 ***********/
.copy-button {
	cursor: pointer;
	background-color: #eee;
	border: none;
	padding: 5px 10px;
	border-radius: 3px;
	margin: 5px;
	font-size: 12px;
	float: right; /* 버튼을 오른쪽에 위치시킵니다 */
}

.copy-button:hover {
	background-color: #ddd;
}

.prism-show-language-label {
	font-size: 0.85em;
	color: #fff;
	padding: 0.5em;
	background-color: #333;
	clear: both; /* float 스타일을 초기화합니다 */
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	position:relative;
}


.prism-show-language-label .btn_msg_block_code_copy{
	width: 80px;
	height: 20px;
	line-height: 20px;
	font-size: 12px;
	float: right;
	text-align: right;
	color: #FFF;
	cursor:pointer
	top:5px;
	right:5px;
}
.prism-show-language-label .btn_msg_block_code_copy i{
	font-size:14px;
	margin-right:4px;
}

pre {
	background:#000;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	margin-bottom:0;
	position: relative;
	width:100%;
}
/*********** 메세지 코드 블록 ***********/

cite {
    color: #666;
    font-style: normal;
}

.sources-container h4 {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.source-item {
    font-size: 13px;
    color: #555;
    padding: 4px 0;
}

.source-item strong {
    color: #2c5282;
    margin-right: 6px;
}

.reference {
    color: #666;
    font-style: normal;
}

.sources-container {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.sources-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.source-item {
    margin: 5px 0;
    color: #666;
}

.source-item strong {
    color: #2c5282;
    margin-right: 6px;
}

/* source-item의 기본 스타일은 유지 */
/* 기존 코드 수정 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* source-item의 기본 스타일은 유지 */
.source-item {
    margin: 5px 0;
    color: #666;
    border-bottom: 1px solid #edf2f7;
    transition: background-color 0.2s;
}

/* 새로 추가되는 항목에만 애니메이션 적용 */
.source-item.new {
    animation: fadeIn 0.5s ease-in-out;
}

.source-item:hover {
    background-color: #f1f5f9;
}

/* 상담원 UI */
.chat-list .card.active {
    border-left: 4px solid #33d1f2;  /* 왼쪽 테두리로 선택 표시 */
    background-color: rgba(51, 209, 242, 0.1);  /* 배경색 약간 변경 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1);  /* 그림자 효과 */
}

.chat-list .card.active .card-body {
    padding-left: 11px;  /* border-left 때문에 살짝 조정 */
}

/* 채팅방 목록 컨테이너 스타일 */
.chat-list {
    height: calc(100vh - 100px);
    overflow-y: overlay; /* overlay로 변경하여 컨텐츠 위에 스크롤바 표시 */
    padding-right: 5px; /* 스크롤바 공간 확보 */
}

/* 스크롤바 스타일 개선 */
.chat-list::-webkit-scrollbar {
    width: 4px;
}

.chat-list::-webkit-scrollbar-track {
    background: transparent; /* 트랙 배경 투명하게 */
}

.chat-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2); /* 반투명한 스크롤바 */
    border-radius: 4px;
}

.chat-list:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3); /* 호버 시 좀 더 진하게 */
}

/* 카드 넓이 유지 */
.chat-list .card {
    width: 100%;
    margin-right: 0;
    box-sizing: border-box;
    cursor: pointer; /* 클릭 가능함을 표시하는 커서 */
    transition: transform 0.1s ease; /* 부드러운 변환 효과 */
}

.chat-list .card.active {
    border-left: 4px solid #33d1f2;
    background-color: rgba(51, 209, 242, 0.1);
}

.makechat_btn_close_chat.completed i {
    color: #dc3545;
}

/* 메모 리스트 컨테이너 스타일 */

.makechat_top{
	/*background:#33d1f2;*/
	color:#FFF;
}

.makechat_top button i{
	color:#FFF;
}

.dropdown-item.active {
    background-color: #e9ecef;
    color: #1e2125;
}

.dropdown-item.active i {
    opacity: 1;
}


/* 이모지 컨테이너 스타일 */
#emojiContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
}

.emoji-item {
  cursor: pointer;
  font-size: 24px;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.emoji-item:hover {
  background-color: #f0f0f0;
}

/* 링크 모달 스타일 */
#linkModal .modal-body {
  padding: 20px;
}

#linkModal .form-label {
  font-weight: 500;
}

/* 모달 공통 스타일 */
.modal-content {
  border-radius: 8px;
}

.modal-header {
  border-bottom: 1px solid #dee2e6;
  padding: 15px 20px;
}

.modal-footer {
  border-top: 1px solid #dee2e6;
  padding: 15px 20px;
}

.chat-list {
    max-height: calc(100vh - 200px); /* 상단 여백 고려해 높이 조정 */
    overflow-y: auto;
    padding-right: 10px;
}

.chat-list::-webkit-scrollbar {
    width: 4px;
}

.chat-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.chat-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.chat-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.makechat_msg_item.system {
  width: 100%;
  padding: 12px 0;
  text-align: center;
}

.system-message {
  display: flex;
  align-items: center;
  gap: 16px; /* 선과 텍스트 사이 간격 */
  width: 100%;
}

.system-message::before,
.system-message::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #e9ecef;
}

.system-text {
	font-size:0.875rem;
	line-height: 1.4;
	color: #999;
}

/* 어두운 테마일 때 */
.makechat_dark .system-message::before,
.makechat_dark .system-message::after {
  background-color: #495057;
}

.makechat_dark .system-text {
  color: #adb5bd;
}

/* 버튼 */
.chat-link-button {
    display: inline-flex;  /* flex로 변경 */
    align-items: center;   /* 수직 중앙 정렬 */
    padding: 8px 16px;
    background-color: #4285f4;
    color: white !important;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.chat-link-button .icon-margin {
    margin-right: 2px;  /* 또는 원하는 크기로 조정 */
}

.chat-link-button:hover {
  background-color: #0056b3;
  text-decoration: none;
  color: white;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* 메시지 내용 컨테이너 스타일 */
.agent-message .message-content {
    background-color: #e8e8e8;
    border-radius: 15px 15px 15px 0;
    padding: 10px 15px;
}

/* 메시지 텍스트 스타일 */
.message-content p {
    margin: 0;  /* 기본 마진 제거 */
    word-break: break-word;
}

.reason-btn {
	min-width: 120px;
	margin: 0.25rem;
	transition: all 0.2s;
}

.reason-btn.active {
	background-color: var(--bs-primary);
	color: white;
	border-color: var(--bs-primary);
}

#closeMemoGroup {
	transition: all 0.3s ease;
}

#closeMemoGroup.d-none {
	opacity: 0;
	transform: translateY(-10px);
}

#closeMemoGroup:not(.d-none) {
	opacity: 1;
	transform: translateY(0);
}

.makechat_btn_support_request {
	background: #ffc107;
	color: #000;
	border: none;
	padding: 8px 15px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: all 0.3s;
}

.makechat_btn_support_request:hover {
	background: #ffb300;
}

.makechat_btn_support_request.requested {
	background: #6c757d;
	color: #fff;
	cursor: not-allowed;
}

.makechat_btn_support_request i {
	font-size:0.875rem;
}

@keyframes cardBlink {
	0% { 
		background-color: var(--bs-light); 
		transform: translateX(0);
	}
	25% { 
		background-color: var(--bs-primary-bg-subtle);
		transform: translateX(-5px);
	}
	75% { 
		background-color: var(--bs-primary-bg-subtle);
		transform: translateX(5px);
	}
	100% { 
		background-color: var(--bs-light);
		transform: translateX(0);
	}
}

.chat-card-blink {
	animation: cardBlink 0.5s ease-in-out;
	animation-iteration-count: 3;
}

.chat-list .card {
	/*transition: all 0.3s ease-in-out;*/
    /* 무거운 트랜지션 효과 제거 */
    transition: none;
	
}
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.chat-card-blink {
    animation: blink 1s ease-in-out 2;
}

.close-reason {
    font-size: 0.85em;
    color: #6c757d;
    border-top: 1px solid #eee;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

.close-reason i {
	font-size:0.875rem;
}

.close-reason .fa-comment-dots {
    cursor: help;
    color: #6c757d;
}

/* 툴팁 스타일 커스터마이징 */
.tooltip .tooltip-inner {
    max-width: 300px;
    text-align: left;
    padding: 8px 12px;
    background-color: rgba(0,0,0,0.9);
}


/* 메시지 시간 표시 스타일 */
.message-time {
	font-size: 0.75rem;
	color: #6c757d;
	opacity: 0.7;
	white-space: nowrap;
	flex-shrink: 0;
	align-self: flex-end;
	line-height: 1;
	margin: 0; /* 모든 마진 제거 */
	padding: 0; /* 모든 패딩 제거 */
}


/* 시스템 메시지의 시간 */
.system .message-time {
	text-align: center;
	font-size: 0.7rem;
	margin-top: 4px;
	align-self: center;
}

.system .message-wrapper {
	flex-direction: column;
	align-items: center;
	margin: 0;
}

/* 메시지 컨텐츠가 시간과 함께 flex로 배치될 때 너비 조정 */
.makechat_msg_item_msg,
.message-content {
	flex: 1;
	min-width: 0; /* 텍스트 오버플로우 방지 */
	margin: 0; /* 기본 마진 제거 */
	padding: 0; /* 기본 패딩 유지하되 추가 패딩 제거 */
}

/* 링크 버튼이 있는 메시지 컨테이너 */
.message-content {
	max-width: 100%;
}

/* 메시지 래퍼 내부 요소들의 기본 스타일 재설정 */
.message-wrapper > * {
	margin-top: 0;
	margin-bottom: 0;
}

.user-message .message-time{
	float:left;
}

.agent-message .message-time{
	float:right;
}

/* 상담원 전용 메시지 스타일 */
.agent-only-message {
    position: relative;
    border-left: 3px solid #ff8a65;
    background: linear-gradient(90deg, rgba(255, 107, 107, 0.1) 0%, transparent 100%);
}

.agent-only-badge {
    position: absolute;
    top: -8px;
    right: 8px;
    background: #e67e22;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.agent-only-message .makechat_msg_item_msg {
    padding-right: 60px; /* 배지 공간 확보 */
}

/* 상담원 전용 메시지 아이콘 */
.agent-only-icon {
    color: #e67e22;
    margin-right: 5px;
    font-size: 12px;
}


/* CSS 스타일 추가 */
.input-buttons-right {
	display: flex;
	align-items: right;
	gap: 8px;
}

.satisfaction-survey-btn {
	color: #333;
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.satisfaction-survey-btn:disabled {
    background-color: #CCC !important; /* 회색 배경 */
    color: #fff !important;
    opacity: 0.8;
    cursor: not-allowed !important;
    border-color: #6c757d !important;
}

.satisfaction-survey-btn:hover {
    background-color: #33d1f2;
    color: #FFF;
}

.satisfaction-survey-btn i {
	font-size: 16px;
}

.satisfaction-rating-buttons {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 20px 0;
}

.rating-btn {
	border: 2px solid #e0e0e0;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: white;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	color: #666;
}

.rating-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.rating-btn.rating-1:hover, .rating-btn.rating-1.selected {
	border-color: #e74c3c;
	background: #e74c3c;
	color: white;
}

.rating-btn.rating-2:hover, .rating-btn.rating-2.selected {
	border-color: #f39c12;
	background: #f39c12;
	color: white;
}

.rating-btn.rating-3:hover, .rating-btn.rating-3.selected {
	border-color: #f1c40f;
	background: #f1c40f;
	color: white;
}

.rating-btn.rating-4:hover, .rating-btn.rating-4.selected {
	border-color: #2ecc71;
	background: #2ecc71;
	color: white;
}

.rating-btn.rating-5:hover, .rating-btn.rating-5.selected {
	border-color: #27ae60;
	background: #27ae60;
	color: white;
}

.rating-btn i {
	font-size: 20px;
	margin-bottom: 2px;
}

.rating-btn small {
	font-size: 10px;
	font-weight: bold;
}

.makechat_white button i{
	color:#FFF !important;
}

/* 만족도 조사 관련 CSS - chat.css에 추가 */

.satisfaction-survey-message {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 12px;
	padding: 20px;
	margin: 10px 0;
	text-align: center;
}

.survey-header h4 {
	color: #495057;
	font-weight: 600;
	margin-bottom: 8px;
}

.survey-header p {
	color: #6c757d;
	line-height: 1.4;
}

.satisfaction-rating-buttons {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 20px 0;
	flex-wrap: wrap;
}

.rating-btn {
	background: white;
	border: 2px solid #dee2e6;
	border-radius: 12px;
	padding: 12px 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	min-width: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.rating-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.rating-btn.selected {
	background: #fff3cd;
	border-color: #ffc107;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.rating-btn i {
	font-size: 20px;
}

.rating-btn small {
	font-size: 10px;
	font-weight: 500;
	text-align: center;
	line-height: 1.2;
	white-space: pre-line;
}

.rating-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.rating-btn:disabled:hover {
	transform: none;
	box-shadow: none;
}

#feedback-section textarea {
	resize: vertical;
	font-size: 14px;
}

/* 만족도 조사 응답 알림 */
.satisfaction-response-alert {
	background: linear-gradient(135deg, #ffd700, #ffed4e);
	border: none;
	color: #333;
	border-radius: 8px;
	margin: 10px 0;
	animation: slideInDown 0.3s ease;
}

@keyframes slideInDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 모바일 반응형 */
@media (max-width: 576px) {
	.satisfaction-rating-buttons {
		gap: 6px;
	}
	
	.rating-btn {
		min-width: 50px;
		padding: 10px 6px;
	}
	
	.rating-btn i {
		font-size: 18px;
	}
	
	.rating-btn small {
		font-size: 9px;
	}
}
/* 만족도 조사 관련 CSS - chat.css에 추가 */
/* 세련된 만족도 조사 버튼 CSS - chat.css에 추가/교체 */

.satisfaction-survey-message {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);
	border: 1px solid #e3e6f0;
	border-radius: 20px;
	padding: 25px;
	margin: 15px 0;
	text-align: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	font-family: inherit;
}

.survey-header h4 {
	color: #2c3e50;
	font-weight: 700;
	margin-bottom: 8px;
	font-size: 18px;
	letter-spacing: -0.5px;
}

.survey-header p {
	color: #6c757d;
	line-height: 1.5;
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: 500;
}

.satisfaction-rating-buttons {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 25px 0;
	flex-wrap: wrap;
}

.rating-btn {
	border: 2px solid transparent;
	border-radius: 16px;
	padding: 16px 12px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	min-width: 70px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	outline: none;
	position: relative;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.rating-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: 14px;
}

.rating-btn:hover::before {
	opacity: 1;
}

.rating-btn:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 각 점수별 개별 색상 */
.rating-btn.rating-1 {
	border-color: #ff6b6b;
	background: linear-gradient(135deg, #ffe0e0 0%, #ffebeb 100%);
}

.rating-btn.rating-1:hover {
	border-color: #ff5252;
	box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
}

.rating-btn.rating-2 {
	border-color: #ffa726;
	background: linear-gradient(135deg, #fff3e0 0%, #fff8f0 100%);
}

.rating-btn.rating-2:hover {
	border-color: #ff9800;
	box-shadow: 0 8px 25px rgba(255, 167, 38, 0.3);
}

.rating-btn.rating-3 {
	border-color: #ffeb3b;
	background: linear-gradient(135deg, #fffde7 0%, #fefefe 100%);
}

.rating-btn.rating-3:hover {
	border-color: #fdd835;
	box-shadow: 0 8px 25px rgba(255, 235, 59, 0.3);
}

.rating-btn.rating-4 {
	border-color: #66bb6a;
	background: linear-gradient(135deg, #e8f5e8 0%, #f1f8f1 100%);
}

.rating-btn.rating-4:hover {
	border-color: #4caf50;
	box-shadow: 0 8px 25px rgba(102, 187, 106, 0.3);
}

.rating-btn.rating-5 {
	border-color: #42a5f5;
	background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 100%);
}

.rating-btn.rating-5:hover {
	border-color: #2196f3;
	box-shadow: 0 8px 25px rgba(66, 165, 245, 0.3);
}

.rating-btn.selected {
	transform: translateY(-3px) scale(1.05);
	border-width: 3px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.rating-btn.selected.rating-1 {
	background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
	color: white;
	border-color: #ff5252;
}

.rating-btn.selected.rating-2 {
	background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
	color: white;
	border-color: #ff9800;
}

.rating-btn.selected.rating-3 {
	background: linear-gradient(135deg, #ffeb3b 0%, #fdd835 100%);
	color: #333;
	border-color: #fdd835;
}

.rating-btn.selected.rating-4 {
	background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
	color: white;
	border-color: #4caf50;
}

.rating-btn.selected.rating-5 {
	background: linear-gradient(135deg, #42a5f5 0%, #2196f3 100%);
	color: white;
	border-color: #2196f3;
}

.rating-btn i {
	font-size: 24px;
	margin-bottom: 4px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
	z-index: 1;
	position: relative;
}

.rating-btn small {
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	line-height: 1.2;
	white-space: pre-line;
	letter-spacing: -0.2px;
	z-index: 1;
	position: relative;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.rating-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.rating-btn:disabled:hover {
	transform: none !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* 피드백 섹션 개선 */
.satisfaction-survey-message textarea {
	width: 100%;
	min-height: 70px;
	padding: 12px 16px;
	border: 2px solid #e3e6f0;
	border-radius: 12px;
	resize: vertical;
	font-family: inherit;
	font-size: 14px;
	transition: all 0.3s ease;
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.satisfaction-survey-message textarea:focus {
	outline: none;
	border-color: #4285f4;
	box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.05);
	background: #ffffff;
}

.satisfaction-survey-message button {
	background: linear-gradient(135deg, #4285f4 0%, #1976d2 100%);
	color: white;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	font-family: inherit;
	font-weight: 600;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
	letter-spacing: -0.2px;
	width:18%;
}

.satisfaction-survey-message button:hover:not(:disabled) {
	background: linear-gradient(135deg, #3367d6 0%, #1565c0 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(66, 133, 244, 0.4);
}

.satisfaction-survey-message button:disabled {
	opacity: 0.6;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: 0 4px 12px rgba(66, 133, 244, 0.2) !important;
}

/* 성공 메시지 개선 */
.alert {
	padding: 16px 20px;
	margin: 16px 0;
	border: none;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.alert-success {
	color: #1b5e20;
	background: linear-gradient(135deg, #e8f5e8 0%, #f1f8f1 100%);
	border-left: 4px solid #4caf50;
	margin-top:10px;
}

/* 로딩 애니메이션 추가 */
@keyframes pulse {
	0% { opacity: 1; }
	50% { opacity: 0.7; }
	100% { opacity: 1; }
}

.rating-btn.loading {
	animation: pulse 1.5s ease-in-out infinite;
}

/* 모바일 반응형 개선 */
@media (max-width: 576px) {
	.satisfaction-survey-message {
		padding: 20px 16px;
		margin: 12px 0;
		border-radius: 16px;
	}
	
	.satisfaction-rating-buttons {
		gap: 8px;
		margin: 20px 0;
	}
	
	.rating-btn {
		min-width: 60px;
		padding: 14px 10px;
		border-radius: 14px;
	}
	
	.rating-btn i {
		font-size: 20px;
	}
	
	.rating-btn small {
		font-size: 10px;
	}
	
	.survey-header h4 {
		font-size: 16px;
	}
	
	.survey-header p {
		font-size: 13px;
	}
}

/* 어두운 테마 지원 */
@media (prefers-color-scheme: dark) {
	.satisfaction-survey-message {
		background: linear-gradient(135deg, #2a2d3a 0%, #212529 100%);
		border-color: #495057;
	}
	
	.survey-header h4 {
		color: #f8f9fa;
	}
	
	.survey-header p {
		color: #adb5bd;
	}
	
	.satisfaction-survey-message textarea {
		background: linear-gradient(135deg, #343a40 0%, #495057 100%);
		border-color: #6c757d;
		color: #f8f9fa;
	}
}

.btn-success:disabled{
	background:none;
}

/* 템플릿 미리보기 툴팁 스타일 */
.template-item {
	position: relative;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 15px;
	background: #fff;
	transition: all 0.2s ease;
	cursor: pointer;
}

.template-item:hover {
	border-color: #007bff;
	box-shadow: 0 2px 8px rgba(0,123,255,0.1);
	z-index: 10;
}

.template-content {
	display: -webkit-box;
	-webkit-line-clamp: 2; /* 2줄까지만 표시 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #6c757d;
	font-size: 13px;
	line-height: 1.4;
	margin-bottom: 8px;
	max-height: 2.8em; /* 2줄 높이 제한 */
	white-space: pre-wrap;
}

/* 템플릿 미리보기 툴팁 */
.template-preview-tooltip {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	border: 1px solid #007bff;
	border-radius: 8px;
	padding: 15px;
	box-shadow: 0 8px 25px rgba(0,0,0,0.15);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	max-width: 400px;
	min-width: 300px;
	pointer-events: none;
}

.template-preview-tooltip::before {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #007bff;
}

.template-preview-tooltip::after {
	content: '';
	position: absolute;
	bottom: -7px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid #fff;
}

.template-item:hover .template-preview-tooltip {
	opacity: 1;
	visibility: visible;
	top: -20px;
}

.template-preview-content {
	font-size: 14px;
	line-height: 1.5;
	color: #495057;
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 200px;
	overflow-y: auto;
}

.template-preview-header {
	font-weight: 600;
	color: #007bff;
	margin-bottom: 8px;
	font-size: 13px;
	border-bottom: 1px solid #e9ecef;
	padding-bottom: 5px;
}

/* 공유 템플릿 툴팁 스타일 */
.template-item.shared-template .template-preview-tooltip {
	border-color: #17a2b8;
}

.template-item.shared-template .template-preview-tooltip::before {
	border-top-color: #17a2b8;
}

.template-item.shared-template .template-preview-header {
	color: #17a2b8;
}

/* 스크롤바 스타일 */
.template-preview-content::-webkit-scrollbar {
	width: 4px;
}

.template-preview-content::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 2px;
}

.template-preview-content::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 2px;
}

.template-preview-content::-webkit-scrollbar-thumb:hover {
	background: #a8a8a8;
}

/* 모바일에서는 툴팁 비활성화 */
@media (max-width: 768px) {
	.template-preview-tooltip {
		display: none;
	}
	
	.template-content {
		-webkit-line-clamp: 3; /* 모바일에서는 3줄까지 */
		max-height: 4.2em;
	}
}

/* 툴팁이 화면 밖으로 나가지 않도록 조정 */
.template-item:nth-child(-n+2) .template-preview-tooltip {
	top: 100%;
	margin-top: 10px;
}

.template-item:nth-child(-n+2) .template-preview-tooltip::before {
	top: -8px;
	bottom: auto;
	border-top: none;
	border-bottom: 8px solid #007bff;
}

.template-item:nth-child(-n+2) .template-preview-tooltip::after {
	top: -7px;
	bottom: auto;
	border-top: none;
	border-bottom: 7px solid #fff;
}

.template-item:nth-child(-n+2):hover .template-preview-tooltip {
	top: calc(100% + 20px);
}

/* 동적 태그 강조 스타일 */
.template-preview-content .dynamic-tag {
	background: #fff3cd;
	color: #856404;
	padding: 2px 4px;
	border-radius: 3px;
	font-weight: 600;
	border: 1px solid #ffeaa7;
}


/* 채팅 삭제 버튼 스타일 */
.chat-delete-btn {
	opacity: 0;
	transition: all 0.3s ease;
	border: none !important;
	background: transparent !important;
	color: #dc3545 !important;
	padding: 4px 6px !important;
	min-width: auto !important;
	font-size: 12px;
	border-radius: 4px;
}

.chat-delete-btn:hover {
	background: rgba(220, 53, 69, 0.1) !important;
	color: #dc3545 !important;
	transform: scale(1.1);
}

/* 채팅 카드 호버 시 삭제 버튼 표시 */
.chat-list .card:hover .chat-delete-btn {
	opacity: 1;
}

/* 카드 타이틀과 상태 배지 영역 조정 */
.chat-list .card .card-title {
	margin-right: 8px;
}

/* 삭제 버튼과 상태 배지 간격 조정 */
.chat-list .card .d-flex.align-items-center.gap-2 {
	flex-shrink: 0;
}

/* 활성 채팅 카드에서는 삭제 버튼 항상 표시 */
.chat-list .card.active .chat-delete-btn {
	opacity: 0.7;
}

.chat-list .card.active:hover .chat-delete-btn {
	opacity: 1;
}

/* 모바일에서는 삭제 버튼 항상 표시 */
@media (max-width: 768px) {
	.chat-delete-btn {
		opacity: 0.7;
	}
	
	.chat-list .card:hover .chat-delete-btn,
	.chat-list .card.active .chat-delete-btn {
		opacity: 1;
	}
}

/* 완료된 채팅의 경우 삭제 버튼 더 뚜렷하게 */
.chat-list .card[data-status="completed"] .chat-delete-btn {
	opacity: 0.8;
}

.chat-list .card[data-status="completed"]:hover .chat-delete-btn {
	opacity: 1;
}

/* 삭제 버튼 클릭 방지 영역 */
.chat-delete-btn {
	z-index: 10;
	position: relative;
}

/* 툴팁 스타일 개선 */
.tooltip .tooltip-inner {
	font-size: 12px;
	padding: 4px 8px;
}

/* 기존 CSS 아래에 추가 */
.chat-delete-btn:disabled {
	opacity: 0.6 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

/* 삭제 중인 카드 스타일 */
.chat-list .card.deleting {
	transition: opacity 0.3s ease;
	pointer-events: none; /* 삭제 중에는 클릭 불가 */
}

.chat-list .card.deleting .chat-delete-btn {
	opacity: 1 !important;
}