app/static/css/chat.css

/* app/static/css/chat.css - 聊天窗口和消息样式 */

/* 聊天窗口样式 */
.chat-window {
    border: 1px solid var(--border-color);
    border-radius: 8px; /* 调整圆角 */
    height: 400px; /* 增加固定高度 */
    overflow-y: auto;
    padding: 15px; /* 增加内边距 */
    margin-bottom: 20px;
    background-color: var(--background-light); /* 聊天窗口背景 */
    display: flex; /* 启用 Flexbox */
    flex-direction: column; /* 消息垂直堆叠 */
}

.message {
    margin-bottom: 12px; /* 增加消息间距 */
    padding: 10px 15px; /* 调整内边距 */
    border-radius: 18px; /* 更大的圆角，使消息气泡更圆润 */
    max-width: 75%; /* 限制消息宽度 */
    word-wrap: break-word; /* 自动换行 */
}

.message.user {
    background-color: var(--primary-color);
    color: var(--text-light);
    align-self: flex-end;
    margin-left: auto;
    border-bottom-right-radius: 5px; /* 用户消息右下角略微变直 */
}

.message.bot {
    background-color: var(--background-medium);
    color: var(--text-dark);
    align-self: flex-start;
    margin-right: auto;
    border-bottom-left-radius: 5px; /* Bot 消息左下角略微变直 */
}

.message.system {
    background-color: var(--warning-color);
    color: var(--text-dark);
    text-align: center;
    margin: 15px auto;
    font-size: 0.9rem;
    padding: 8px 15px;
    border-radius: 8px;
}

/* 确保图片没有边框 */
.message img {
    max-width: 100%; /* 确保图片不超过其容器 */
    height: auto; /* 保持图片比例 */
    border: none; /* 移除任何边框 */
    outline: none; /* 移除任何轮廓 */
    display: block; /* 避免图片底部出现额外空间 */
    margin: 5px 0; /* 增加图片上下间距 */
}





.input-area {
    display: flex; /* 使用 Flex 布局 */
    align-items: flex-end; /* 底部对齐 */
    gap: 10px; /* 间距 */
    margin-top: 10px; /* 增加与聊天窗口的间距 */
}

.input-area textarea {
    flex-grow: 1; /* 文本框占据剩余空间 */
    min-height: 50px; /* 调整最小高度，更小 */
    max-height: 120px; /* 调整最大高度，更小 */
    resize: vertical; /* 允许垂直调整大小 */
    margin-bottom: 0; /* 移除默认底部外边距 */
    box-sizing: border-box; /* 包含 padding 和 border 在宽度内 */
}

.input-area .button-group {
    display: flex; /* 按钮组内部使用 Flex 布局 */
    gap: 10px; /* 按钮之间的间距 */
    flex-shrink: 0; /* 防止按钮组缩小 */
}

.input-area #image-upload {
    /* 隐藏默认文件输入框，通过 label 触发 */
    display: none;
}

.input-area .file-upload-label,
.input-area #send-button {
    padding: 8px 12px; /* 统一按钮内边距，使其更小 */
    border-radius: 5px; /* 统一按钮圆角，使其更圆润 */
    font-size: 0.85rem; /* 统一按钮字体大小 */
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    white-space: nowrap; /* 防止文本换行 */
    display: flex; /* 启用 Flexbox */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 38px; /* 统一按钮高度，使其更小 */
    box-sizing: border-box; /* 确保 padding 和 border 包含在高度内 */
    flex-shrink: 0; /* 防止按钮缩小 */
    flex-grow: 0; /* 防止按钮拉伸 */
}

.input-area .file-upload-label {
    background-color: var(--info-color); /* 信息蓝色 */
    color: var(--text-light);
    cursor: pointer;
}

.input-area .file-upload-label:hover {
    background-color: #138496; /* 鼠标悬停时的深蓝色 */
    transform: translateY(-2px);
}

#send-button {
    background-color: var(--primary-color); /* 蓝色按钮 */
    color: var(--text-light);
    cursor: pointer;
}

#send-button:hover {
    background-color: var(--primary-dark); /* 鼠标悬停时的深蓝色 */
    transform: translateY(-2px);
}