/* style.css */

/* 基础重置和通用样式 */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6; /* 更柔和的背景色 */
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    text-align: center;
    color: #007bff; /* 主题蓝色 */
    margin-top: 20px;
    margin-bottom: 30px; /* 增加底部外边距 */
}

.input-area {
    margin-bottom: 15px;
    width: 80%; /* 输入区域宽度 */
    max-width: 600px; /* 最大宽度限制 */
}

.input-area label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555; /* 标签颜色 */
}

.input-area input[type="text"],
.input-area input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    margin-bottom: 10px;
}

/* 对话容器样式 */
.chat-container {
    width: 80%; /* 对话容器宽度 */
    max-width: 600px; /* 最大宽度限制 */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    overflow: hidden; /* 防止内容溢出 */
    display: flex;
    flex-direction: column; /* 垂直布局 */
}

.message-area {
    padding: 20px;
    height: 400px; /* 固定高度，可以根据需要调整 */
    overflow-y: auto; /* 垂直滚动条 */
    display: flex;
    flex-direction: column; /* 消息垂直排列 */
}

/* 消息气泡样式 */
.user-message, .api-message, .error-message {
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 20px;
    clear: both; /* 清除浮动 */
    word-wrap: break-word; /* 自动换行 */
    max-width: 80%; /* 消息气泡最大宽度 */
}

.user-message {
    background-color: #e0f7fa; /* 用户消息背景色，淡蓝色 */
    align-self: flex-end; /* 用户消息靠右显示 */
    float: right; /* 靠右浮动，为了 clear:both 生效 */
}

.api-message {
    background-color: #e8eaf6; /* API 消息背景色，淡紫色 */
    align-self: flex-start; /* API 消息靠左显示 */
    float: left; /* 靠左浮动，为了 clear:both 生效 */
}

.error-message {
    background-color: #ffdddd; /* 错误消息背景色，淡红色 */
    color: #d8000c; /* 错误消息文字颜色，深红色 */
    border: 1px solid #f03a37; /* 错误消息边框，红色 */
}


/* 消息输入区域样式 */
.chat-container .input-area {
    display: flex;
    padding: 10px 20px;
    border-top: 1px solid #eee; /* 输入区域顶部边框 */
    margin-bottom: 0; /* 移除输入区域底部外边距 */
    width: auto; /* 让输入区域自动撑满容器宽度 */
    max-width: none; /* 取消最大宽度限制 */
}

.chat-container .input-area input[type="text"] {
    flex-grow: 1; /* 输入框自动填充剩余空间 */
    margin-right: 10px; /* 输入框右侧外边距 */
    border-radius: 20px; /* 更圆润的输入框 */
    border: 1px solid #ccc;
    padding: 10px 15px;
    font-size: 16px;
    margin-bottom: 0; /* 移除输入框底部外边距 */
}

#send-button {
    background-color: #007bff; /* 发送按钮背景色，主题蓝色 */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px; /* 更圆润的按钮 */
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* 过渡效果 */
}

#send-button:hover {
    background-color: #0056b3; /* 鼠标悬停时按钮颜色加深 */
}

/* 响应式设计 (简单示例) */
@media (max-width: 768px) {
    .input-area, .chat-container {
        width: 95%; /* 小屏幕下输入和对话容器宽度 */
    }
    .message-area {
        height: 300px; /* 小屏幕下消息区域高度 */
    }
}