/* 기본 스타일과 폰트 설정 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5; /* 연한 회색 배경 */
}

.container-fluid {
    align-items: center;
}

/* 채팅 컨테이너 스타일 */
.chat-container {
    width: 80%;
    max-width: 400px; /* 좀 더 작은 창 크기 */
    background-color: white;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 10px; /* 둥근 모서리 */
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Flexbox로 정렬 */
}


/* 사용자 및 서버 메시지 스타일 */
.user-message, .server-message {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    min-width: 100px; /* 최소 너비 설정 */
    max-width: 80%; /* 최대 너비 설정 */
    word-wrap: break-word; /* 긴 텍스트 처리 */
    display: inline-block; /* 인라인 블록 요소로 설정 */
}

.user-message {
    background-color: #e7f5ff; /* 연한 파란색 */
    align-self: flex-start;
    text-align: left;
}

.server-message {
    background-color: #f1f0f0; /* 연한 회색 */
    align-self: flex-end;
    text-align: right;
}

/* 채팅 박스 스타일 */
.chat-box {
    height: 700px; /* 높이 조정 */
    overflow-y: auto;
    padding: 10px;
    border-bottom: 2px solid #ededed; /* 연한 구분선 */
    flex-grow: 1; /* Flexbox 크기 조정 */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 메시지를 왼쪽으로 정렬 */
}

/* 입력창과 버튼을 포함하는 컨테이너 스타일 */
.chat-container > div {
    display: flex; /* Flexbox로 정렬 */
    border-top: 2px solid #ededed; /* 연한 구분선 */
}


/* 입력창과 버튼 스타일 */
input[type="text"], button {
    padding: 10px;
    border: none;
}

input[type="text"] {
    flex-grow: 1; /* Flexbox 크기 조정 */
    border-top: 2px solid #ededed; /* 연한 구분선 */
}

button {
    width: 100px;
    background-color: #007bff; /* 밝은 파란색 */
    color: white;
    cursor: pointer;
    align-items: right;
}

button:hover {
    background-color: #0056b3; /* 어두운 파란색 */
}

/* 입력 영역 컨테이너 스타일 */
.chat-container > div {
    display: flex; /* Flexbox로 정렬 */
    border-top: 2px solid #ededed; /* 연한 구분선 */
}
.intro-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.intro-container img {
    width : 50%;
    min-width: 300px;

}

#loader {
    font-size : 25px;
    text-align : center;
}