.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 100px);
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 20px;
}

.message {
    margin-bottom: 15px;
    padding: 10px 15px;
    border-radius: 15px;
    max-width: 70%;
    word-wrap: break-word;   /* 가독성 대비 */
}

.user-message {
    background-color: var(--bs-primary);
    color: white;
    margin-left: auto;
}

.ai-message {
    background-color: var(--bs-light);
    color: var(--bs-dark);
    max-width: 100%;         /* ① 폭 제한 해제 */
    align-self: flex-start;  /* ② 왼쪽에 붙이되 전체 폭 활용 */
}

.chat-input-container {
    display: flex;
    gap: 10px;
}

.chat-input {
    flex-grow: 1;
}

.send-button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}