/* 버튼: 화면 우하단 고정 */
.chatbot-fab{
  position: fixed; right: 22px; bottom: 22px;
  width: 56px; height: 56px; border-radius: 50%;
  background: #2563eb; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size: 22px; cursor:pointer; box-shadow: 0 8px 20px rgba(0,0,0,.15);
  z-index: 2147483647; /* 최상위 고정 */
  pointer-events: auto;
  transition: transform .15s ease;
}
.chatbot-popup{
  position: fixed; right: 22px; bottom: 90px;
  width: 340px; max-height: 70vh;
  background:#fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  z-index: 2147483646; display:none;
  border: 1px solid #eef2f7;
  font-family: 'Segoe UI', Arial, sans-serif;
  transform: translateY(8px); opacity:0; transition: .18s ease;
}
.chatbot-popup.open{ display:block; transform: translateY(0); opacity:1; }


/* 헤더 */
.chatbot-header{
  height: 48px; display:flex; align-items:center; justify-content:space-between;
  background:#2563eb; color:#fff; font-weight:700; padding: 0 12px;
}
#close-btn{
  background: transparent; border: 0; color: #fff; font-size: 20px; cursor: pointer;
}

/* 메시지 영역 */
.messages{
  padding: 12px; height: 360px; overflow-y: auto; background:#f7f9fc;
}
.message{ display:flex; margin: 6px 0; }
.message .message-content{
  max-width: 78%; padding: 9px 12px; border-radius: 10px; line-height:1.45; font-size: 14px;
  word-break: break-word; white-space: pre-wrap; overflow-wrap:anywhere;
}
.message.user{ justify-content: flex-end; }
.message.user .message-content{
  background:#2563eb; color:#fff; border-top-right-radius: 4px;
}
.message.bot .message-content{
  background:#fff; color:#1b2430; border:1px solid #e6ecf2; border-top-left-radius: 4px;
}

/* ‘여기’ 링크 전용 스타일 */
.message .message-content a.chatbot-link,
.message .message-content a.chatbot-link:visited {
  color: #fff !important;          /* 흰색 글자 */
  background-color: #2563eb;       /* 파란 배경 */
  padding: 2px 6px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
}

.message .message-content a.chatbot-link:hover,
.message .message-content a.chatbot-link:focus {
  background-color: #1e3a8a;       /* 더 진한 파랑 */
  color: #fff !important;
  text-decoration: none;
  outline: none;
}


/* 입력 영역 */
.chatbot-input{
  display:flex; gap:8px; padding:10px; border-top:1px solid #eef2f7; background:#fff;
}
#user-input{
  flex:1; height: 36px; border:1px solid #cfd8e3; border-radius:8px; padding:0 10px; font-size:14px;
}
#user-input:focus{ outline: none; border-color:#2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
#send-btn{
  min-width: 60px; padding: 0 12px; border:0; border-radius:8px; background:#2563eb; color:#fff; font-weight:700; cursor:pointer;
}
#send-btn:hover{ filter: brightness(.95); }

/* 모바일 대응 */
@media (max-width: 600px){
  .chatbot-popup{ right: 10px; left: 10px; width: auto; bottom: 80px; }
  .chatbot-fab{ right: 14px; bottom: 14px; }
  .messages{ height: 50vh; }
}

.chatbot-link {
  color: #fff;
  background-color: #007bff; /* 파란색 배경 */
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
}

.chatbot-link:hover {
  background-color: #0056b3; /* hover 시 진한 파랑 */
  color: #fff;
  text-decoration: underline;
}