/* css/chat-widget.css */

/* 챗봇 위젯 컨테이너 (다크 테마) */
#chat-widget-container {
  position: fixed;
  bottom: 20px;
  /* right: 80px; */ /* common.css에서 아이콘 위치 기준으로 변경됨 */
  right: 95px; /* 아이콘 right: 20px + 아이콘 width 55px + 간격 20px */
  width: 360px; /* 너비 약간 증가 */
  height: 520px; /* 높이 약간 증가 */
  background: #2a2a2a; /* 어두운 배경 */
  color: #e0e0e0; /* 기본 텍스트 밝게 */
  border-radius: 10px; /* 둥근 모서리 증가 */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); /* 그림자 강화 */
  display: none; /* 초기 숨김 */
  flex-direction: column;
  z-index: 1001;
  overflow: hidden; /* 내부 요소 넘침 방지 */
  border: 1px solid #444; /* 경계선 추가 */
}

/* 최대화 상태 (다크 테마) */
#chat-widget-container.maximized {
  width: 600px; /* 최대화 너비 증가 */
  height: calc(100vh - 40px); /* 상하 여백 20px */
  top: 20px;
  right: 20px;
  bottom: auto;
  transform: none;
}

/* 헤더 (다크 테마) */
#chat-widget-header {
  /* background: #854fff; */ /* 기존 배경 제거 */
  background: linear-gradient(145deg, #3c3c3c, #252525); /* 어두운 헤더 그라데이션 */
  color: #ffffff; /* 헤더 텍스트 흰색 */
  padding: 12px 15px; /* 패딩 조정 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #444; /* 헤더와 본문 구분선 */
  /* border-top-left-radius/border-top-right-radius 는 container의 overflow:hidden으로 처리 */
}

#chat-widget-header span { /* 제목 */
  font-weight: bold;
  font-size: 0.9rem;
}

#chat-widget-header .chat-actions {
  display: flex;
  gap: 8px; /* 버튼 간격 조정 */
}

/* 헤더 버튼 스타일은 common.css의 .widget-btn 사용 */

/* 본문 (다크 테마) */
#chat-widget-body {
  flex: 1; /* 남은 공간 모두 차지 */
  padding: 15px; /* 패딩 조정 */
  overflow-y: auto; /* 스크롤 */
  background-color: #2f2f2f; /* 본문 배경 약간 밝게 */
}

/* 메시지 공통 스타일 */
#chat-widget-body p {
  margin-bottom: 12px; /* 메시지 간격 */
  padding: 10px 15px; /* 메시지 패딩 */
  border-radius: 12px; /* 둥근 모서리 */
  font-size: 0.9rem; /* 폰트 크기 */
  line-height: 1.5; /* 줄 간격 */
  max-width: 85%; /* 메시지 최대 너비 */
  word-wrap: break-word; /* 긴 단어 줄바꿈 */
}

/* 봇 메시지 (다크 테마) */
#chat-widget-body .bot-message { /* 클래스 추가 권장 */
  background: #4a4a4a; /* 봇 메시지 배경 */
  color: #e0e0e0; /* 봇 메시지 텍스트 */
  margin-right: auto; /* 왼쪽 정렬 */
  border-bottom-left-radius: 4px; /* 말풍선 꼬리 느낌 */
}
#chat-widget-body .bot-message strong { /* 강조 텍스트 */
    color: #ffffff;
}

/* 사용자 메시지 (다크 테마) */
#chat-widget-body .user-message { /* 클래스 추가 권장 */
  background: #5a5a5a; /* 사용자 메시지 배경 */
  color: #ffffff; /* 사용자 메시지 텍스트 */
  margin-left: auto; /* 오른쪽 정렬 */
  border-bottom-right-radius: 4px; /* 말풍선 꼬리 느낌 */
}

/* 로딩 메시지 (다크 테마) */
#chat-widget-body #loadingMsg {
  color: #aaa; /* 로딩 텍스트 색상 */
  font-style: italic;
  text-align: center;
  padding: 10px;
  background: none; /* 배경 없음 */
  margin: 10px auto;
}


/* 푸터 (다크 테마) */
#chat-widget-footer {
  /* position: sticky; bottom: 0; */ /* 제거 - 컨테이너 flex 구조 활용 */
  padding: 10px 15px; /* 패딩 조정 */
  border-top: 1px solid #444; /* 구분선 */
  background-color: #2a2a2a; /* 푸터 배경 */
  display: flex;
  gap: 10px;
  align-items: center; /* 요소 세로 정렬 */
}

/* 입력 필드 (다크 테마) */
#chat-widget-input {
  flex: 1; /* 남은 공간 차지 */
  padding: 10px 15px; /* 패딩 조정 */
  background-color: #333; /* 어두운 배경 */
  color: #e0e0e0; /* 밝은 텍스트 */
  border: 1px solid #555; /* 경계선 */
  border-radius: 20px; /* 둥근 모양 */
  outline: none;
  font-size: 0.9rem;
  font-family: inherit;
}
#chat-widget-input::placeholder {
  color: #888;
}
#chat-widget-input:focus {
  border-color: #777;
  box-shadow: 0 0 0 2px rgba(100, 100, 100, 0.3);
}

/* 전송 버튼 (다크 테마) */
#chat-widget-send {
  /* background: #ebe5ff; */ /* 기존 배경 제거 */
  background: #4a4a4a; /* 버튼 배경 */
  color: #e0e0e0; /* 아이콘 색상 */
  border: none;
  width: 40px; /* 정사각형 버튼 */
  height: 40px;
  border-radius: 50%; /* 원형 버튼 */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

#chat-widget-send:hover {
  background-color: #5a5a5a; /* 호버 시 약간 밝게 */
}

#chat-widget-send svg { /* SVG 아이콘 크기 등 조정 */
  width: 20px;
  height: 20px;
}


/* 챗봇/팝업 아이콘 스타일은 common.css에서 관리 */


/* 반응형 (다크 테마) */
@media (max-width: 480px) {
  #chat-widget-container {
    width: calc(100% - 20px); /* 화면 너비에 맞춤 */
    height: 75vh; /* 높이 조정 */
    right: 10px;
    bottom: 10px;
  }
  #chat-widget-container.maximized {
     width: calc(100% - 20px); /* 최대화 시에도 너비 유지 */
     height: calc(100vh - 20px); /* 최대화 높이 */
     top: 10px;
     right: 10px;
  }
  #chat-widget-body p {
     font-size: 0.85rem; /* 모바일 폰트 크기 */
     padding: 8px 12px;
     max-width: 90%;
  }
  #chat-widget-input {
     padding: 8px 12px;
     font-size: 0.85rem;
  }
  #chat-widget-send {
     width: 36px;
     height: 36px;
  }
  #chat-widget-send svg {
     width: 18px;
     height: 18px;
  }
}