/* 全局样式 */
html, body {
    height: 100%;
    display: flex;
    flex-direction: column; /* 让子元素沿着主轴（垂直方向）排列 */
}

body {
    display: flex;
    flex-direction: column;
}



/* 保持录音按钮和语音转录文本框在底部 */
.voice-box, .record-btn {
    margin-top: auto; /* 将它们推到底部 */
}

body, h1, input, button, textarea {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* 页面 heading 样式 */
.h1 {
    font-size: 18px;
    color: #333;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    padding: 5px 0;
}

hr {
    border: none;
    height: 1px;
    background-color: #eaeaea;
    margin-bottom: 20px;
}

/* 语音框区域 */

.record-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 10px;
  }

.voice-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 8px;
}

#voice-txt {
    min-height: 0px;
    width: calc(100% - 50px); /* 减去左右各20px的padding */
    padding-top: 6px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-left: 6px;
}

#text-input-btn {
    min-height: 0px;
    width: calc(70px); /* 减去左右各20px的padding */
    padding-top: 6px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-bottom: 10px;
    height: 38px;
}


.button-disabled {
    background-color: #cccccc !important; /* 灰色背景 */
    /* 你可以添加更多样式，如改变文字颜色等 */
    color: #666666 !important; /* 深灰色文字 */
}

#record-btn {
    display: flex; /* 设置按钮为flex布局 */
    width: calc(100% ); /* 添加这一行使按钮宽度与文本框相同 */
    padding: 0px 10px 0px;
    border: none;
    border-radius: 5px;
    background-color: #5cb85c;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease; /* 添加过渡效果 */
    margin: 0 auto; /* 添加这一行使按钮水平居中 */
    position: relative; /* 定位上下文 */

    justify-content: space-between; /* 水平方向上左右对齐 */
    align-items: center; /* 垂直居中 */
    height: 35px;
}

.btn-text,
.mic-icon {
    flex: 1; /* 两者都占满按钮的50%空间 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 图标垂直居中 */
}

.record-btn .mic-icon img {
    align-items: center; /* 图标垂直居中 */
    width: 18px; /* 图标尺寸，根据需求调整 */
    height: auto; /* 高度自动调整 */
} 


#record-btn:hover {
    background-color: #4cae4c;
}

/* AI响应区域样式 */

.ai-response-box {
    display: flex; /* 启用flex布局 */
    flex-direction: column; /* 设置主轴方向为垂直 */
    justify-content: center;
    flex: 1; /* 占据所有剩余空间 */
    overflow: auto; /* 如果内容过多，则允许滚动 */
    min-height: 0; /* 修正flex子项在IE中的溢出问题 */
    align-items: center;
    gap: 10px;
    padding: 0 10px 5px;
    margin-bottom: 10px;
}


element.style {
    margin-bottom: 0px;
    padding-left: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-right: 5px;
    margin-left: 5px;
}

/* 移除ai-response的textarea样式，改为div的容器样式 */
#ai-response {
    display: flex;
    width: calc(100% - 15px); /* 减去左右各20px的padding */
    flex-direction: column;
    flex-grow: 1; /* 使其填充容器剩余空间 */
    overflow-y: auto; /* 允许内容超出时滚动 */
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 15px;
    /* 移除height: 350px; 使用flex-grow来代替 */
}


/* 消息通用样式 */
.message {
    width: fit-content; /* 让div的宽度根据内容调整，但不超过父元素宽度 */
    max-width: 90%; /* 最大宽度，根据需要调整 */
    padding: 5px 5px;
    border-radius: 5px;
    margin-bottom: 10px; /* 消息间距 */
    word-wrap: break-word; /* 超出最大宽度时进行换行 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); /* 可选的阴影效果 */
}

/* 用户消息样式 */
.user-message {
    background-color: #bbd2f0; /* 用户消息的背景色 */
    color: black; /* 文本颜色，根据背景色调整以保持可读性 */
    align-self: flex-end; /* 用户消息靠右 */
    margin-right: 10px;
    padding-top: 10px;     /* 上内边距 */
    padding-right: 10px;    /* 右内边距 */
    padding-bottom: 10px;   /* 下内边距 */
    padding-left: 10px;    /* 左内边距 */
    margin-bottom: 0px;

}


.ai-message {
    /* ...定义消息内容的样式... */
    background-color: #eaeaea; /* AI消息的背景色 */
    color: black;
    align-self: flex-start; /* AI消息靠左 */
    margin-left: 10px;
    padding-top: 2px;     /* 上内边距 */
    padding-right: 5px;    /* 右内边距 */
    padding-bottom: 2px;   /* 下内边距 */
    padding-left: 8px;    /* 左内边距 */
    margin-bottom: 10px;
}
/* 消息通用样式 */
.message_time{
    /* ...定义显示时间的样式... */
    width: fit-content; /* 让div的宽度根据内容调整，但不超过父元素宽度 */
    max-width: 80%; /* 最大宽度，根据需要调整 */
    padding: 1px 1px;
    border-radius: 5px;
    margin-bottom: 2px; /* 消息间距 */
    color: black; /* 文本颜色，根据背景色调整以保持可读性 */
    align-self: flex-end; /* 用户消息靠右 */
    margin-right: 10px;
}

.ai-message_time {
    /* ...定义显示时间的样式... */
    width: fit-content; /* 让div的宽度根据内容调整，但不超过父元素宽度 */
    max-width: 80%; /* 最大宽度，根据需要调整 */
    padding-top: 2px;     /* 上内边距 */
    padding-right: 5px;    /* 右内边距 */
    padding-bottom: 2px;   /* 下内边距 */
    padding-left: 5px;    /* 左内边距 */
    margin-bottom: 0px;
    border-radius: 5px;
    margin-bottom: 2px; /* 消息间距 */
    color: black; /* 文本颜色，根据背景色调整以保持可读性 */
    align-self: flex-end; /* 用户消息靠右 */
    margin-right: 10px;
}



/* 避免最后一条消息紧贴输入框 */
.ai-response-box {
    margin-bottom: 10px;
}

/* 可能需要调整的样式 */
.voice-box, .record-btn {
    padding-bottom: 10px; /* 如果底部有额外空间，可适当减少 */
}


/* AI模型选择区域的样式 */
.ai-model-box {
    display: flex;
    align-items: center; /* 保持垂直居中 */
    justify-content: space-between; /* 开关和下拉菜单两端对齐 */
    padding: 10px; /* 维持之前的内边距 */
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    height: 29px;

    min-height: 0; /* 修正flex子项在IE中的溢出问题 */
    gap: 10px;
    padding: 0 10px 5px;
    margin-bottom: 10px;
}

/* 下拉框悬停和焦点样式 */
#aiModelSelect:hover,
#aiModelSelect:focus {
    border-color: #007bff; /* 悬停或焦点时的边框颜色 */
}

/* 下拉选项样式 */
#aiModelSelect option {
    padding: 8px; /* 增加填充以改善触感 */
    height: 29px;
}

/* 下拉选项样式 */
#aiModelSelect {
    height: 29px;
}


.switch {
    position: relative;
    display: inline-block;  /* 使用inline-block来保持元素在一行 */
    width: auto;  /* 设置宽度为自动，根据内容调整 */
    padding: 2px 10px;  /* 添加一些内边距 */
    margin-right: 20px;  /* 与其他元素的间隔 */
    vertical-align: middle;  /* 垂直对齐 */
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: relative;  /* 更改为相对位置 */
    display: inline-block;  /* 使用inline-block确保与文本在同一行 */
    width: 50px;  /* 滑块的宽度 */
    height: 24px;  /* 滑块的高度 */
    background-color: #ccc;
    border-radius: 24px;
    vertical-align: middle;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: '';
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(26px);  /* 根据滑块宽度调整 */
}

.switch span {
    display: inline-block;
    margin-left: 10px;  /* 文本与滑块之间的间隔 */
    vertical-align: middle;
    white-space: nowrap;  /* 防止文本换行 */
}