/* 统一盒模型为 border-box */
*, *::before, *::after {
    box-sizing: border-box;
}


/* 定义 CSS 变量 */
:root {
    --font-family: 'Microsoft YaHei', 'PingFang SC', 'HarmonyOS Sans', 'Noto Sans', Arial, sans-serif;
    --color-background: #f7f9fc;
    --color-primary: #feb565;
    --color-secondary: #2f3542;
    --color-text: #2f3542;
    --color-white: #ffffff;
    --color-light-gray: #dcdde1;
    --color-hover: #f1f2f6;
    --color-active: #dfe4ea;
    --color-scrollbar: #dcdde1;
    --color-scrollbar-hover: #b2bec3;
    --border-radius: 5px;
    --transition-time: 0.3s;
    --color-sidebar-bg: #FFF8E7; /* 淡橘色 */
    --color-main-theme: #feb565;
    --color-sidebar-text: #826d49;
}

/* 通用样式 */
body {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    overflow: hidden; /* 禁用滚动 */
    height: 100%; /* 确保占满整个页面高度 */
    margin: 0; /* 避免多余的空白 */
}

/* 添加邀请浮窗包装器样式 */
.invite-float-wrapper {
    position: relative;
    margin-left: 10px; /* 与签到按钮的间距 */
    display: inline-block;
}

.invite-float-button {
    position: fixed; /* 固定定位 */
    display: flex;
    flex-direction: column; /* 使图标和文字垂直排列 */
    align-items: center;
    justify-content: center;
    background-color: #feb565;
    color: #fff;
    cursor: pointer;
    transition: transform 0.3s;
    z-index: 999;
    /* PC端样式 - 媒体查询外部的为PC端样式 */
    width: 44px; /* 与签到按钮相同大小 */
    height: 44px; /* 与签到按钮相同大小 */
    border-radius: 50%; /* 圆形 */
    box-shadow: 0 2px 6px rgba(254, 181, 101, 0.3);
    opacity: 0.9;
    /* PC端位置样式 - 重定位到头部导航栏 */
    left: auto;
    top: auto;
    position: relative; /* 相对定位而非固定定位，使其能在导航栏内定位 */
    margin-left: 0; /* 移除原来的margin，因为已经在wrapper上设置 */
}

/* 添加邀请浮窗关闭按钮样式 */
.invite-close-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    background-color: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    z-index: 1000;
    display: none; /* 默认在PC端隐藏 */
    border: none;
}

.invite-close-btn i {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.invite-close-btn:hover {
    background-color: transparent;
    transform: scale(1.1);
}

.invite-close-btn:active {
    transform: scale(0.95);
    background-color: transparent;
}

.invite-float-button:hover {
    background-color: #ffa143;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(254, 181, 101, 0.4);
}

.invite-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px; /* 与签到按钮图标大小一致 */
    margin-bottom: 0; /* 移除底部间距 */
}

.invite-text {
    display: none; /* PC端隐藏文字，与签到按钮保持一致 */
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
}

/* 移动端样式 - 使用媒体查询覆盖PC端样式 */
@media screen and (max-width: 576px) {
    .invite-float-wrapper {
        position: fixed;
        left: 15px; /* 左侧距离 */
        top: 60px; /* 移动端调整位置 */
        margin-left: 0;
        z-index: 999;
        touch-action: none; /* 防止触摸事件被浏览器默认处理 */
        user-select: none; /* 防止文本被选中 */
    }
    
    .invite-float-button {
        width: 64px; /* 再稍微加宽一点 */
        height: 64px; /* 相应加高 */
        position: relative; /* 改为相对定位，相对于wrapper */
        left: auto; /* 清除原有的left */
        top: auto; /* 清除原有的top */
        margin-left: 0; /* 移除PC端的margin */
        flex-direction: column; /* 确保垂直排列 */
        background: linear-gradient(135deg, #ff6b6b, #ff7e5f, #ff9966); /* 喜庆渐变红色背景 */
        box-shadow: 0 3px 10px rgba(255, 107, 107, 0.4); /* 更明显的阴影 */
        border: 2px solid rgba(255, 255, 255, 0.6); /* 更明显的白色边框 */
        animation: pulse 2s infinite; /* 添加脉冲动画 */
        justify-content: center;
        padding: 3px;
        overflow: hidden;
        border-radius: 50%; /* 确保是圆形 */
        cursor: move; /* 显示移动光标 */
    }
    
    /* 添加脉冲动画 */
    @keyframes pulse {
        0% { transform: scale(1); box-shadow: 0 3px 10px rgba(255, 107, 107, 0.4); }
        50% { transform: scale(1.05); box-shadow: 0 5px 15px rgba(255, 107, 107, 0.6); }
        100% { transform: scale(1); box-shadow: 0 3px 10px rgba(255, 107, 107, 0.4); }
    }
    
    /* 移动端隐藏图标 */
    .invite-icon {
        display: none;
    }
    
    /* 移动端文字样式优化 */
    .invite-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 15px; /* 再增大字体 */
        font-weight: bold;
        white-space: normal;
        text-align: center;
        line-height: 1.3;
        color: #ffffff; /* 纯白色文字 */
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* 文字阴影增强可读性 */
    }
    
    /* 第一行文字"邀请"样式 */
    .invite-text span:first-child {
        font-size: 17px; /* 第一行字体略大 */
        margin-bottom: 2px;
    }
    
    /* 第二行文字"领会员"样式 */
    .invite-text span:last-child {
        font-size: 13px; /* 第二行字体略小 */
    }
    
    /* 删除装饰点点相关代码 */
    
    /* 激活状态 */
    .invite-float-button:active {
        transform: scale(0.95);
        animation: none;
    }
    
    /* 移动端显示关闭按钮 */
    .invite-close-btn {
        display: none; /* 移动端不再显示关闭按钮 */
        top: -5px;
        right: -5px;
        width: 18px;
        height: 18px;
        background-color: transparent;
    }
    
    .invite-close-btn i {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
    }
}

/* 添加音频处理指示器样式 */
.audio-processing-indicator {
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 4px;
    max-width: fit-content;
    margin-left: auto;
    margin-right: 10px;
    color: #333;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.audio-processing-indicator i {
    margin-right: 8px;
    color: var(--color-primary);
    font-size: 16px;
}

/* 临时音频处理包装器样式 */
.temp-audio-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    /* 确保不会有用户消息的背景色 */
    background: none !important;
}

/* 音频处理错误提示样式 */
.audio-processing-error {
    display: flex;
    align-items: center;
    background-color: #ffeeee;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 4px;
    max-width: fit-content;
    margin-left: auto;
    margin-right: 10px;
    color: #d32f2f;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.audio-processing-error i {
    margin-right: 8px;
    color: #d32f2f;
    font-size: 16px;
}

.container {
    display: flex;
    flex-direction: row;
    height: 100vh;
}

.main-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
}

/* 为 page 添加样式 */
.page {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    height: 100%;
}

/* 左侧菜单栏样式 */
.left-sidebar {
    width: 120px; /* 将宽度增加一倍 */
    flex-shrink: 0;
    background-color: var(--color-sidebar-bg); /* 使用新的背景色 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 居中对齐 */
    padding: 20px 0;
}

.logo-container {
    width: 100%;
    height: 100px; /* 高度等于导航栏宽度，形成正方形 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -25px; /* 负值将图片向上移动 */
    cursor: pointer;
    flex-direction: column; /* 改为纵向排列 */
}

.logo-image {
    max-width: 70%;
    max-height: 70%;
    transition: transform 0.3s ease; /* 默认平滑缩放效果 */
}

/* 添加logo文字样式 */
.logo-text {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-main-theme);
    margin-top: -1 px; /* 调整与logo图片的间距 */
}
@keyframes shake {
    0%, 100% {
        transform: rotate(0deg); /* 初始位置 */
    }

    25% {
        transform: rotate(-15deg); /* 向左旋转 */
    }

    50% {
        transform: rotate(15deg); /* 向右旋转 */
    }

    75% {
        transform: rotate(-10deg); /* 回到较小角度 */
    }
}

/* 点击时的晃动效果 */
.logo-container.shake .logo-image {
    animation: shake 0.6s ease;
}


.menu-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px; /* 增加顶部外边距 */
}

.menu-item {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin-top: 20px; /* 与手机号显示保持距离 */
}

    /* 通用按钮样式 */
    /* 通用按钮样式 */
    .menu-item a {
        width: 100%;
        padding: 14px 14px;
        font-size: 16px;
        font-weight: 600;
        color: #826d49; /* 深灰橘色文字 */
        background-color: transparent; /* 背景透明 */
        border: none; /* 无边框 */
        border-radius: 10px; /* 无圆角 */
        text-align: left; /* 左对齐 */
        display: flex; /* 使用 Flexbox 布局 */
        align-items: center; /* 图标与文字垂直居中 */
        gap: 10px; /* 图标与文字间距 */
        cursor: pointer;
        transition: all 0.1s ease; /* 平滑过渡效果 */
        box-shadow: none; /* 无阴影 */
        text-decoration: none
    }

        /* 选中状态：深蓝色背景 + 白色边框 */
        .menu-item a.active {
            background-color: #feb565; /* 深蓝色背景 */
            color: #FFF8E7; /* 白色文字 */
            text-decoration: none ;
            border-radius: 5px; /* 略有圆角 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加轻微阴影 */
        }

        /* 图标样式 */
        .menu-item a i {
            font-size: 20px; /* 图标大小 */
            color: #826d49; /* 未选中时图标颜色与文字一致 */
        }

        /* 选中状态下的图标颜色 */
        .menu-item a.active i {
            color: #FFFFFF; /* 图标颜色变为白色 */
        }

#mineButton i {
    margin-right: 7px; /* 修改图标和文字的间距 */
}



.spacer {
    flex-grow: 1; /* 占据剩余空间，将手机号推到底部 */
}

.phone-number {
    padding: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: var(--color-sidebar-text);
    position: relative;
    display: none; /* 默认隐藏，未登录时不显示 */
}

.phone-number.logged-in {
    display: block; /* 登录后显示 */
}
/* 登录按钮样式 */
.login-button {
    width: 95%; /* 增加宽度至左侧栏的 95% */
    padding: 10px 42px; /* 调整按钮内边距 */
    font-size: 14px; /* 调整字体大小，更适合宽按钮 */
    font-weight: bold; /* 字体加粗 */
    color: white; /* 按钮文字颜色 */
    text-align: center; /* 文本水平居中 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标指针样式 */
    margin: 20px auto; /* 增加外边距 */
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    white-space: nowrap; /* 防止文字换行 */
    top: -5px;

    /* 更高级的背景渐变 */
    background: linear-gradient(
        120deg,
        #ffe6e6, /* 浅粉色 */
        #feb565, /* 橙色 */
        #ff7f50, /* 珊瑚橙 */
        #ff4500, /* 红色 */
        #d4af37 /* 金色 */
    );
    background-size: 300% 300%; /* 放大背景尺寸以实现更柔和的动画效果 */
    animation: gradientFlow 4s linear infinite; /* 动态渐变动画 */

    /* 添加立体光泽效果 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), 
                0 4px 12px rgba(255, 255, 255, 0.3); /* 柔和阴影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 悬停效果 */
.login-button:hover {
    transform: scale(1.05); /* 悬停时轻微放大 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 
                0 6px 15px rgba(255, 255, 255, 0.5); /* 增强光泽 */
}

/* 禁用状态的样式 */
.login-button:disabled {
    background: linear-gradient(120deg, #dcdde1, #b2bec3); /* 禁用状态为高级灰色渐变 */
    cursor: not-allowed; /* 禁用状态鼠标样式 */
    color: #6c757d; /* 字体颜色调整为灰色 */
    box-shadow: none; /* 去掉阴影 */
}

/* 动态渐变动画 */
@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}



/* 聊天历史侧边栏样式 */
.sidebar {
    width: 260px;
    flex-shrink: 0;
    background-color: var(--color-white);
    border-right: 1px solid var(--color-light-gray);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.new-chat {
    margin-bottom: 20px;
}

    .new-chat button {
        display: block; /* 将按钮作为块级元素 */
        margin: 0 auto; /* 利用 margin 自动居中 */
        width: 60%;
        padding: 12px;
        background-color: var(--color-sidebar-bg);
        color: #826d49;
        border: none;
        cursor: pointer;
        font-size: 16px;
        border-radius: 30px;
        transition: background-color var(--transition-time);
        text-align: center; /* 确保按钮内文字居中 */
    }

        .new-chat button:focus {
            outline: none;
        }



.chat-list {
    flex-grow: 1;
    overflow-y: auto;
}

.chat-list::-webkit-scrollbar {
    width: 7px; /* 滚动条宽度 */
    height: 3px; /* 横向滚动条高度（如果有） */
}

.chat-list::-webkit-scrollbar-thumb {
    background-color: #cbd3cb; /* 滚动条的颜色 */
    border-radius: 10px; /* 滚动条圆角 */
    border: 2px solid var(--color-sidebar-bg); /* 滚动条边距，使滚动条看起来更细 */
}

.chat-list::-webkit-scrollbar-track {
    background-color: transparent; /* 隐藏轨道 */
}

.chat-list::-webkit-scrollbar-track:hover {
    background-color: #f0f0f0; /* 鼠标悬停时的轨道颜色 */
}

/* 提示文字样式 */
.chat-list-login-tip {
    text-align: center;
    color: #999;
    font-size: 14px;
    padding: 20px;
    line-height: 1.5;
    margin-top: 30vh; /* 添加这行，将提示文本向下移动到视窗高度的 40% 处 */
}

.chat-list-login-tip.show {
    display: block !important;
}

.chat-list-login-tip.hide {
    display: none;
}
.chat-list-login-tip.show {
    display: block !important; /* 使用 !important 确保显示 */
}

.chat-list-login-tip.hide {
    display: none;
}


.chat-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    transition: background-color var(--transition-time);
}

    .chat-item i {
        margin-right: 12px;
        color: var(--color-primary);
    }

    .chat-item:hover,
    .chat-item:focus {
        background-color: #FFF8E7;
        border-radius: 11px;
        margin-right: 16px;
    }

.chat-item.active {
    background-color: var(--color-primary); /* 选中背景色 */
    margin-right: 16px; /* 右边收窄 */
    color: white; /* 选中时字体颜色变白 */
    border-radius: 11px;
    transition: all 0.3s ease; /* 平滑过渡 */
}

    .chat-item:focus {
        outline: none;
    }

/* 聊天区域布局 */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    background-color: var(--color-background);
}

/* 聊天消息区域 */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 20px;
    position: relative; /* 添加相对定位，作为水印的参考点 */
    background-color: var(--color-background);
}

/* 聊天窗口水印 - 默认隐藏 */
.chat-watermark {
    position: absolute;
    top: 30%; /* 将位置从20%调整到30%，往下移动 */
    left: 50%;
    transform: translateX(-50%);
    display: none; /* 默认隐藏 */
    flex-direction: column;
    align-items: center;
    pointer-events: none; /* 确保不会影响点击事件 */
    z-index: 1; /* 确保在聊天内容下方 */
    opacity: 0.35; /* 半透明效果 */
}

.chat-watermark img {
    width: 100px; /* 将图片宽度从80px增加到100px */
    height: auto;
    margin-bottom: 10px;
}

.chat-watermark p {
    font-size: 16px; /* 将文字大小从14px增加到16px */
    color: var(--color-text);
    text-align: center;
    margin: 0;
    white-space: nowrap;
}

/* 在移动端显示水印 */
@media screen and (max-width: 576px) {
    .chat-watermark {
        display: flex; /* 在移动端显示水印 */
    }
}

/* 图片预览区域 */
.image-preview-area {
    display: none;
    width: 100%;
    min-height: 0;
    max-height: 120px;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    background-color: var(--color-background);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 2;
    padding-left: 187px;  /* 这个值可以根据实际需要调整 */
    margin-top: -100px;  /* 保持原有的margin-top */
    padding-top: 13px;  /* 保持原有的padding-top */
    bottom: -15px;  /* 添加bottom属性使整个区域下移 */
}

/* 当有图片时显示预览区域 */
.image-preview-area.has-images {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
}

/* 图片预览容器 */
.image-preview-container {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
}

/* 预览图片样式 */
.image-preview {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-light-gray);
}

/* 删除按钮 */
.image-delete-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
}

.image-delete-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .chat-messages {
        padding-bottom: 120px; /* 为图片预览区域预留空间 */
    }

    .image-preview-area {
        position: absolute;
        bottom: 70px; /* 调整位置，确保在输入框上方 */
        left: 0;
        right: 0;
        max-height: 100px;
        padding: 4px;
        background-color: var(--color-background);
        z-index: 10;
        padding-left: 15px;  /* 这个值可以根据实际需要调整 */
    }
    
    .image-preview {
        width: 60px;
        height: 60px;
    }
    
    .image-delete-btn {
        width: 16px;
        height: 16px;
        top: -4px;
        right: -4px;
    }
}

.chat-header {
    padding: 15px 20px;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    flex-shrink: 0;
}

.button-group {
    display: flex;
    align-items: center;
}

    .button-group button {
        background-color: var(--color-primary);
        border: none;
        color: var(--color-white);
        padding: 8px 16px;
        margin-left: 12px;
        cursor: pointer;
        border-radius: var(--border-radius);
        font-size: 14px;
        transition: background-color var(--transition-time);
    }

        .button-group button:focus {
            outline: none;
        }



.chat-messages {
    flex-grow: 1;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-message, .bot-message {
    padding: 15px;
    margin: 10px;
    border-radius: 10px;
    max-width: 80%;
    white-space: pre-wrap; /* 添加这行以保留换行符 */
    word-wrap: break-word;
    position: relative; /* 添加相对定位 */
    z-index: 2; /* 确保在水印上方 */
    background-color: var(--color-sidebar-bg); /* 确保背景色 */
}

.user-message {
    background-color: var(--color-sidebar-bg);
    color: var(--color-text);
    align-self: flex-end;
    border-radius: 20px;
    padding: 15px 20px;
    max-width: 70%; /* 与输入框宽度保持一致 */
    min-width: 10%;
    display: inline-block;
    word-wrap: break-word;
    word-break: break-word;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
}


.bot-message {
    background-color: var(--color-white);
    color: var(--color-text);
    align-self: flex-start;
    border-radius: 20px;
    padding: 15px 20px;
    max-width: 70%; /* 与输入框宽度保持一致 */
    min-width: 10%;
    display: inline-block;
    word-wrap: break-word;
    word-break: break-word;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 2; /* 确保在水印上方 */
}


/* 复制按钮容器 */
.copy-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 4px;
    /* 移除 margin-left */
    max-width: 100%; /* 与父容器宽度一致 */
}

/* 复制按钮样式 */
.copy-button {
    background-color: transparent;
    border: none;
    color: #feb565; /* 默认颜色 */
    font-size: 16px; /* 图标大小 */
    cursor: pointer;
    padding: 4px; /* 缩小按钮的点击区域 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

    /* 悬停时按钮的样式 */
    .copy-button:hover {
        color: var(--color-primary); /* 悬停时颜色变化 */
    }

/* 隐藏图像生成机器人消息中的复制按钮 */
.is-image-gen-bot .copy-button {
    display: none !important;
}


/* 提示框样式 */

.tooltip {
    visibility: hidden; /* 默认隐藏 */
    opacity: 0; /* 默认透明 */
    background-color: var(--color-text); /* 提示框背景色 */
    color: var(--color-white); /* 提示文字颜色 */
    text-align: center;
    border-radius: 5px; /* 圆角 */
    padding: 5px 8px;
    font-size: 12px; /* 字体大小 */
    position: absolute;
    bottom: -30px; /* 显示在按钮下方 */
    left: 50%; /* 居中对齐按钮 */
    transform: translateX(-50%); /* 水平居中 */
    white-space: nowrap; /* 防止换行 */
    z-index: 1;
    transition: opacity 0.3s ease; /* 平滑过渡 */
}

/* 悬停时显示 tooltip */
.copy-container:hover .tooltip {
    visibility: visible; /* 显示 */
    opacity: 1; /* 不透明 */
}

.message-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左对齐 */
    margin-bottom: 20px; /* 消息之间的间距 */
    width: 70%; /* 与输入框宽度保持一致 */
    margin-left: auto;
    margin-right: auto;
    position: relative; /* 添加相对定位 */
    z-index: 2; /* 确保在水印上方 */
}


.chat-input {
    display: flex;
    padding: 15px 20px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 12px; /* 统一间距 */
    position: relative; /* 确保相对定位，使绝对定位的子元素能正确定位 */
    width: 100%; /* 确保宽度为100% */
    box-sizing: border-box;
}

.chat-input textarea {
    box-sizing: border-box;
    flex-grow: 0;
    width: 70%;
    padding: 12px 8px;
    border: 1.5px solid transparent;
    border-radius: 5px;
    outline: none;
    font-size: 18px;
    line-height: 20px;
    transition: border-color var(--transition-time);
    resize: none;
    overflow-y: hidden;
    height: 44px;
    min-height: 44px;
    max-height: 150px;
    margin-right: 0; /* 移除右边距，使用gap控制间距 */
}

.chat-input textarea {
    position: relative;
    background-image: linear-gradient(#fff, #fff), /* 背景色 */
                      linear-gradient(90deg, #feb565, #ff7f50, #ff4500);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-image-source: linear-gradient(90deg, #feb565, #ff7f50, #ff4500);
    border-image-slice: 1;
}

/* 点击输入框时触发动画 */
.chat-input textarea:focus {
    animation: borderRotate 3.5s linear infinite; /* 动画规则 */
}

/* 图像生成机器人输入框样式 */
.chat-input textarea.image-gen-input {
    background-image: linear-gradient(#fff, #fff), 
                      linear-gradient(90deg, #6a5acd, #9370db, #8a2be2);
    color: #6a5acd;
    font-style: italic;
    border-image-source: none;
    cursor: pointer;
    position: relative;
    width: 70%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 8px;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.98);
    border-radius: 20px;
    border: 2px solid #9370db;
    box-shadow: 0 0 10px rgba(147, 112, 219, 0.3);
    box-sizing: border-box;
    flex-grow: 1;
    height: 44px;
    min-height: 44px;
    margin-right: 0;
}

.chat-input textarea.image-gen-input::placeholder {
    color: #9370db;
    font-weight: 500;
    text-align: center;
}

/* 图像生成机器人输入框的点击/聚焦动画 */
.chat-input textarea.image-gen-input:focus {
    animation: borderPulse 2s ease-in-out infinite alternate;
    outline: none;
}

@keyframes borderPulse {
    0% {
        border-color: #6a5acd;
        box-shadow: 0 0 5px rgba(147, 112, 219, 0.3);
    }
    100% {
        border-color: #9370db;
        box-shadow: 0 0 15px rgba(147, 112, 219, 0.6);
    }
}

/* 移动端样式调整 */
@media screen and (max-width: 576px) {
    .chat-input textarea.image-gen-input {
        padding: 12px;
        font-size: 15px;
        border-radius: 18px;
        width: 100% !important; /* 确保100%宽度 */
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        z-index: 100 !important; /* 提高z-index确保在最上层 */
        border: 3px solid var(--color-primary);
        color: var(--color-primary);
        font-weight: 500;
        background-image: linear-gradient(#fff, #fff), 
                         linear-gradient(90deg, #feb565, #ff7f50, #ff4500);
        box-shadow: 0 0 12px rgba(255, 127, 80, 0.3);
        min-width: 100% !important; /* 确保最小宽度也是100% */
        max-width: 100% !important; /* 确保最大宽度也是100% */
        transform: none !important; /* 禁止应用可能的transform */
    }
    
    .chat-input textarea.image-gen-input::placeholder {
        color: var(--color-primary);
        opacity: 0.9;
    }
    
    /* 保持移动端chat-input的原有样式 */
    .chat-input {
        position: relative;
        padding: 10px 15px;
    }
    
    /* 单独设置包含图像生成输入框的chat-input样式 */
    .chat-input.image-gen-container {
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        border: none !important;
        background: transparent !important;
        width: 93% !important; /* 与mobile chat-input保持一致 */
        max-width: 93% !important;
        left: 50% !important; /* 保持居中定位 */
        transform: translateX(-50%) !important; /* 保持居中变换 */
        position: fixed !important; /* 确保使用固定定位 */
        bottom: 35px !important; /* 调整位置，使按钮更靠上 */
        z-index: 100 !important; /* 增大z-index确保覆盖其他元素 */
    }
}

.chat-input textarea::-webkit-scrollbar {
    width:3px ; /* 滚动条宽度 */
    
}

.chat-input textarea::-webkit-scrollbar-thumb {
    background-color: #b0b0b0; /* 合理的灰色 */
    border-radius: 10px;
}

.chat-input textarea::-webkit-scrollbar-thumb:hover {
    background-color: #909090; /* 悬停时稍深的灰色 */
}

.chat-input textarea::-webkit-scrollbar-track {
    background-color: transparent; /* 背景透明 */
    border-radius: 10px; /* 圆角滑轨 */
    
}


.send-button {
    width: 44px;
    height: 44px;
    background-color: var(--color-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-left: 12px; /* 确保与停止按钮的间距一致 */
}

.send-button i {
    font-size: 20px; /* 确保图标大小适中 */
    color: white;
}

 /* 去除悬停效果 */
.send-button:hover {
    transform: none; /* 无缩放效果 */
    box-shadow: none; /* 去掉阴影变化 */
}

/* 点击效果 */
.send-button:active {
    transform: scale(0.9); /* 按下时按钮缩小 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 点击时增加轻微阴影 */
}


/* Modal 样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(47, 53, 66, 0.8); /* 半透明背景 */
    justify-content: center;
    align-items: center;
}

/* 显示模态窗口的类 */
.modal.show {
    display: flex; /* 当添加 .show 类时，显示模态窗口 */
}
/* 登录弹窗内容容器 */
.modal-content {
    background-color: var(--color-white);
    padding: 0;
    border-radius: 10px;
    width: 650px;
    height: 400px;
    position: relative; /* 添加相对定位 */
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

/* 左侧图片部分 */
.login-left {
    width: 30%; /* 占一半宽度 */
    background-color: #f7f9fc; /* 备用背景色 */
}

.login-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保图片自适应填满容器 */
}

/* 右侧输入部分 */
.login-right {
    width: 70%; /* 占70%宽度 */
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    align-items: center; /* 居中对齐子元素 */
}

/* 标题样式 */
#loginModalTitle {
    font-size: 20px;
    text-align: center;
    color: var(--color-text);
    margin-bottom: 30px;
    font-weight: normal; /* 移除加粗样式 */
}

/* 表单样式 */
.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* 确保表单元素居中 */
}

/* 输入框样式 */
.login-input {
    width: 70%;
    padding: 12px;
    margin-bottom: 15px;
    font-size: 16px;
    border: 1px solid var(--color-light-gray);
    border-radius: 5px;
    transition: border-color var(--transition-time);
}

.login-input:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* 验证码部分 */
.verification-section {
    display: flex;
    align-items: stretch; /* 使子元素在垂直方向上拉伸一致高度 */
    gap: 10px; /* 验证码框和按钮间距 */
    margin-bottom: 20px;
    width: 70%; /* 设置整个验证码区域的宽度 */
}

    .verification-section .login-input {
        flex: 0 0 55%; /* 输入框占整个验证码区域的60%宽度 */
        max-width: none; /* 移除最大宽度限制 */
        min-width: 0; /* 移除最小宽度限制 */
        width: auto; /* 保持自动宽度（受 flex 影响） */
    }

.get-code-button {
    
    max-width: none; /* 移除最大宽度限制 */
    min-width: 0; /* 移除最小宽度限制 */
    padding: 12px 15px; /* 保持一致的内边距 */
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1.5; /* 统一行高 */
    cursor: pointer;
    transition: background-color var(--transition-time);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px; /* 确保高度一致 */
    width:155px;
}



/* 登录按钮样式 */
.login-submit-button {
    width: 70%;
    padding: 12px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color var(--transition-time);
}


/* 关闭按钮样式 */
.close {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 1000; /* 确保按钮在最上层 */
    background: none;
    border: none;
    font-size: 24px;
    color: #aaa;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 8px; /* 增加点击区域 */
}


.close:hover {
    color: #57606f;
}


/* 自定义滚动条 */
.chat-messages::-webkit-scrollbar {
    width: 8px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar);
    border-radius: 4px;
}

    .chat-messages::-webkit-scrollbar-thumb:hover {
        background-color: var(--color-scrollbar-hover);
    }

.chat-messages::-webkit-scrollbar-track {
    background-color: var(--color-hover);
}


/* Bot 选择器样式 */

.bot-selector {
    position: relative;
    display: inline-block;
    width: 150px; /* 设定固定宽度 */
}

.dropbtn {
    background-color: var(--color-white);
    font-size: 16px;
    color: var(--color-text);
    font-weight: 600;
    border: 1px solid var(--color-light-gray);
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between; /* 确保文字和箭头分布两侧 */
    padding: 10px 12px;
    width: 100%; /* 宽度固定为选择器容器宽度 */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

    .dropbtn i {
        font-size: 14px;
        transition: transform 0.3s ease;
        margin-left: auto; /* 确保箭头在右侧 */
    }

    .dropbtn:hover {
        background-color: var(--color-hover);
        border-color: var(--color-primary);
    }

    .dropbtn:focus {
        outline: none;
    }

/* 优化下拉菜单样式 */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--color-white);
    width: 100%; /* 下拉菜单宽度与选择框一致 */
    box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
    z-index: 1;
    border-radius: var(--border-radius);
    overflow: hidden;
    top: 100%; /* 确保紧贴选择框 */
    animation: fadeIn 0.3s ease;
    transition: opacity 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */
}

.dropdown-content.open {
    display: block;
    opacity: 1; /* 完全可见状态 */
    transform: translateY(0); /* 返回到原始位置 */
}

    .dropdown-content .bot-item {
        color: var(--color-text);
        padding: 10px 15px;
        text-decoration: none;
        display: block;
        cursor: pointer;
        transition: background-color 0.2s ease;
        white-space: nowrap; /* 防止名称换行 */
    }

        .dropdown-content .bot-item:hover {
            background-color: var(--color-hover);
        }


        /* 默认情况下隐藏下拉菜单 */
.dropdown-content {
    display: none;
}

/* 当添加了 'open' 类时显示下拉菜单 */
.dropdown-content.open {
    display: block;
}

/* 当添加了 'open' 类时，旋转箭头 */
.bot-selector.open .dropbtn i {
    transform: rotate(180deg);
}



/* 添加淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* 我的页面样式 */
#minePage {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
    overflow: hidden; /* 防止整个minePage滚动 */
    position: static; /* 使用静态定位 */
    width: 100%; /* 确保宽度填满 */
    background-color: #f5f5f5;
    z-index: 1; /* 确保在正确的层级 */
    height: 100vh; /* 视口高度 */
}

/* 添加内部滚动容器 */
.minepage-scroll-container {
    width: 100%;
    height: 100%;
    overflow-y: auto; /* 允许垂直滚动 */
    -webkit-overflow-scrolling: touch; /* 在iOS上提供平滑滚动 */
    padding-bottom: 50px; /* 确保底部有足够的空间滚动 */
}

/* 移动端适配 */
@media screen and (max-width: 576px) {
    #minePage {
        height: 100vh; /* 保持满视口高度 */
    }
    
    .minepage-scroll-container {
        padding-bottom: 70px; /* 移动端增加更多底部空间 */
    }
    
    /* 禁用其他可能影响滚动的限制 */
    html.minepage-active, 
    body.minepage-active {
        height: auto !important;
        overflow: auto !important;
        overflow-x: hidden !important;
    }
}

/* 个人资料卡片样式 */
.profile-card {
    position: relative;
    width: 1000px;
    height: 190px;
    margin: 50px auto;
    background: linear-gradient(135deg, #A9A9A9 0%, #808080 100%); /* 默认为灰银色渐变 */
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 50px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background-size: 200% 200%;
    animation: gradientMove 15s ease infinite;
}

/* 会员状态下的卡片样式 */
.profile-card.member-active {
    background: linear-gradient(135deg, 
        #D4AF37 0%,
        #DAA520 40%,
        #B8860B 100%
    );
}

.profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,152,0,0.1), rgba(255,87,34,0.1));
    z-index: 0;
}

.profile-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 80%);
    animation: glowEffect 8s ease-in-out infinite;
}

/* 移动端适配 */
@media screen and (max-width: 576px) {
    .profile-card {
        width: calc(100% - 32px);
        margin: 16px auto;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

/* 渐变动画关键帧 */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* 添加柔和光泽 */
@keyframes glowEffect {
    0%, 100% {
        transform: translate(-20%, -20%) scale(1);
        opacity: 0.3; /* 光泽更低透明度 */
    }

    50% {
        transform: translate(20%, 20%) scale(1.2);
        opacity: 0.5; /* 光泽在中间稍微增强 */
    }
}

/* 添加精致的花纹图案 */
.profile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/elegant-pattern.png'); /* 添加精致的花纹图案 */
    background-size: cover;
    opacity: 0.03; /* 降低透明度，使其几乎不可见 */
    pointer-events: none;
}


.user-vip-status {
    margin-top: -70px; /* 向上移动 10px，调整这个值以适合你的需求 */
}

/* 用户信息样式 */
.profile-card .user-info {
    color: #ffffff; /* 白色文字，增强对比度 */
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1; /* 确保在覆盖层之上 */
}

/* 用户名样式 */
.profile-card .user-name {
    font-size: 36px;
    margin: 0 0 10px 0;
    font-weight: 700;
    font-family: 'Playfair Display', serif; /* 使用高雅的衬线字体 */
    margin-left: -7px;
    white-space: nowrap; /* 防止文本换行 */
}

@media screen and (max-width: 576px) {
    .user-name {
        font-size: 28px; /* 移动端稍微减小字体大小 */
        margin-left: 0; /* 移除负边距 */
        white-space: nowrap; /* 确保在移动端也不换行 */
        max-width: 100%; /* 确保不会溢出容器 */
    }
    
    /* 确保用户主要信息容器足够宽 */
    .user-main {
        min-width: 0; /* 允许flex项目收缩 */
        flex-shrink: 0; /* 防止过度收缩 */
    }
}


/* 用户信息文字颜色 */
.profile-card .user-info {
    color: #ffffff; /* 使用白色文字，增强对比度 */
    /* 其他样式保持不变 */
}




/* 开通会员按钮样式 */
.upgrade-button {
    position: absolute;
    right: 50px;
    top: 115px;
    margin: 0;
    padding: 10px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #4a4a4a;
    background: linear-gradient(135deg, 
        #f5e6ca,
        #f8d488 40%,
        #e8c37d 60%,
        #f5e6ca 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.1),
        0 0 15px rgba(248, 212, 136, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1); /* 内部阴影增强金属感 */
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    background-size: 200%;
    animation: subtleShine 3s ease-in-out infinite;
    z-index: 2;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


/* 修改渐变动画使其更平滑 */
@keyframes subtleShine {
    0% {
        background-position: 0% 50%;
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.1),
            0 0 15px rgba(248, 212, 136, 0.2),
            inset 0 1px 2px rgba(255, 255, 255, 0.6),
            inset 0 -1px 1px rgba(0, 0, 0, 0.1);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.1),
            0 0 20px rgba(248, 212, 136, 0.3),
            inset 0 1px 3px rgba(255, 255, 255, 0.8),
            inset 0 -1px 2px rgba(0, 0, 0, 0.15);
    }
    100% {
        background-position: 0% 50%;
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.1),
            0 0 15px rgba(248, 212, 136, 0.2),
            inset 0 1px 2px rgba(255, 255, 255, 0.6),
            inset 0 -1px 1px rgba(0, 0, 0, 0.1);
    }
}

.upgrade-button-container::before {
    content: 'V'; /* 添加 "V" 字 */
    position: absolute;
    z-index: 1; /* 确保 "V" 字在按钮下方 */
    top: 50%; /* 垂直居中 */
    left: 80%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 完全居中 */
    font-size: 420px; /* "V" 字大小 */
    font-weight: bold; /* 加粗 "V" 字 */
    color: rgba(255, 255, 255, 0.2); /* 淡色白金 "V" 字 */
    pointer-events: none; /* 不影响按钮交互 */
    user-select: none; /* 禁止选中 */
}


/* 动态背景渐变动画 */
@keyframes subtleShine {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



/* 发光动画 */
@keyframes glowEffect {
    0%, 100% {
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.6);
    }

    50% {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 255, 255, 1);
    }
}

.upgrade-modal-text {
    margin-top: 20px; /* 调整文字位置 */
    text-align: center; /* 水平居中 */
    font-size: 14px; /* 设置字体大小 */
}

.user-main {
    display: flex; /* 使用 Flex 布局 */
    align-items: center; /* 垂直居中 */
    gap: 8px; /* 图标与用户名之间的间距 */
    margin-top: -20px; /* 往上移动 */
}

.user-icon {
    width: 30px; /* 非会员状态下默认较小 */
    height: 30px;
    object-fit: contain;
    margin-top: -9px; /* 非会员状态下向上移动 */
    margin-right: 10px;
    transition: all 0.3s ease; /* 添加过渡效果 */
}

/* 会员状态下恢复原始大小和位置 */
.profile-card.member-active .user-icon {
    width: 50px;
    height: 50px;
    margin-top: 3px; /* 恢复原始位置 */
}

.user-name {
    font-size: 26px !important;
    font-weight: bold; /* 如果需要加粗，可以使用 */
    margin: 0; /* 移除默认边距 */
    color: #ffffff; /* 设置字体颜色为白色 */
}


.user-details {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    gap: 4px; /* 子元素间距 */
}

.user-phone {
    font-size: 34px; /* 手机号字体稍小 */
    color: #ffffff; /* 白色字体 */
    margin: 0;
    position: relative; /* 设置为相对定位 */
    top: 34px; /* PC端保持现有位置 */
}

.user-status.member-active {
    opacity: 0.7 !important; /* 设置透明度为0.7 */
    display: block;
    position: absolute; /* 使用绝对定位使其不影响文档流 */
    top: 70px; /* 调整顶部位置 */
    left: 112px; /* 与左侧对齐 */
    color: #ffffff;
    font-weight: 500;
    opacity: 0.6;
    z-index: 2; /* 确保不被其他元素覆盖 */
    font-size: 12px; /* 移动端字体稍小 */
}

@media screen and (max-width: 576px) {
    .user-phone {
        top: 25px; /* 移动端向上移动，原来是25px，减少30px变为-5px */
    }

    .user-status.member-active {
        top: 60px; /* 移动端上的位置可能需要调整 */
        font-size: 13px; /* 移动端字体稍小 */
        display: block;
        left: 81px; /* 与左侧对齐 */
    }
}

/* 用户状态样式 */
.user-status {
    display: none;
}




.cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 三列均分宽度 */
    gap: 15px; /* 设置卡片间隙 */
    width: 1000px; /* 容器宽度与巨幅卡片一致 */
    margin: 20px auto; /* 居中对齐 */
}

.card {
    width: auto; /* 使用 Grid 自动分配宽度 */
    height: 130px;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: 15px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* 卡片内的图标样式 */
.card i {
    font-size: 32px;
    color: var(--color-primary);
    margin-right: 20px;
    flex-shrink: 0;
    margin-bottom: 10px;
}

/* 卡片内容样式 */
.card-content {
    display: flex;
    flex-direction: column;
}

/* 卡片标题样式 */
.card-title {
    font-size: 20px;
    margin: 0 0 5px 0;
    color: var(--color-text);
    font-weight: 600;
}

/* 卡片副标题样式 */
.card-subtitle {
    font-size: 14px;
    margin: 0;
    color: var(--color-secondary);
}


/* 通用模态窗口样式 */
.generic-modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    z-index: 1000; /* 确保弹窗在所有元素之上 */
    justify-content: center;
    align-items: center;
}

.generic-modal-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* 显示状态 */
.generic-modal.show {
    display: flex; /* 显示弹窗，居中对齐 */
}

/* 弹窗内容区域 */
/* 通用模态窗口 */
.generic-modal-content {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px; /* 圆角 */
    width: auto; /* 默认宽度由内容决定 */
    height: auto; /* 高度根据内容动态调整 */
    max-width: 90%; /* 最大宽度限制，防止弹窗过宽 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 轻微阴影 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

/* 弹窗正文内容 */
.generic-modal-body {
    font-size: 14px; /* 字体大小 */
    color: #2f3542; /* 深灰色字体 */
    line-height: 1.5; /* 行高调整 */
    margin-bottom: 10px;
}

/* 按钮容器 */
.generic-modal-footer {
    display: flex;
    justify-content: flex-end; /* 默认靠右对齐 */
    gap: 10px;
    width: 100%;
}


.modal-button-confirm {
    background-color: #feb565; /* 按钮颜色 */
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 按钮悬停效果 */
.modal-button-confirm:hover {
    background-color: #ff7f50; /* 悬停时的颜色变化 */
}

/* 弹窗关闭按钮样式（右上角关闭） */
.generic-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none; /* 无背景 */
    border: none; /* 无边框 */
    font-size: 18px; /* 字体大小 */
    color: #aaa; /* 默认颜色 */
    cursor: pointer;
    transition: color 0.3s ease; /* 颜色平滑过渡 */
}

/* 悬停关闭按钮 */
.generic-modal-close:hover {
    color: #ff7f50; /* 悬停时颜色变化 */
}

/* 专用于退出登录弹窗的样式 */

/* 标题部分 - 红色感叹号和文字 */
.logout-modal-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #2f3542;
    margin-bottom: 10px;
    justify-content: flex-start; /* 左对齐 */
}

.logout-modal-title i {
    color: #f44336; /* 红色感叹号 */
    font-size: 18px;
    margin-right: 8px;
    
}

/* 弹窗正文内容 */
.logout-modal-content {
    font-size: 14px;
    color: #2f3542;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: left; /* 文案左对齐 */
}

.modal-logout .generic-modal-footer {
    margin-top: 10px; /* 按钮顶部间距 */
    position: relative;
    top: -60px; /* 向上移动按钮 */
    justify-content: center; /* 按钮居中对齐 */
    gap: 10px; /* 按钮间距 */
}


/* 按钮样式 */
.modal-button-cancel {
    background-color: #f1f1f1; /* 灰色背景 */
    color: #333333;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.modal-button-cancel:hover {
    background-color: #e0e0e0; /* 悬停时稍深 */
}

.logout-confirm-button {
    background-color: #f44336; /* 红色背景 */
    color: white; /* 白色文字 */
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.logout-confirm-button:hover {
    background-color: #d32f2f; /* 更深的红色 */
}

/* Markdown 渲染的内容样式 */
/* 样式定义 */
/* 通用设置 */
.markdown-content {
    line-height: 1.6; /* 设置全局行高，增加可读性 */
    color: #333; /* 设置默认文字颜色 */
    font-size: 1rem; /* 设置全局字体大小 */
}

/* 标题样式 */
.markdown-content h1 {
    font-size: 1.4rem; /* 一级标题大小 */
    margin: 20px 0 10px; /* 增大上间距，缩小下间距 */
    
    padding-bottom: 5px;
}

.markdown-content h2 {
    font-size: 1.3rem; /* 二级标题大小 */
    margin: 18px 0 8px;
    
    padding-bottom: 4px;
}

.markdown-content h3 {
    font-size: 1.2rem;
    margin: 16px 0 6px;
}

.markdown-content h4, 
.markdown-content h5, 
.markdown-content h6 {
    font-size: 1.2rem;
    margin: 14px 0 4px;
}

/* 段落样式 */
.markdown-content p {
    margin: 10px 0;
}

/* 列表样式 */
.markdown-content ul {
    list-style-type: disc; /* 使用圆点符号 */
    margin: 10px 0;
    padding-left: 20px; /* 增加缩进 */
}

.markdown-content ol {
    list-style-type: decimal; /* 使用数字序号 */
    margin: 10px 0;
    padding-left: 20px;
}

.markdown-content ul ul,
.markdown-content ol ol {
    list-style-type: circle; /* 子列表使用圆圈符号 */
}

/* 表格样式 */
.markdown-content table {
    width: 100%; /* 表格宽度占满容器 */
    border-collapse: collapse; /* 表格边框合并 */
    margin: 10px 0;
    font-size: 0.95rem; /* 缩小表格内文字的字体大小 */
}

.markdown-content th, 
.markdown-content td {
    border: 1px solid #ddd; /* 添加单元格边框 */
    padding: 8px; /* 添加内边距 */
    text-align: left; /* 左对齐 */
}

.markdown-content th {
    background-color: #f6f8fa; /* 表头背景色 */
    font-weight: bold; /* 加粗表头文字 */
}

/* 引用块样式 */
.markdown-content blockquote {
    border-left: 4px solid #ccc; /* 左侧边框 */
    padding-left: 15px;
    margin: 10px 0;
    color: #666; /* 引用文字颜色 */
    font-style: italic; /* 引用文字样式 */
    background-color: #f9f9f9; /* 引用背景色 */
    border-radius: 5px; /* 添加圆角 */
}

/* 行内代码样式 */
.markdown-content code {
    background-color: #333; /* 深色背景 */
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    color: #ff9e64; /* 更加鲜明的字体颜色 */
}

/* 代码块样式 */
.markdown-content pre {
    background-color: #2d2d2d; /* 深色背景 */
    color: #f8f8f2; /* 浅色文字 */
    padding: 15px;
    border-radius: 8px; /* 圆角 */
    overflow-x: auto; /* 横向滚动条 */
    font-family: 'Courier New', monospace; /* 等宽字体 */
    white-space: pre-wrap; /* 支持代码换行 */
    word-wrap: break-word; /* 长单词换行 */
}

.markdown-content pre code {
    color: inherit; /* 保持代码颜色一致 */
}

/* 链接样式 */
.markdown-content a {
    color: #007acc; /* 链接文字色 */
    text-decoration: none; /* 去掉下划线 */
    border-bottom: 1px solid #007acc; /* 添加下划线 */
    transition: all 0.2s ease-in-out; /* 添加过渡效果 */
}

.markdown-content a:hover {
    color: #005f99; /* 悬停时颜色变化 */
    border-bottom: 1px solid #005f99;
}

/* 图片样式 */
.markdown-content img {
    max-width: 100%; /* 图片宽度自适应容器 */
    height: auto; /* 保持图片比例 */
    border-radius: 5px; /* 添加圆角 */
    margin: 10px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 分隔线样式 */
.markdown-content hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 20px 0;
}

/* 表情符号大小调整 */
.markdown-content img.emoji {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
}

/* 行距优化 */
.markdown-content {
    line-height: 1.8; /* 全局行高 */
}

/* 停止按钮样式 */
.stop-button {
    width: 44px;
    height: 44px;
    background-color: var(--color-primary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px; /* 与发送按钮保持相同的左边距 */
    transition: all 0.3s ease;
    position: relative; /* 移除绝对定位 */
}

/* 停止图标（白色正方形） */
.stop-button i {
    width: 14px;
    height: 14px;
    background-color: white;
    border-radius: 2px;
    color: white; /* 添加这一行，将图标颜色设置为白色 */
}

/* 悬停效果 */
.stop-button:hover {
    opacity: 0.9;
}

/* 点击效果 */
.stop-button:active {
    transform: scale(0.95);
}

/* 移动端用户信息样式更新 */
.mobile-user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: -18px;
}

.mobile-user-profile i {
    font-size: 16px;
    color: var(--color-sidebar-text);
    width: 28px;
    height: 28px;
    background-color: var(--color-hover);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 将 .mobile-user-info 固定在侧边栏顶部 */
.mobile-user-info {
    display: none; /* 确保在移动端显示 */
    order: -1; /* 将其置于侧边栏顶部 */
    position: sticky; /* 使用 sticky 定位 */
    top: 0; /* 固定在顶部 */
    padding: 15px 20px;
    width: 100%;
    height: 40px;
    background-color: var(--color-white);
    border-bottom: 1px solid #f0f0f0; /* 可选：添加底部边框 */
    z-index: 10; /* 确保在最上层 */
}

/* 确保聊天列表在用户信息下方 */
.sidebar .chat-list {
    margin-top: 0; /* 移除可能的顶部边距 */
    padding-top: 0; /* 移除可能的顶部内边距 */
}


.mobile-user-logged-in,
.mobile-user-logged-out {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: -15px;
}

#mobilePhoneNumberDisplay {
    font-size: 14px;
    color: var(--color-sidebar-text);
}

/* 移动端登录按钮样式 */
.mobile-sidebar-login-button {
    width: 90%; /* 稍微宽一点 */
    padding: 8px 20px; /* 降低高度但保持水平内边距 */
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-align: center;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 4px auto 10px; /* 修改这里：将顶部外边距改为负值，使按钮向上移动 */
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    /* 继承 PC 端的渐变背景 */
    background: linear-gradient(
        120deg,
        #ffe6e6,
        #feb565,
        #ff7f50,
        #ff4500,
        #d4af37
    );
    background-size: 300% 300%;
    animation: gradientFlow 4s linear infinite;

    /* 继承立体光泽效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 
                0 2px 8px rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 点击效果 */
.mobile-sidebar-login-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
                0 2px 4px rgba(255, 255, 255, 0.2);
}

.mobile-mine-button {
    color: var(--color-sidebar-text);
    text-decoration: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
    margin-right: -18px;
}

.mobile-mine-button i {
    font-size: 18px;
}

/* 移动端页面标题栏样式 */
.mobile-page-header {
    display: none; /* 默认隐藏，仅在移动端显示 */
    position: sticky;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: inherit;
    padding: 0 16px;
    align-items: center;
    z-index: 100;
    
}

.mobile-page-header .back-button {
    position: absolute;
    left: 16px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #333;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-page-header .back-button::before {
    content: '';
    display: inline-block;
    width: 12px; /* 增大箭头宽度 */
    height: 12px; /* 增大箭头高度 */
    border-left: 3px solid #333; /* 增加边框宽度 */
    border-bottom: 3px solid #333; /* 增加边框宽度 */
    transform: rotate(45deg);
    margin-right: 8px; /* 增加箭头与文字之间的间距 */
}

.mobile-page-header .page-title {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    flex-grow: 1;
    text-align: center;
    color: #333;
}


/* 移动端顶部工具栏布局 */
@media screen and (max-width: 576px) {
    /* 显示汉堡菜单和新建对话按钮 */
    .hamburger-menu {
        display: flex !important;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        padding: 8px;  /* 增加点击区域 */
        font-size: 20px;  /* 增大图标大小 */
    }

    .new-chat-mobile {
        display: flex !important;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        padding: 8px;  /* 增加点击区域 */
        font-size: 20px;  /* 增大图标大小 */
    }

    /* 将 bot-selector 居中显示在顶部工具栏 */
    .chat-header {
        position: fixed;
        top: -4px;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 10;
        background-color: var(--color-background); /* 修改这里,使用与聊天窗口相同的背景色 */
        padding: 10px 20px;
        
    }

    .bot-selector {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }

    /* 隐藏左侧栏（PC端）的显示，使其在移动端通过侧滑显示 */
    .left-sidebar {
        display: none;
    }

    /* 移动端下让sidebar以侧滑形式出现 */
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        height: 100vh;
        background-color: var(--color-white);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1000;
        display: flex;
        flex-direction: column;
    }

    /* 侧边栏打开状态 */
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }

    /* 遮罩层 */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999; /* 降低遮罩层的 z-index */
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* 聊天列表容器 */
    .sidebar .chat-list {
        background-color: var(--color-white);
        flex: 1;
        overflow-y: auto;
        width: 100%; /* 确保宽度与侧边栏一致 */
        box-sizing: border-box; /* 将 padding 包含在宽度内 */
        margin-top: 6px; /* 添加这行，增加顶部间距 */
        padding-top: 10px; /* 可选：添加内边距使过渡更自然 */
    }


    /* 新建聊天按钮容器 */
    .sidebar .new-chat {
        display: none;
    }

    .mobile-user-info {
        display: flex;
    }



    /* 聊天区域宽度全屏 */
    .chat-area {
        width: 100% !important;
        flex: 1;
    }

    /* 聊天项样式 */
    .chat-item {
        padding: 10px 20px;
        background-color: var(--color-white);
    }

    /* 新建聊天按钮样式 */
    .new-chat button {
        width: 100%;
        background-color: var(--color-white);
        border: 1px solid #e0e0e0;
        margin: 0;
    }

    /* 消息输入区全宽显示 */
    .chat-input textarea {
        width: calc(100% - 170px) !important; 
    }

    

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

    body {
        padding-bottom: env(safe-area-inset-bottom);
    }


    /* 隐藏PC端新增聊天提示，仅在未登录时显示登陆提示 */
    .chat-list-login-tip {
        margin-top: 20px;
    }


    .mobile-page-header {
        display: flex;
        justify-content: center;
    }
    
    /* 调整页面内容的上边距，为标题栏留出空间 */
    #minePage .profile-card {
        margin-top: 25px;
    }
     /* 调整巨幅卡片宽度 */
     .profile-card {
        width: calc(100% - 32px); /* 两边留出16px边距 */
        margin: 16px auto;  /* 上下也留出间距，并水平居中 */
        border-radius: 12px; /* 增加圆角 */
        padding: 20px;
        
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 添加轻微阴影 */
    }

    /* 调整升级按钮位置和大小 */
    .upgrade-button {
        right: 20px;
        top: 120px;
        padding: 10px 20px;
        font-size: 16px;
    }

    /* 调整用户手机号显示 */
    .user-phone {
        font-size: 28px;
    }

    /* 调整用户状态文字 */
    .user-status {
        font-size: 14px;
    }

    /* 移动端卡片容器改为列表样式 */
    .cards-container {
        display: block;
        width: calc(100% - 32px); /* 与巨幅卡片保持一致的边距 */
        margin: 16px auto; /* 上下间距和水平居中 */
        padding: 0;
        background: #ffffff;
        border-radius: 12px; /* 添加圆角 */
        overflow: hidden; /* 确保内部卡片不会溢出圆角 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 轻微阴影 */
    }

    /* 移动端卡片样式改为列表项样式 */
    .card {
        width: 100%;
        height: auto;
        margin: 0;
        padding: 15px 16px; /* 左右内边距与容器边距一致 */
        border-radius: 0;
        background: #ffffff;
        box-shadow: none;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    /* 移除最后一个卡片的底部边框 */
    .card:last-child {
        border-bottom: none;
    }

    /* 移动端卡片hover效果调整 */
    .card:hover {
        transform: none;
        box-shadow: none;
        background-color: #f9f9f9;
    }

    /* 调整卡片内容布局 */
    .card i {
        font-size: 20px;
        margin-right: 15px;
        margin-bottom: 0;
    }

    /* 调整卡片标题样式 */
    .card-title {
        font-size: 16px;
        margin: 0;
    }

    /* 调整卡片副标题样式 */
    .card-subtitle {
        font-size: 12px;
        color: #999;
        margin-top: 2px;
    }

    /* 添加右箭头图标 */
    .card::after {
        content: '\f054';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 12px;
        color: #ccc;
        margin-left: auto;
    }

    /* 调整卡片内容区域布局 */
    .card-content {
        flex: 1;
    }

    /* 调整整个我的页面的布局，确保背景色显示 */
    #minePage {
        padding: 0;
        background-color: #f5f5f5;
        min-height: 100vh; /* 确保背景色填满整个视口高度 */
    }

    .modal .modal-content {
        width: 90%;
        height: auto;
        flex-direction: column;
        padding: 20px;
        border-radius: 12px;
        margin: 0 auto;
    }

    /* 隐藏左侧图片 */
    .modal .login-left {
        display: none;
    }

    /* 调整右侧登录区域 */
    .modal .login-right {
        width: 100%;
        padding: 0;
    }

    /* 标题样式 */
    .modal .login-right h2 {
        font-size: 18px;
        text-align: center;
        margin-bottom: 20px;
        color: #333;
    }

    /* 输入框样式 */
    .modal .login-input {
        width: 100%;
        height: 44px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 0 15px;
        margin-bottom: 15px;
        font-size: 16px;
    }

    /* 验证码区域 */
    .modal .verification-section {
        width: 100%; /* 确保与手机号输入框等宽 */
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        padding: 0; /* 移除可能的内边距 */
    }

    /* 验证码输入框 */
    .modal .verification-section .login-input {
        flex: 1;
        margin-bottom: 0;
        width: 0; /* 配合 flex: 1 使用，确保正确的弹性布局 */
    }

    /* 获取验证码按钮 */
    .modal .get-code-button {
        width: 100px; /* 固定宽度 */
        flex-shrink: 0; /* 防止按钮被压缩 */
        height: 44px;
        background: #fff;
        border: 1px solid var(--color-main-theme);
        color: var(--color-main-theme);
        border-radius: 8px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* 登录按钮 */
    .modal .login-submit-button {
        width: 100%;
        height: 44px;
        background: var(--color-main-theme);
        border: none;
        border-radius: 8px;
        color: white;
        font-size: 16px;
        font-weight: bold;
        margin-top: 10px;
    }

    .modal .login-form {
        width: 100%;
    }

    /* 关闭按钮 */
    .modal .close {
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 24px;
        color: #999;
        background: none;
        border: none;
        padding: 5px;
    }

    /* 模态框背景 */
    .modal {
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        align-items: center;
        justify-content: center;
    }

    /* bot 选择按钮容器 */
    #botSelector {
        display: flex;
        justify-content: center;
    }

    /* bot 选择按钮 */
    #botSelector .dropbtn {
        border: none;
        background: none;
        box-shadow: none;
        padding: 8px 0;
        display: flex;
        align-items: center;
        gap: 4px;  /* 控制文字和箭头之间的间距 */
        width: auto;  /* 让按钮宽度由内容决定 */
    }

    #botSelector .dropbtn i {
        margin-left: 0;
        transform: rotate(-90deg);  /* 将向下的箭头旋转为向右 */
        font-size: 13px;  /* 减小图标大小 */
    }
     /* bot 名字容器 */
     #currentBotName {
        margin-right: 0;  /* 移除可能存在的右边距 */
    }

    /* 箭头图标 */
    #botSelector .dropbtn i {
        margin-left: 10px;  /* 移除左边距 */
    }

     /* 调整消息容器 */
     .chat-messages {
        padding: 0;  /* 移除内边距 */
        width: 100%;  /* 确保容器占满宽度 */
        padding-top: 50px;
        padding-bottom: 170px;
    }

    .chat-messages::after {
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 83px; /* 与输入框高度相适应 */
        background-color: #f7f9fc; /* 使用与页面背景相同的颜色 */
        z-index: 10; /* 在消息上层，在输入框下层 */
    }

    /* 调整消息包装器的宽度 */
    .message-wrapper {
        width: 98%;  /* 让消息包装器几乎占满容器 */
        margin: 8px auto;  /* 上下留间距，左右自动居中 */
        z-index: 2; /* 确保在水印上方 */
    }

     /* 调整用户消息和机器人消息 */
     .user-message,
     .bot-message {
         width: auto;  /* 让宽度由内容决定 */
         max-width: 95%;  /* 设置最大宽度 */
         margin: 0;  /* 移除边距 */
         box-sizing: border-box;
         z-index: 2; /* 确保在水印上方 */
     }

    /* 确保用户消息靠右 */
    .user-message {
        margin-left: auto;
        margin-right: 10px;  /* 最小边距 */
    }

    /* 确保机器人消息靠左 */
    .bot-message {
        margin-right: auto;
        margin-left: 10px;  /* 最小边距 */
    }

    .chat-input {
        position: fixed;
        bottom: 10px;
        width: 93%;
        display: flex;
        align-items: flex-start; /* 改为顶部对齐，允许输入框高度增加 */
        padding: 8px;
        box-sizing: border-box;
        background: #FFF8E7;
        border-radius: 30px; /* 只保留上方圆角，下方直角 */
        border: 1px solid #feb565; /* 添加边框 */
        left: 50%; /* 设置左边距为50% */
        transform: translateX(-50%); /* 使用transform进行水平居中 */
        
        min-height: 14px;
        max-height: 150px; /* 设置最大高度 */
        overflow: hidden; /* 隐藏溢出内容 */
        z-index: 11;
    }
    
    /* 增加一个包裹输入框和按钮的容器，用来实现圆角、边框等 */
    .chat-input > textarea,
    .chat-input-actions {
        background: #fff;
        border-radius: 20px;
        
        align-items: center;
    }
    
    .chat-input textarea {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        padding: 8px 12px; /* 恢复上下padding，以便多行显示时有合适的间距 */
        margin: 0;
        font-size: 16px;
        resize: none;
        overflow: hidden;
        line-height: 1.2; /* 设置更合适的行高比例 */
        max-height: 120px;
        min-height: 34px;
        height: 34px;
        box-sizing: border-box;
    }
    
    /* 添加新的样式，当textarea高度为34px时(单行)，使用特殊的line-height和padding */
    .chat-input textarea[style*="height: 34px"] {
        line-height: 18px; /* 单行时的行高 */
        padding: 8px 12px; /* 通过padding来实现垂直居中 */
    }
    
    /* 如果不想增加chat-input-actions这个div，可以直接在.chat-input上应用justify-content: space-between等属性 */
    /* 这里假设使用chat-input-actions容器来存放按钮 */
    .chat-input-actions {
        margin-left: -20px; /* 按钮组与文本输入区之间留空隙 */
        display: flex;
        align-items: center;
        background: #FFF8E7;
        border-radius: 20px;
        padding: 0 6px;
    }
    
    .send-button, .stop-button {
        border: none;
        background: none;
        cursor: pointer;
    
        /* 固定按钮尺寸，比如 32x32 像素，保证无多余空白 */
        width: 28px; /* 稍微减小按钮尺寸 */
        height: 28px; /* 稍微减小按钮尺寸 */
    
        /* 居中对齐图标 */
        display: flex;
        align-items: center;
        justify-content: center;
    
        /* 调整按钮与输入框的距离 */
        margin-left: 8px;  
        margin-top: 3px; /* 减小顶部外边距以适应新高度 */
        padding: 0; /* 无多余内边距 */
    }
    
    /* 调整图标大小以适配按钮 */
    .send-button i, .stop-button i {
        font-size: 16px; /* 根据实际需要微调 */
        line-height: 1;  /* 确保没有额外行高空隙 */
        color: #feb565; /* 主颜色 */
    }
    
    .copy-container {
        position: relative;
        
    }
    .copy-button {
        position: relative;
        margin-left: 15px; /* 在小屏幕上向右移动10px */
        
    }

/* 在移动端完全隐藏 tooltip */
    .copy-container .tooltip {
        display: none !important;
    }
    
}

/* ============================= */
/* 移动端适配新增代码结束         */
/* ============================= */

/* 支付测试按钮样式 */
.test-pay-button-container {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: 1000;
}

.test-pay-button {
    background: linear-gradient(45deg, #4CAF50, #45a049);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 15px 40px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
}

.test-pay-button i {
    margin-right: 10px;
    font-size: 20px;
}

.test-pay-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    background: linear-gradient(45deg, #45a049, #4CAF50);
}

.test-pay-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* 支付按钮移动端适配 */
@media screen and (max-width: 576px) {
    .test-pay-button-container {
        bottom: 120px;
        padding: 0 20px;
    }
    
    .test-pay-button {
        width: 80%;
        padding: 12px 30px;
        font-size: 16px;
    }
    
    .test-pay-button i {
        font-size: 18px;
    }
}

/* Bot配置弹窗样式 */
#botConfigModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(47, 53, 66, 0.8);
    justify-content: center;
    align-items: center;
}

#botConfigModal.show {
    display: flex;
}

#botConfigModal .modal-content {
    background-color: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 600px;
    max-width: 90%;
    position: relative;
    height: 600px; /* 限制最大高度为视窗高度的80% */
    display: flex;
    flex-direction: column; /* 使用flex布局，确保header、body和footer正确布局 */
}

#botConfigModal .modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--color-light-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* 防止header被压缩 */
}

#botConfigModal .modal-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}

#botConfigModal .modal-footer {
    padding: 20px;
    border-top: none; /* 移除顶部边框 */
    flex-shrink: 0; /* 防止footer被压缩 */
    background-color: var(--color-white); /* 确保底部背景色 */
}

/* 自定义滚动条样式 */
#botConfigModal .modal-body::-webkit-scrollbar {
    width: 6px;
}

#botConfigModal .modal-body::-webkit-scrollbar-thumb {
    background-color: #dcdde1;
    border-radius: 3px;
}

#botConfigModal .modal-body::-webkit-scrollbar-track {
    background-color: transparent;
}

/* 移动端适配 */
@media screen and (max-width: 576px) {
    #botConfigModal .modal-content {
        width: 90%;
        margin: 20px;
        max-height: 85vh; /* 移动端稍微增加可视区域 */
    }

    #botConfigModal .modal-header {
        padding: 15px;
    }

    #botConfigModal .modal-body {
        padding: 15px;
    }

    #botConfigModal .modal-footer {
        padding: 15px;
    }

    #generateButton {
        width: 100%; /* 移除之前的calc计算 */
        margin: 0; /* 移除外边距 */
    }
}

#botConfigModal .modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

#botConfigModal .modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--color-text);
    cursor: pointer;
    padding: 5px;
}

#botConfigForm .form-group {
    margin-bottom: 20px;
}

#botConfigForm .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--color-text);
}

#botConfigForm .form-group input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-light-gray);
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    min-height: 40px; /* 设置最小高度 */
    height: auto; /* 允许自动调整高度 */
    resize: none; /* 禁用手动调整大小 */
    overflow: hidden; /* 隐藏滚动条 */
}

#botConfigForm .form-group input:focus {
    border-color: var(--color-primary);
    outline: none;
}

/* 移除默认的invalid状态样式 */
#botConfigForm .form-group input[required]:invalid {
    border-color: var(--color-light-gray);
}

/* 添加错误状态的类，只在点击生成按钮且为空时添加 */
#botConfigForm .form-group input.error {
    border-color: #ff4d4f;
}

/* 将input改为textarea以支持自动调整高度 */
#botConfigForm .form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-light-gray);
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    height: 38px;
    min-height: 38px;
    resize: none;
    overflow: hidden;
    line-height: 1.2;
    font-family: inherit;
    box-sizing: border-box;
}

/* 添加错误状态动画关键帧 */
@keyframes errorBorder {
    0% {
        border-color: #ffcdd2;
        box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.2);
    }
    50% {
        border-color: #ff4d4f;
        box-shadow: 0 0 0 4px rgba(255, 77, 79, 0.2);
    }
    100% {
        border-color: #ffcdd2;
        box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.2);
    }
}

/* 错误状态样式 */
#botConfigForm .form-group textarea.error {
    border-color: #ff4d4f;
    animation: errorBorder 2s ease infinite;
    background-color: #fff2f0;
}

#botConfigForm .form-group textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    animation: none; /* 当获得焦点时停止错误动画 */
    background-color: white;
}

#botConfigForm .form-group .required {
    color: #ff4d4f;
    margin-left: 4px;
}

#generateButton {
    width: 100%;
    padding: 12px;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

#generateButton:hover {
    opacity: 0.9;
}

#generateButton:disabled {
    background-color: #d9d9d9;
    cursor: not-allowed;
}

/* 移动端适配 */
@media screen and (max-width: 576px) {
    #botConfigForm .form-group textarea {
        height: 36px; /* 移动端稍微降低高度 */
        min-height: 36px;
        padding: 8px 10px;
    }
}

/* 上传按钮样式 */
.upload-button {
    width: 44px;
    height: 44px;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-right: 12px;
}

.upload-button i {
    font-size: 20px;
    color: var(--color-primary);
}

@media screen and (max-width: 576px) {
    .upload-button {
        width: 34px;  /* 从44px改小 */
        height: 34px;
        margin-right: -11px;  /* 从12px改小 */
    }
}

.upload-button:hover {
    background-color: rgba(254, 181, 101, 0.1);
}

.upload-button:active {
    transform: scale(0.9);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 消息中的图片容器 */
.message-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    max-width: 70%;
    margin-left: auto;
    margin-right: 10px; /* 添加这行，使图片整体左移 */
    justify-content: flex-end;
}

/* Bot消息中的图片容器 */
.bot-message .message-images {
    margin-left: 10px;
    margin-right: auto;
    justify-content: flex-start;
}

.message-images .image-preview-container {
    width: 180px;
    height: 180px;
    margin: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.message-images .image-preview-container:hover {
    transform: scale(1.05);
}

.message-images .image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* 图片预览模态框 */
.image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.image-modal.show {
    display: flex;
}

.image-modal img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    position: relative; /* 添加相对定位 */
}

.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.modal-close-btn:hover {
    opacity: 0.8;
}

/* 移动端适配 */
@media screen and (max-width: 576px) {
    .message-images {
        max-width: 100%;
        margin-bottom: 8px; /* 增加图片和文字之间的间距 */
    }

    .message-images .image-preview-container {
        width: 182px;
        height: 182px;
    }
}

.image-error-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute; /* 添加绝对定位 */
    top: 0;
    left: 0;
    border-radius: 8px;
    background-color: rgba(255, 240, 240, 0.9); /* 添加淡红色背景 */
    color: #ff4d4f; /* 错误文字颜色 */
    z-index: 10; /* 确保在内容之上 */
}

.image-error-placeholder i {
    margin-right: 8px;
    color: #ff4d4f;
}

@media screen and (max-width: 576px) {
    .image-error-placeholder {
        font-size: 12px;
    }
}

/* 图片加载指示器样式 */
.image-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    z-index: 10;
}

.image-loading i {
    font-size: 24px;
    color: var(--color-primary);
}

/* 图片生成中的占位符样式 */
.generating-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 14px;
    border-radius: 8px;
    z-index: 10;
}

.generating-image-overlay i {
    margin-right: 8px;
    font-size: 18px;
}

/* 移动端适配 */
@media screen and (max-width: 576px) {
    .image-loading i {
        font-size: 24px; /* 从20px增加到24px */
    }
    
    .generating-image-overlay, .image-error-placeholder {
        font-size: 14px; /* 从12px增加到14px */
        width: 182px; /* 确保占位图宽度与图片容器一致 */
        height: 182px; /* 确保占位图高度与图片容器一致 */
    }
    
    .generating-image-overlay i {
        font-size: 20px; /* 从16px增加到20px */
    }

    /* 为加载中的图标和文字添加样式 */
    .image-loading {
        background-color: rgba(255, 255, 255, 0.85); /* 略微增加背景不透明度 */
        width: 182px; /* 确保加载占位图宽度与图片容器一致 */
        height: 182px; /* 确保加载占位图高度与图片容器一致 */
    }
}

/* 图片上传数量提示样式 */
.image-count-tip {
    position: absolute;
    right: 10px;
    top: -20px;
    font-size: 12px;
    color: #666;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 2px 6px;
    border-radius: 4px;
    display: none !important; /* 强制隐藏元素 */
}

.image-preview-area.has-images .image-count-tip {
    display: block;
}

/* 当接近限制时的样式 */
.image-count-tip.near-limit {
    color: #ff4d4f;
}

/* 移动端适配 */
@media screen and (max-width: 576px) {
    .image-count-tip {
        top: -18px;
        font-size: 11px;
    }
}

/* 签到按钮样式 */
.sign-in-button-container {
    position: relative;
    margin-left: auto;
    margin-right: 20px;
}

.sign-in-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #feb565;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(254, 181, 101, 0.3);
    opacity: 0.9;
}

.sign-in-button:hover {
    background-color: #ffa143;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(254, 181, 101, 0.4);
}

.sign-in-button i {
    font-size: 18px;
}

.sign-in-text {
    display: none;
}

.sign-in-button.signed {
    background-color: #e0e0e0;
    cursor: not-allowed;
}

/* 签到成功动画 */
@keyframes signInSuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.sign-in-success {
    animation: signInSuccess 0.5s ease;
}

/* 移动端样式 */
@media (max-width: 576px) {
    .sign-in-button-container {
        position: fixed;
        right: 20px;
        top: 80px;
        z-index: 1000;
        margin: 0;
    }

    .sign-in-button {
        width: auto;
        height: auto;
        border-radius: 20px;
        padding: 8px 16px;
        background-color: rgba(254, 181, 101, 0.9);
        backdrop-filter: blur(5px);
    }

    .sign-in-text {
        display: inline;
        margin-left: 8px;
        font-size: 14px;
    }

    .sign-in-button.signed {
        background-color: rgba(224, 224, 224, 0.9);
    }
}

/* 签到提示框样式 */
.sign-in-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background-color: white;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    white-space: nowrap;
    display: none;
    z-index: 1001;
}

.sign-in-tooltip.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 剩余对话次数显示样式 */
.remaining-quota {
    font-size: 15px;
    color: #ffffff;
    margin: 0;
    position: absolute; /* 改为绝对定位 */
    right: 300px; 
    top: 135px; /* 垂直位置对齐 */
    opacity: 0.9;
    margin-left: 3px;
}

#quotaNumber {
    font-weight: bold;
    color: #fff;
    margin: 0 4px;
}

/* 数字气泡样式 */
.quota-bubble {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 12px;
    border-radius: 12px;
    font-weight: bold;
    color: #fff;
    margin: 0 4px;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 无限次数样式 - 不使用气泡 */
.quota-bubble.infinite {
    background: none;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
    font-size: 18px;
}

.quota-bubble.infinite::after {
    content: "∞";
    font-weight: bold;
}

/* 移动端适配 */
@media screen and (max-width: 576px) {
    .remaining-quota {
        position: relative; /* 移动端改回相对定位 */
        font-size: 14px;
        top: 30px; /* 稍微增加顶部距离 */
        right: auto; /* 移除右侧定位 */
    }
    
    .quota-bubble {
        padding: 1px 10px;
    }
    
    .quota-bubble.infinite {
        font-size: 16px;
        padding: 0;
    }
}

#botConfigModal .modal-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}

#botConfigModal .image-preview-area {
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 8px;
    background-color: var(--color-background);
}

#botConfigModal .image-preview-area.has-images {
    border: 1px dashed var(--color-light-gray);
}

#botConfigModal .upload-button {
    margin: 10px 0;
    width: 100%;
    height: 44px;
    background-color: var(--color-background);
    border: 1px dashed var(--color-primary);
    border-radius: 8px;
    color: var(--color-primary);
}

#botConfigModal .upload-button:hover {
    background-color: rgba(254, 181, 101, 0.1);
}

#botConfigModal .image-preview-container {
    position: relative;
    display: inline-block;
    margin: 5px;
}

#botConfigModal .image-preview {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-light-gray);
}

#botConfigModal .image-delete-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
}

#botConfigModal .image-delete-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* 移动端适配 */
@media screen and (max-width: 576px) {
    #botConfigModal .image-preview {
        width: 60px;
        height: 60px;
    }
    
    #botConfigModal .image-delete-btn {
        width: 16px;
        height: 16px;
        top: -4px;
        right: -4px;
    }
    
    #botConfigModal .upload-button {
        height: 40px;
    }
}

#botConfigModal .form-group {
    position: relative;
    margin-bottom: 15px;
}

#botConfigModal .upload-button {
    margin-bottom: 10px;
    width: 100%;
    position: relative;
    z-index: 2;
}

#botConfigModal .image-preview-area {
    margin-top: 10px;
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background-color: var(--color-background);
    border-radius: 8px;
    width: 100%;
    position: relative;
}

#botConfigModal .image-preview-area.has-images {
    display: flex;
}

#botConfigModal .image-preview-container {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0;
}

#botConfigModal .image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-light-gray);
}

#botConfigModal .image-delete-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
}

#botConfigModal .image-delete-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

#botConfigModal .image-count-tip {
    width: 100%;
    text-align: left;
    color: #666;
    font-size: 12px;
    margin-bottom: 5px;
}

@media screen and (max-width: 576px) {
    #botConfigModal .form-group {
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        position: relative;
        padding-bottom: 10px;
    }

    #botConfigModal .form-group label {
        margin-bottom: 10px;
    }

    #botConfigModal .upload-button {
        height: 40px;
        margin-bottom: 10px;
        position: static;
    }

    #botConfigModal .image-preview-area {
        position: static;
        width: 100%;
        margin-top: 10px;
        padding: 8px;
        background-color: var(--color-background);
        border-radius: 8px;
    }

    #botConfigModal .image-preview-container {
        width: 60px;
        height: 60px;
    }
    
    #botConfigModal .image-delete-btn {
        width: 16px;
        height: 16px;
        top: -4px;
        right: -4px;
    }

    #botConfigModal .image-count-tip {
        margin: 0 0 8px 0;
        font-size: 12px;
    }

    #botConfigModal .modal-body {
        padding: 15px;
    }

    #botConfigModal textarea {
        margin-bottom: 0;
    }
}

/* 服务协议和隐私政策样式 */
.terms-agreement {
    width: 70%;
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 15px;
    white-space: nowrap;
}

.terms-agreement .terms-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.terms-agreement .terms-link:hover {
    color: #ff7f50;
}

/* 配额用完提示框样式 */
.quota-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    max-width: 90%;
    width: auto;
    text-align: center;
    z-index: 10000;
    font-size: 15px;
    line-height: 1.5;
    word-break: break-word;
    display: none;
    animation: fadeInAlert 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.quota-alert.show {
    display: block;
}

@keyframes fadeInAlert {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* 移动端适配 */
@media (max-width: 576px) {
    .quota-alert {
        font-size: 14px;
        padding: 14px 20px;
        width: 85%;
    }
}

.upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    border-radius: 8px;
}

/* 添加选择框样式 */
#botConfigForm .form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-light-gray);
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    min-height: 40px;
    height: auto;
    background-color: white;
    cursor: pointer;
    color: #333; /* 添加黑色字体颜色 */
    -webkit-text-fill-color: #333; /* 解决iOS上的问题 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

#botConfigForm .form-group select:focus {
    border-color: var(--color-primary);
    outline: none;
}

#botConfigForm .form-group select.error {
    border-color: #ff4d4f;
    animation: errorBorder 2s ease infinite;
    background-color: #fff2f0;
}

#botConfigForm .form-group select option {
    padding: 10px;
    color: #333; /* 添加黑色字体颜色 */
}

/* 为移动设备特别添加样式 */
@media screen and (max-width: 576px) {
    #botConfigForm .form-group select,
    #botConfigForm .form-group select option {
        color: #333 !important; /* 使用!important确保覆盖浏览器默认样式 */
        -webkit-text-fill-color: #333 !important; /* 针对iOS设备 */
    }
}

/* Bot角标样式 */
.bot-card {
    position: relative; /* 确保角标可以相对于卡片定位 */
}

.bot-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 6px;
    border-radius: 0 6px 0 6px; /* 减小右上角圆角从8px到6px */
    font-size: 10px; /* 缩小字体 */
    font-weight: bold;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.image-gen-badge {
    background: linear-gradient(135deg, #feb565, #f8943f); /* 渐变背景更美观 */
    color: white;
    letter-spacing: 0.5px; /* 字间距增加可读性 */
}

.audio-trans-badge {
    background: linear-gradient(135deg, #5a7d8c, #425e6a);
    color: white;
    letter-spacing: 0.5px;
}

/* 鼠标悬停时的小动画效果 */
.bot-badge:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 移动端适配 */
@media screen and (max-width: 576px) {
    .bot-badge {
        font-size: 9px; /* 移动端字体更小 */
        padding: 1px 5px;
        border-radius: 0 5px 0 4px;
    }
}

/* 长按保存图片提示 */
.save-image-tip {
    display: none; /* 默认不显示 */
}

/* 移动端适配 */
@media screen and (max-width: 576px) {
    .image-modal {
        position: fixed;
        display: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 1000;
    }

    .image-modal.show {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; /* 改为纵向排列 */
    }
    
    .image-modal img {
        max-width: 90%;
        max-height: calc(90% - 40px); /* 预留提示文字的空间 */
        object-fit: contain;
        margin-bottom: 20px; /* 与提示文字保持间距 */
    }
    
    .save-image-tip {
        display: block;
        position: relative; /* 改为相对定位 */
        margin: 0 auto;
        text-align: center;
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        width: 100%;
        padding: 10px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
}

/* 音频上传按钮样式 */
.audio-upload-button {
    width: 44px;
    height: 44px;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-right: 12px;
}

.audio-upload-button i {
    font-size: 20px;
    color: var(--color-primary);
}

@media screen and (max-width: 576px) {
    .audio-upload-button {
        width: 34px;
        height: 34px;
        margin-right: -11px;
    }
}

.audio-upload-button:hover {
    background-color: rgba(254, 181, 101, 0.1);
}

.audio-upload-button:active {
    transform: scale(0.9);
}

/* 音频预览区域 */
.audio-preview-area {
    display: none;
    width: 100%;
    min-height: 0;
    max-height: 120px;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
    background-color: var(--color-background);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 2;
    padding-left: 187px;
    margin-top: -90px;
    margin-left: -10px;
    padding-top: 13px;
    bottom: -15px;
}

/* 当有音频文件时显示预览区域 */
.audio-preview-area.has-audio {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
}

/* 音频预览容器 */
.audio-preview-container {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    width: 180px;
    height: 60px;
    background-color: #f5f5f5;
    border-radius: 8px;
    border: 1px solid var(--color-light-gray);
    display: flex;
    align-items: center;
    padding: 0 10px;
    /* 移除overflow:hidden以显示删除按钮 */
}

/* 音频图标 */
.audio-icon {
    font-size: 24px;
    color: var(--color-primary);
    margin-right: 10px;
    flex-shrink: 0;
}

/* 音频文件信息 */
.audio-info {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
}

.audio-filename {
    font-weight: bold;
    margin-bottom: 2px;
    color: var(--color-text);
}

/* 删除按钮 */
.audio-delete-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
    z-index: 5; /* 增加z-index确保显示在上层 */
}

.audio-delete-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* 消息中的音频卡片 */
.message-audio {
    display: flex;
    margin-bottom: 4px; /* 从10px减小到4px，缩小与文字的间距 */
    max-width: 70%;  /* 与图片保持一致 */
    margin-left: auto;  /* 使音频靠右显示 */
    margin-right: 10px; /* 右侧边距 */
    justify-content: flex-end; /* 内容靠右对齐 */
}

/* 机器人消息中的音频卡片 - 靠左显示 */
.bot-message .message-audio {
    margin-left: 10px;
    margin-right: auto;
    justify-content: flex-start;
}

.message-audio .audio-preview-container {
    width: 220px;
    height: 70px;
    margin: 0;
    background-color: rgba(245, 245, 245, 0.9);
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.message-audio .audio-icon {
    font-size: 28px;
}

.message-audio .audio-info {
    font-size: 14px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .chat-messages {
        padding-bottom: 120px; /* 为预览区域预留空间 */
    }

    .audio-preview-area {
        position: absolute;
        bottom: 70px; /* 调整位置，确保在输入框上方 */
        left: 0;
        right: 0;
        max-height: 100px;
        padding: 4px;
        background-color: var(--color-background);
        z-index: 10;
        padding-left: 15px;
        margin-left: 7px;
    }
    
    .audio-preview-container {
        width: 150px;
        height: 50px;
    }
    
    .audio-delete-btn {
        width: 16px;
        height: 16px;
        top: -4px;
        right: -4px;
    }
    
    .message-audio .audio-preview-container {
        width: 180px;
        height: 60px;
    }
    
    .message-audio .audio-icon {
        font-size: 24px;
    }
    
    .message-audio .audio-info {
        font-size: 12px;
    }
}

/* 上传中样式 */
.upload-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    z-index: 10;
    font-size: 14px;
}

/* 上传成功样式 */
.upload-success {
    position: absolute;
    top: -6px;
    right: 20px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #52c41a;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 6;
}

/* 上传失败样式 */
.upload-error {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 77, 79, 0.7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    z-index: 10;
    font-size: 14px;
}

.upload-error i {
    margin-right: 5px;
}

/* 音频配置模态窗口样式 */
#botConfigModal .modal-audio-preview-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0; /* 修改：减小最小高度 */
    border: none; /* 修改：移除边框 */
    border-radius: 0;
    margin-top: 10px;
    padding: 0; /* 修改：移除内边距 */
    transition: background-color 0.3s ease;
    position: relative;
    display: none;
}

#botConfigModal .modal-audio-preview-area.has-audio {
    display: flex;
    background-color: transparent; /* 修改：去掉背景色 */
    border-color: transparent; /* 修改：去掉边框色 */
}

#botConfigModal .modal-audio-preview-container {
    display: flex;
    align-items: center;
    background: rgba(254, 181, 101, 0.1);
    border: 1px solid rgba(254, 181, 101, 0.3); /* 添加：轻微边框 */
    border-radius: 8px;
    padding: 12px; /* 修改：增加内边距 */
    margin-bottom: 0;
    position: relative;
    width: 100%;
    box-shadow: 0 2px 6px rgba(254, 181, 101, 0.15); /* 添加：轻微阴影 */
    transition: all 0.3s ease; /* 添加：过渡效果 */
}

#botConfigModal .modal-audio-preview-container:hover {
    background: rgba(254, 181, 101, 0.15); /* 添加：悬停效果 */
    box-shadow: 0 3px 8px rgba(254, 181, 101, 0.25); /* 添加：悬停时阴影加深 */
}

#botConfigModal .audio-icon {
    color: var(--color-primary);
    font-size: 24px;
    margin-right: 15px;
}

#botConfigModal .audio-info {
    flex: 1;
    overflow: hidden;
}

#botConfigModal .audio-filename {
    font-weight: bold;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#botConfigModal .audio-delete-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    margin-left: 10px;
    transition: color 0.3s ease;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#botConfigModal .audio-delete-btn:hover {
    color: #e74c3c;
    background-color: rgba(231, 76, 60, 0.1);
}

/* 调整媒体查询样式 */
@media screen and (max-width: 576px) {
    #botConfigModal .modal-audio-preview-container {
        padding: 10px;
        margin-top: 5px; /* 添加：移动端顶部边距 */
    }
    
    #botConfigModal .audio-icon {
        font-size: 20px;
    }
    
    #botConfigModal .audio-delete-btn {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
    
    #botConfigModal .audio-upload-button {
        height: 40px;
        margin-bottom: 10px;
    }
}

/* 音频上传按钮 */
#botConfigModal .audio-upload-button {
    margin: 10px 0;
    width: 100%;
    height: 44px;
    background-color: var(--color-background);
    border: 1px dashed var(--color-primary);
    border-radius: 8px;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

#botConfigModal .audio-upload-button:hover {
    background-color: rgba(254, 181, 101, 0.1);
}

/* 添加拖动提示蒙层样式 */
.drag-drop-zone {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15vh; /* 从20vh改为15vh */
    background-color: rgba(80, 80, 80, 0.7); /* 从红色改为灰色 */
    border-top: 2px dashed rgba(255, 255, 255, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: all 0.3s ease;
}

.drag-drop-content {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
}

.drag-drop-content i {
    font-size: 32px;
    margin-bottom: 8px;
}

.drag-drop-content p {
    font-size: 14px;
    margin: 0;
}

@keyframes pulseDrop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* 添加活跃状态，当邀请浮窗拖到底部区域时应用 */
.drag-drop-zone.active {
    background-color: rgba(80, 80, 80, 0.9); /* 更醒目的灰色背景 */
}

/* 移动端专用样式 */
@media screen and (max-width: 576px) {
    .drag-drop-zone {
        height: 15vh; /* 从20vh改为15vh */
    }
}

/* 图片选择控件样式 */
.image-select-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 10px 0;
    overflow: visible; /* 允许内容溢出 */
    background: transparent; /* 设置为透明背景 */
}
.image-select-row {
    display: flex;
    gap: 16px;
    margin-bottom: 0;
    min-height: auto; /* 高度自适应内容 */
    overflow: visible; /* 允许内容溢出 */
    background: transparent; /* 设置为透明背景 */
}
.image-select-img-wrapper {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* 添加垂直居中 */
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    background: #f7f9fc; /* 统一背景色，使用页面背景色 */
    height: auto; /* 修改为自适应高度 */
    overflow: visible; /* 允许内容溢出，保持完整展示 */
    min-height: 150px; /* 设置最小高度，给竖图更多空间 */
}
.image-select-img-wrapper.selected {
    border-color: #feb565;
    box-shadow: 0 0 0 2px #feb56533;
    background: #fffbe6;
}
.image-select-img-wrapper.error {
    border-color: #ff4d4f;
}
.image-select-img-wrapper:hover {
    border-color: #feb565;
}
.image-select-img {
    width: auto; /* 修改为自适应宽度 */
    height: auto; /* 自适应高度 */
    max-width: 100%; /* 最大宽度限制 */
    max-height: 130px; /* 增加最大高度，给竖图更多空间 */
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 6px;
    background: transparent; /* 图片背景设为透明 */
    display: block;
}
.image-select-label {
    font-size: 13px;
    color: #666;
    margin-top: 2px;
    text-align: center;
}
@media screen and (max-width: 576px) {
    .image-select-img {
        width: auto; /* 移动端也使用自适应宽度 */
        height: auto;
        max-height: 110px; /* 移动端增加最大高度 */
        max-width: 100%;
    }
    .image-select-img-wrapper {
        width: 100%; /* 宽度改为100% */
        height: auto; /* 高度自适应 */
        min-height: 130px; /* 移动端设置最小高度 */
        padding: 6px; /* 减小内边距 */
    }
    .image-select-row {
        gap: 8px;
        margin-bottom: 12px; /* 增加行间距，从8px增加到12px */
        overflow: visible; /* 允许内容溢出 */
    }
    .image-select-container {
        gap: 16px; /* 移动端增加列间距 */
        overflow: visible; /* 允许内容溢出 */
    }
}

.example-field-container {
    background: #f8f8fa;
    border: 1px dashed #feb565;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 8px 0 16px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}
.example-field-text {
    color: #666;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 4px;
    word-break: break-all;
}
.example-field-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 260px;
    border-radius: 6px;
    border: none;
    object-fit: contain;
    margin-top: 8px;
    margin-bottom: 8px;
}
@media screen and (max-width: 576px) {
    .example-field-image {
        max-width: 100%;
        max-height: 120px;
    }
    .example-field-container {
        padding: 10px 8px;
    }
}