/* chat.css - 루트랩스 통합 스타일 (웨이브 애니메이션 포함) */

#chat-circle { 
    position: fixed; 
    bottom: 25px; 
    right: 25px; 
    background: #11359A; 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    color: white; 
    text-align: center; 
    line-height: 50px; 
    font-size: 20px; 
    cursor: pointer; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); 
    z-index: 2000;
    transition: transform 0.3s ease;
}

#chat-circle:hover {
    transform: scale(1.1);
}

#chat-box { 
    position: fixed; 
    bottom: 85px; 
    right: 25px; 
    width: 300px; 
    height: 400px; 
    background: white; 
    border-radius: 15px; 
    box-shadow: 0 5px 25px rgba(0,0,0,0.15); 
    display: none; 
    flex-direction: column; 
    z-index: 2000; 
    overflow: hidden; 
    font-family: 'Malgun Gothic', 'Noto Sans KR', sans-serif; 
}

#chat-header { 
    flex-shrink: 0; 
    height: 50px; 
    background: #11359A; 
    color: white; 
    padding: 0 15px; 
    font-size: 14px; 
    font-weight: bold; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

#chat-messages { 
    flex: 1; 
    overflow-y: auto; 
    padding: 15px; 
    background: #f9f9f9; 
    display: flex; 
    flex-direction: column; 
}

/* 메시지 공통 스타일 */
.msg { 
    margin-bottom: 10px; 
    padding: 8px 14px; 
    border-radius: 15px; 
    max-width: 85%; 
    line-height: 1.5; 
    font-size: 13px; 
    word-break: break-all; 
    position: relative;
}

/* 사용자 메시지 (루트랩스 메인컬러) */
.user-msg { 
    background: #11359A; 
    color: white; 
    align-self: flex-end; 
    border-bottom-right-radius: 2px; 
}

/* AI 메시지 (부드러운 그레이) */
.ai-msg { 
    background: #e9e9eb; 
    color: #333; 
    align-self: flex-start; 
    border-bottom-left-radius: 2px; 
}

/* 입력 영역 */
#chat-input-area { 
    flex-shrink: 0; 
    height: 55px; 
    display: flex; 
    border-top: 1px solid #eee; 
    padding: 0 10px; 
    background: white; 
    align-items: center;
}

#chat-input { 
    flex: 1; 
    border: none; 
    outline: none; 
    font-size: 13px; 
    padding: 5px;
}

#send-btn { 
    background: none; 
    border: none; 
    color: #11359A; 
    font-weight: bold; 
    cursor: pointer; 
    font-size: 14px; 
}

/* 로딩 애니메이션 - 물결치듯 하나씩 움직이는 효과 */
.loading-dots { 
    display: flex; 
    align-items: center; 
    gap: 4px; 
    padding: 5px 2px; 
}

.loading-dots span {
    width: 5px; 
    height: 5px; 
    border-radius: 50%;
    background: #aaa; 
    display: inline-block;
    animation: wave 1.4s infinite ease-in-out;
}

/* 핵심: 각 점에 순차적 지연 시간 부여 */
.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes wave { 
    0%, 60%, 100% { transform: translateY(0); opacity: 0.6; } 
    30% { transform: translateY(-7px); opacity: 1; } 
}

/* 스크롤바 커스텀 */
#chat-messages::-webkit-scrollbar { width: 4px; }
#chat-messages::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }