body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    width: 100%;
    overflow: hidden;
}

.curtain {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: black;
    z-index: 9999;
    opacity: 1; /* 초기 불투명도 */
}

.curtain-left {
    left: 0;
    animation: curtainLeftOpen 2s forwards;
}

.curtain-right {
    right: 0;
    animation: curtainRightOpen 2s forwards;
}

@keyframes curtainLeftOpen {
    0% {
        left: 0;
        width: 50%;
        opacity: 1; /* 초기 불투명도 */
    }
    100% {
        left: -50%;
        width: 50%;
        opacity: 0; /* 투명해짐 */
    }
}

@keyframes curtainRightOpen {
    0% {
        right: 0;
        width: 50%;
        opacity: 1; /* 초기 불투명도 */
    }
    100% {
        right: -50%;
        width: 50%;
        opacity: 0; /* 투명해짐 */
    }
}

.background {
    height: 100%;
    width: 50%; /* 화면의 절반을 차지하도록 설정 */
    background: url('rosmontisImage.jpg') no-repeat center center; /* 이미지 경로를 고정 */
    background-size: cover;
}

.chat-interface {
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px;
    box-sizing: border-box;
}

#messages {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px;
    display: flex;
    flex-direction: column; /* 메시지를 세로로 나열 */
}

.message {
    margin: 10px 0;
    max-width: 70%;
    padding: 10px;
    border-radius: 10px;
    word-wrap: break-word;
    display: inline-block; /* 자동 크기 조정 */
}

.message.user {
    align-self: flex-end;
    background-color: #5cb85c;
    color: white;
    margin-right: 10px; /* 오른쪽에 붙도록 조정 */
}

.message.bot {
    align-self: flex-start;
    background-color: #dddddd;
    color: black;
    margin-left: 10px; /* 왼쪽에 붙도록 조정 */
}

.chat-input-container {
    display: flex;
    align-items: center;
}

#user-input {
    flex-grow: 1;
    padding: 10px;
    margin-right: 10px;
    font-size: 14px; /* 글씨 크기 조정 */
    border: 2px solid #ddd;
    border-radius: 4px;
    height: 35px; /* 입력창 높이 조정 */
}

#send-button {
    padding: 0 10px;
    font-size: 14px; /* 글씨 크기 조정 */
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    height: 35px; /* 버튼 높이 조정 */
}

#send-button:hover {
    background-color: #4cae4c;
}