/* 전체 페이지 기본 설정 */
body {
    background-color: #2c2f33; /* 어두운 배경색 */
    color: #ffffff; /* 흰색 글씨 */
    font-family: 'Malgun Gothic', sans-serif; /* 폰트 */
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 화면 전체 높이 */
}

/* 채팅창 컨테이너 */
.chat-container {
    width: 80%;
    max-width: 800px;
    height: 90vh;
    background-color: #23272a; /* 채팅창 배경색 */
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column; /* 아이템을 세로로 배치 */
}

/* 대화 내용 박스 */
.chat-wrapper {
    flex-grow: 1;
    position: relative; /* 자식 요소들의 위치 기준점 (매우 중요!) */
    overflow: hidden;
    
    /* 배경 이미지는 여기에 그대로 둡니다 */
    background-image: url('bg.png');
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
}

#chat-box {
    position: relative; /* 자신만의 쌓임 순서를 갖도록 설정 */
    z-index: 1;         /* 덮개(z-index: 0)보다 위로 올림 */
    background-color: transparent; /* 배경을 투명하게 만들어 뒤가 비치도록 함 */

    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px 20px 160px 20px; /* 하단 여백 유지 */
}

.chat-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(35, 39, 42, 0.85); /* 투명도 조절 */
    /* z-index를 제거, 배경 이미지 바로 위에 위치 */
}

/* 개별 메시지 스타일 */
.message {
    margin-bottom: 15px;
    padding: 0px 15px;
    border-radius: 18px;
    max-width: 70%;
    line-height: 1.5;
}

/* Algo 챗봇 메시지 (왼쪽) */
.algo-message {
    background-color: #5865f2; /* 파란색 계열 */
    align-self: flex-start;
    float: left;
    clear: both;
}

/* 사용자 메시지 (오른쪽) */
.user-message {
    background-color: #4f545c; /* 회색 계열 */
    align-self: flex-end;
    float: right;
    clear: both;
}

/* 입력창 컨테이너 */
.input-container {
    display: flex;
    padding: 15px;
}

/* 입력창 */
#user-input {
    flex-grow: 1;
    background-color: #40444b;
    border: none;
    padding: 12px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;
    outline: none; /* 클릭 시 테두리 제거 */
}

/* 전송 버튼 */
#send-btn {
    background-color: #5865f2;
    color: #ffffff;
    border: none;
    padding: 0 20px;
    margin-left: 10px;
    border-radius: 8px;
    cursor: pointer; /* 마우스 올리면 손가락 모양 */
    font-size: 16px;
    transition: background-color 0.2s; /* 부드러운 색상 변경 효과 */
}

#send-btn:hover {
    background-color: #4752c4; /* 마우스 올렸을 때 색상 */
}

/* 채팅창 헤더 스타일 */
.chat-header {
    display: flex;
    align-items: center; /* 세로 중앙 정렬 */
    padding: 10px 20px;
    background-color: #1e2124; /* 헤더 배경색 */
    border-bottom: 1px solid #40444b;
    border-radius: 10px 10px 0 0; /* 위쪽 모서리만 둥글게 */
}

/* 로고 이미지 스타일 */
.logo {
    width: auto;  /* 로고 너비 (원하는 크기로 조절) */
    height: 50px; /* 로고 높이 */
    margin-right: 15px; /* 로고와 제목 사이 간격 */
}

/* 헤더 제목 스타일 */
.chat-header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.chat-header {
    justify-content: space-between; /* 양쪽 끝으로 정렬 */
}

/* 헤더 왼쪽 부분 정렬용 */
.header-left {
    display: flex;
    align-items: center;
}

/* 초기화 버튼 스타일 */
#reset-btn {
    background: none;
    border: none;
    font-size: 24px; /* 아이콘 크기 */
    color: #b9bbbe;
    cursor: pointer;
    padding: 5px;
    border-radius: 5px;
    transition: background-color 0.2s, color 0.2s; /* 부드러운 전환 효과 */
}

#reset-btn:hover {
    background-color: #40444b; /* 마우스 올렸을 때 배경색 */
    color: #ffffff;
}

.disclaimer {
    padding: 5px 20px; /* 위아래, 좌우 여백 */
    text-align: center; /* 텍스트 가운데 정렬 */
    background-color: #23272a; /* 채팅창과 같은 배경색 */
}

.disclaimer p {
    margin: 0;
    font-size: 12px; /* 글씨 크기를 작게 */
    color: #96989d; /* 약간 흐린 회색 글씨 */
    font-style: italic; /* 약간 기울임꼴 */
}

/* 추천 질문 컨테이너 스타일 (위치 고정) */
#suggestion-box {
    position: absolute; /* 부모(chat-wrapper)를 기준으로 위치를 잡음 */
    z-index: 2; /* 채팅 메시지 위에 표시 */
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* 추천 질문 버튼 스타일 (기존과 동일, 없으면 추가) */
.suggestion-btn {
    background-color: transparent;
    border: 1px solid #5865f2;
    color: #c8cbed;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s, color 0.2s;
}

.suggestion-btn:hover {
    background-color: #5865f2;
    color: #ffffff;
}