/* 定义 CSS 变量 */
:root {
    /* 白天模式 (默认) */
    --bg-color: #f4f4f4;
    --sidebar-bg: #fff;
    --sidebar-border: #ddd;
    --sidebar-h2-border: #eee;
    --chat-list-item-border: #eee;
    --chat-list-item-hover-bg: #f0f0f0;
    --chat-list-item-active-bg: #e9e9e9;
    --main-content-bg: #fff;
    --main-content-shadow: rgba(0, 0, 0, 0.1);
    --message-bg-ai: #e9e9eb;
    --message-text-ai: #333;
    --message-sender-ai: #555;
    --message-bg-user: #007bff;
    --message-text-user: white;
    --message-sender-user: rgba(255, 255, 255, 0.8);
    --input-area-bg: #f9f9f9;
    --input-border: #ccc;
    --input-text: #333; /* 输入框文字颜色 */
    --placeholder-text: #888; /* placeholder 颜色 */
    --code-bg: #f0f0f0; /* 代码块背景 */
    --code-border: #ddd; /* 代码块边框 */
    --blockquote-border: #ccc;
    --blockquote-text: #666;
    --button-primary-bg: #007bff;
    --button-primary-text: white;
    --button-primary-hover-bg: #0056b3;
    --button-secondary-bg: #6c757d; /* 清除上下文按钮 */
    --button-secondary-text: white;
    --button-secondary-hover-bg: #5a6268;
    --button-success-bg: #28a745; /* 上传按钮 */
    --button-success-text: white;
    --button-success-hover-bg: #218838;
    --button-warning-bg: #ffc107; /* 图片生成按钮 */
    --button-warning-text: #212529;
    --button-warning-hover-bg: #e0a800;
    --button-danger-bg: #f44336; /* 删除按钮 */
    --button-danger-text: white;
    --button-danger-hover-bg: #d32f2f;
    --disabled-bg: #cccccc;
    --disabled-text: #666;
    --copy-button-bg: rgba(0, 0, 0, 0.5);
    --copy-button-hover-bg: rgba(0, 0, 0, 0.7);
    --copy-button-active-bg: rgba(0, 0, 0, 0.9);
    --copy-button-text: white;
    --copied-bg: #28a745;
    --copied-text: white;

    /* 主题切换按钮颜色 */
    --theme-toggle-bg: #6c757d;
    --theme-toggle-hover-bg: #5a6268;
    --theme-toggle-text: white;

    /* 侧边栏开关按钮颜色 */
    --sidebar-toggle-bg: #eee;
    --sidebar-toggle-text: #333;
    --sidebar-toggle-hover-bg: #ddd;
}

/* 黑夜模式 */
.dark-mode {
    --bg-color: #121212;
    --sidebar-bg: #1e1e1e;
    --sidebar-border: #333;
    --sidebar-h2-border: #333;
    --chat-list-item-border: #333;
    --chat-list-item-hover-bg: #2a2a2a;
    --chat-list-item-active-bg: #3a3a3a;
    --main-content-bg: #2a2a2a;
    --main-content-shadow: rgba(0, 0, 0, 0.3);
    --message-bg-ai: #3a3a3a;
    --message-text-ai: #eee;
    --message-sender-ai: #bbb;
    --message-bg-user: #0056b3; /* 深一点的蓝色 */
    --message-text-user: #fff;
    --message-sender-user: rgba(255, 255, 255, 0.7);
    --input-area-bg: #1e1e1e;
    --input-border: #555;
    --input-text: #eee;
    --placeholder-text: #aaa;
    --code-bg: #2d2d2d; /* Prism tomorrow 主题的背景 */
    --code-border: #444;
    --blockquote-border: #555;
    --blockquote-text: #aaa;
    --button-primary-bg: #0056b3;
    --button-primary-text: white;
    --button-primary-hover-bg: #004085;
    --button-secondary-bg: #5a6268;
    --button-secondary-text: white;
    --button-secondary-hover-bg: #495057;
    --button-success-bg: #218838;
    --button-success-text: white;
    --button-success-hover-bg: #1e7e34;
    --button-warning-bg: #e0a800;
    --button-warning-text: #212529;
    --button-warning-hover-bg: #c69500;
    --button-danger-bg: #d32f2f;
    --button-danger-text: white;
    --button-danger-hover-bg: #c82333;
     --disabled-bg: #444;
     --disabled-text: #888;
    --copy-button-bg: rgba(255, 255, 255, 0.2);
    --copy-button-hover-bg: rgba(255, 255, 255, 0.4);
    --copy-button-active-bg: rgba(255, 255, 255, 0.6);
    --copy-button-text: white;
    --copied-bg: #218838; /* 与白天模式相同或稍作调整 */
    --copied-text: white;

    /* 主题切换按钮颜色 (黑夜模式) */
    --theme-toggle-bg: #3a3a3a; /* 可以使用 AI 消息背景色 */
    --theme-toggle-hover-bg: #4a4a4a;
    --theme-toggle-text: #eee; /* 可以使用 AI 消息文字颜色 */

    /* 侧边栏开关按钮颜色 (黑夜模式) */
    --sidebar-toggle-bg: #3a3a3a;
    --sidebar-toggle-text: #eee;
    --sidebar-toggle-hover-bg: #4a4a4a;
}


body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    /* 使用 CSS 变量 */
    background-color: var(--bg-color);
    color: var(--message-text-ai); /* 默认文字颜色 */
    display: flex;
    height: 100vh;
    /* 允许 body 滚动 */
    overflow-y: auto;
    overflow-x: hidden; /* 防止横向滚动 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 添加过渡效果 */
}

.app-container {
    display: flex;
    width: 100%;
    height: 100%;
    /* 移除 overflow: hidden; 让 body 控制滚动 */
    /* overflow: hidden; */
}

/* 侧边栏样式 */
.sidebar {
    width: 280px;
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    padding: 20px;
    display: flex;
    flex-direction: column;
    /* 允许侧边栏内容滚动 */
    overflow-y: auto;
     transition: background-color 0.3s ease, border-color 0.3s ease, width 0.3s ease; /* 添加宽度过渡 */
     /* 防止侧边栏在空间不足时收缩 */
     flex-shrink: 0;
     /* 添加 position: relative; 使内部 absolute 定位的元素相对于它定位 */
     position: relative;
}

.sidebar h2 {
    margin-top: 0;
    font-size: 1.2em;
    border-bottom: 1px solid var(--sidebar-h2-border);
    padding-bottom: 10px;
    margin-bottom: 10px;
     transition: border-color 0.3s ease;
}

/* 侧边栏顶部：设置区域 */
.sidebar-settings {
    flex-shrink: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--sidebar-border);
    /* 允许设置区域内容滚动 */
    overflow-y: auto;
    max-height: 50%; /* 保持最大高度，防止设置区域过大挤压聊天列表 */
     transition: border-color 0.3s ease;
     position: relative;
     /* 调整 padding-top，只为设置内容留出空间，h2 不再占用高度 */
     padding-top: 20px;
}

.sidebar-settings h2 {
     /* 调整 H2 样式，使其不占用空间，只作为背景或边框的参考 */
     position: absolute;
     top: 0; /* 顶部对齐 */
     left: 0; /* 左侧对齐 */
     right: 0; /* 右侧对齐 */
     height: 40px; /* 例如, 设置一个高度 */
     line-height: 40px; /* 使文本垂直居中，虽然现在没有文本 */
     padding: 0 20px; /* 左右内边距 */
     margin: 0; /* 移除 margin */
     font-size: 0; /* 将字体大小设为 0，隐藏文本但保留元素的尺寸和边框 */
     border-bottom: 1px solid var(--sidebar-h2-border);
     box-sizing: border-box;
     background-color: var(--sidebar-bg);
     z-index: 10;
     transition: background-color 0.3s ease, border-color 0.3s ease;
}

.sidebar-settings .settings-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    /* 调整 settings-group 的 margin-top，使其从 H2 下方开始 */
     margin-top: 40px; /* 例如，H2 的高度 */
     padding-top: 0;
}

/* 第一个 settings-group 需要额外的顶部空间 */
.sidebar-settings .settings-group:first-of-type {
     margin-top: 40px; /* 确保第一个 settings-group 在 H2 下方 */
     padding-top: 0;
}


.sidebar-settings label {
    font-weight: bold;
    margin-bottom: 5px;
}

.sidebar-settings select, .sidebar-settings textarea {
    padding: 8px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    font-size: 1em;
    width: 100%;
    box-sizing: border-box;
    /* 使用侧边栏背景色 */
    background-color: var(--sidebar-bg);
    color: var(--input-text);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.dark-mode .sidebar-settings select,
.dark-mode .sidebar-settings textarea {
    background-color: var(--sidebar-bg);
}


.sidebar-settings textarea {
    resize: vertical;
}

.sidebar-settings select::placeholder,
.sidebar-settings textarea::placeholder {
     color: var(--placeholder-text);
}


/* 侧边栏底部：聊天列表区域 */
.sidebar-chat-list {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* 允许聊天列表滚动 */
}

.sidebar-chat-list h2 {
     margin-top: 0;
    font-size: 1.2em;
    border-bottom: 1px solid var(--sidebar-h2-border);
    padding-bottom: 10px;
    margin-bottom: 10px;
     transition: border-color 0.3s ease;
}

#chat-list {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
    flex-grow: 1;
    overflow-y: auto; /* 确保列表本身可以滚动 */
}

#chat-list li {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--chat-list-item-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
     transition: background-color 0.2s ease, border-color 0.3s ease;
}

#chat-list li:hover {
    background-color: var(--chat-list-item-hover-bg);
}

#chat-list li.active {
    background-color: var(--chat-list-item-active-bg);
    font-weight: bold;
}

#chat-list li span {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#chat-list li .delete-chat {
    /* 使用 CSS 变量 */
    background-color: var(--button-danger-bg);
    color: var(--button-danger-text);
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 0.8em;
    margin-left: 10px;
    flex-shrink: 0;
     transition: background-color 0.2s ease;
}

#chat-list li .delete-chat:hover {
    background-color: var(--button-danger-hover-bg);
}

/* 新建聊天和清除上下文按钮样式 */
#new-chat-btn, #clear-context-btn {
    display: block;
    width: 100%;
    padding: 10px;
    /* 使用 CSS 变量 */
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 10px;
    text-align: center;
     transition: background-color 0.2s ease, color 0.2s ease;
     flex-shrink: 0; /* 防止按钮被挤压 */
}

#new-chat-btn:hover, #clear-context-btn:hover {
    background-color: var(--button-primary-hover-bg);
}

#clear-context-btn {
     background-color: var(--button-secondary-bg); /* 不同的颜色 */
     margin-top: 10px;
     color: var(--button-secondary-text);
}

#clear-context-btn:hover {
     background-color: var(--button-secondary-hover-bg);
}

/* 侧边栏开关按钮和主题切换按钮的基础样式 */
.sidebar-toggle, #theme-toggle-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1em;
    box-shadow: 0 2px 4px var(--main-content-shadow);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    /* 使用 CSS 变量 */
    background-color: var(--sidebar-toggle-bg);
    color: var(--sidebar-toggle-text);
    border: 1px solid var(--sidebar-toggle-text);
}

.sidebar-toggle:hover, #theme-toggle-btn:hover {
    background-color: var(--sidebar-toggle-hover-bg);
    box-shadow: 0 3px 6px var(--main-content-shadow);
}

.sidebar-toggle i, #theme-toggle-btn i {
    pointer-events: none;
}

/* 侧边栏内的开关按钮 (关闭按钮) */
#sidebar-toggle-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 11;
    /* 默认在大屏幕下隐藏，小屏幕下通过 JS 控制显示 */
     display: none;
}

/* 主内容区内的开关按钮 (打开按钮) */
#sidebar-open-btn {
     /* 在默认 (桌面) 视图下隐藏 */
     display: none;
     /* 定位到主内容区顶部，覆盖在内容上 */
     position: absolute;
     top: 10px;
     left: 10px;
     z-index: 20; /* 确保它在消息内容之上 */
     /* 使用 CSS 变量 */
     background-color: var(--sidebar-toggle-bg);
     color: var(--sidebar-toggle-text);
     border: 1px solid var(--sidebar-toggle-text);
}


/* 主题切换按钮样式 */
#theme-toggle-btn {
    position: absolute;
    top: 5px;
    right: 5px; /* 调整距离右侧距离 */
    z-index: 11;
    /* 使用主题特有的 CSS 变量 */
    background-color: var(--theme-toggle-bg);
    color: var(--theme-toggle-text);
    border: 1px solid var(--theme-toggle-text);
}

#theme-toggle-btn:hover {
     background-color: var(--theme-toggle-hover-bg);
}


/* 主内容区域样式 */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    position: relative; /* 用于定位 #sidebar-open-btn */
}

/* 聊天框样式 */
.chat-box {
    display: flex;
    flex-direction: column;
    /* 调整 flex-grow 和 height，让消息列表和输入区域平分或按比例占满空间 */
    flex-grow: 1; /* 让 chat-box 填充 main-content 的剩余空间 */
    height: 100%; /* 确保 chat-box 有明确高度，其内部 flex items 才能按比例分配 */
    /* 使用 CSS 变量 */
    background-color: var(--main-content-bg);
    border-radius: 5px;
    box-shadow: 0 2px 4px var(--main-content-shadow);
    overflow: hidden; /* 隐藏内部滚动条，让 messages div 控制 */
     transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 消息列表样式 */
.messages {
    flex-grow: 1; /* 允许消息列表填充可用空间 */
    overflow-y: auto; /* 允许消息列表自身滚动 */
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* 添加水平溢出处理 */
    overflow-x: hidden; /* 隐藏水平溢出，结合换行规则 */
}

/* 单个消息样式 */
.message {
    max-width: 80%;
    padding: 10px;
    border-radius: 10px;
}

.message .sender {
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 5px;
}

.message .content {
    white-space: pre-wrap; /* 允许在空白符处换行 */
    word-wrap: break-word; /* 强制在长单词或 URL 内部换行 */
    overflow-wrap: break-word; /* CSS3 替代 word-wrap */
    position: relative;
    /* 添加水平溢出处理 */
    overflow-x: hidden; /* 隐藏水平溢出，结合换行规则 */
    /* 或者设置为 auto，如果希望出现水平滚动条 */
    /* overflow-x: auto; */
}

/* 用户消息样式 */
.message.user {
    align-self: flex-end;
    background-color: var(--message-bg-user);
    color: var(--message-text-user);
     transition: background-color 0.3s ease, color 0.3s ease;
}

.message.user .sender {
     color: var(--message-sender-user);
     transition: color 0.3s ease;
}


/* AI 消息样式 */
.message.ai {
    align-self: flex-start;
    background-color: var(--message-bg-ai);
    color: var(--message-text-ai);
     transition: background-color 0.3s ease, color 0.3s ease;
}

.message.ai .sender {
     color: var(--message-sender-ai);
     transition: color 0.3s ease;
}


/* 输入区域样式 */
.input-area {
    display: flex;
    align-items: flex-end; /* 底部对齐 */
    padding: 15px;
    border-top: 1px solid var(--sidebar-border);
    background-color: var(--input-area-bg);
    gap: 10px; /* 元素之间的间隙 */
    flex-shrink: 0; /* 防止输入区域被挤压 */
     transition: background-color 0.3s ease, border-color 0.3s ease;
}

#user-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid var(--input-border);
    border-radius: 4px;
    font-size: 1em;
    resize: none;
    max-height: 100px;
    overflow-y: auto;
    background-color: var(--input-area-bg);
    color: var(--input-text);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
     /* 允许 input 在空间不足时收缩 */
     flex-shrink: 1;
      min-height: 40px; /* 确保最小高度 */
}

.dark-mode .input-area #user-input {
    background-color: var(--input-area-bg);
}


#user-input::placeholder {
     color: var(--placeholder-text);
}


/* 文件上传区域样式 */
.file-upload-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}

.upload-button {
    display: inline-block;
    padding: 8px 12px;
    background-color: var(--button-success-bg);
    color: var(--button-success-text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    margin-bottom: 5px;
     transition: background-color 0.2s ease, color 0.2s ease;
}

.upload-button:hover {
     background-color: var(--button-success-hover-bg);
}

#file-upload {
    display: none;
}

#uploaded-files-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8em;
    color: var(--message-sender-ai); /* 使用 AI 文字颜色作为默认 */
}

#uploaded-files-list li {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}

#uploaded-files-list li .remove-file {
    background-color: var(--button-danger-bg);
    color: var(--button-danger-text);
    border: none;
    padding: 1px 4px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 0.7em;
    flex-shrink: 0;
     transition: background-color 0.2s ease;
}

#uploaded-files-list li .remove-file:hover {
    background-color: var(--button-danger-hover-bg);
}

/* 发送和图片生成按钮样式 */
#send-btn, #generate-image-btn {
    padding: 10px 20px;
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    flex-shrink: 0;
     transition: background-color 0.2s ease, color 0.2s ease;
}

#send-btn:hover, #generate-image-btn:hover {
    background-color: var(--button-primary-hover-bg);
}

#generate-image-btn {
     background-color: var(--button-warning-bg);
     color: var(--button-warning-text);
}

#generate-image-btn:hover {
     background-color: var(--button-warning-hover-bg);
}

#send-btn:disabled, #generate-image-btn:disabled {
     background-color: var(--disabled-bg);
     color: var(--disabled-text);
     cursor: not-allowed;
     transition: none; /* 禁用过渡 */
}


/* Markdown 渲染样式 */
.message .content pre {
    background-color: var(--code-bg);
    border: 1px solid var(--code-border);
    padding: 10px;
    border-radius: 5px;
    /* 强制代码块内部出现水平滚动条 */
    overflow-x: auto; /* 允许水平滚动 */
    white-space: pre; /* 保留原始空白和换行，防止在非空白处强制断开 */
    word-break: normal; /* 防止在非空白处强制断开 */

    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
     transition: background-color 0.3s ease, border-color 0.3s ease;
}

.message .content pre code {
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    color: var(--message-text-ai);
    /* 通常不需要在这里设置换行或溢出，由父级 pre 控制 */
}

.message .content blockquote {
    border-left: 4px solid var(--blockquote-border);
    padding-left: 10px;
    color: var(--blockquote-text);
    margin: 10px 0;
     transition: border-color 0.3s ease, color 0.3s ease;
}

.message .content table {
    border-collapse: collapse;
    margin: 10px 0;
    width: 100%;
}

.message .content th,
.message .content td {
    border: 1px solid var(--chat-list-item-border);
    padding: 8px;
    text-align: left;
     transition: border-color 0.3s ease;
}

.message .content th {
    background-color: var(--chat-list-item-active-bg);
     transition: background-color 0.3s ease;
}

/* 代码块复制按钮样式 */
.copy-code-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: var(--copy-button-bg);
    color: var(--copy-button-text);
    border: none;
    border-radius: 3px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 0.8em;
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease, color 0.2s ease;
    z-index: 1;
}

.message .content pre:hover .copy-code-button {
    opacity: 1; /* 鼠标悬停时显示 */
}

.copy-code-button:hover {
    background-color: var(--copy-button-hover-bg);
}

.copy-code-button:active {
    background-color: var(--copy-button-active-bg);
}

/* 复制成功提示 */
.copy-code-button.copied {
     background-color: var(--copied-bg);
     color: var(--copied-text);
}

.copy-code-button.copied::after {
    content: 'Copied!';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--copied-bg);
    color: var(--copied-text);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.7em;
    white-space: nowrap;
    pointer-events: none;
}

/* 消息列表中的文件列表样式 - 新增 */
.message .content .message-files-list {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    font-size: 0.8em;
    color: var(--message-sender-ai); /* 使用 AI 文字颜色作为默认 */
}
.message.user .content .message-files-list {
     color: var(--message-sender-user); /* 用户消息中使用较浅的颜色 */
}

.message .content .message-files-list li {
    margin-bottom: 3px;
    /* 可以添加文件图标 */
     /* 例如： */
     /* &::before { content: "\f016"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 5px; } */
}

/* 消息列表中的图片和音频样式 */
.message .content img {
    max-width: 100%; /* 限制图片宽度 */
    height: auto;
    display: block; /* 独占一行 */
    margin: 10px 0; /* 上下留白 */
    border-radius: 5px; /* 可选：圆角 */
}

.message .content audio {
    width: 100%; /* 适应容器宽度 */
    margin: 10px 0; /* 上下留白 */
}


/* ======================================================================= */
/* ** 响应式设计 - 媒体查询 ** */
/* ======================================================================= */

/* 适用于屏幕宽度小于 768px 的设备 (手机和平板) */
@media (max-width: 767.98px) {
    /* 侧边栏默认隐藏 (宽度为 0) */
    .sidebar {
        width: 0;
        overflow-x: hidden;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        background-color: var(--sidebar-bg);
        z-index: 100; /* 确保侧边栏在最顶层 */
        transition: width 0.3s ease-in-out, background-color 0.3s ease;
        border-right: none; /* 在隐藏状态下移除边框 */
        padding: 20px 0 20px 0; /* 左右 padding 设为 0 */
    }

     /* 当 body 有 sidebar-open class 时，侧边栏打开 */
    body.sidebar-open .sidebar {
        width: 80%; /* 例如，打开时占屏幕宽度的 80% */
        max-width: 300px; /* 或者设置一个最大宽度 */
        border-right: 1px solid var(--sidebar-border); /* 可以选择添加边框 */
        padding: 20px; /* 恢复 padding */
    }

    /* 隐藏侧边栏内的关闭按钮 (在侧边栏关闭时隐藏) */
    #sidebar-toggle-btn {
        display: none;
    }

     /* 显示主内容区内的打开按钮 (在侧边栏关闭时显示) */
    #sidebar-open-btn {
         display: flex; /* 显示汉堡包菜单 */
    }

     /* 当 body 有 sidebar-open class 时，隐藏主内容区内的打开按钮 */
    body.sidebar-open #sidebar-open-btn {
        display: none;
    }

     /* 当 body 有 sidebar-open class 时，显示侧边栏内的关闭按钮 */
    body.sidebar-open #sidebar-toggle-btn {
        display: flex;
    }

    /* 调整侧边栏内部 H2 的 padding，使其在宽度为 0 时不影响布局 */
     .sidebar h2 {
          padding-left: 20px; /* 在打开时有 padding */
          padding-right: 20px;
     }
     body.sidebar-open .sidebar h2 {
          padding-left: 20px;
          padding-right: 20px;
     }
     /* 侧边栏关闭时 H2 没有宽度，不需要 padding */
     .sidebar:not(.sidebar-open) .sidebar-settings h2 {
          padding-left: 0;
          padding-right: 0;
     }


    /* 调整主内容区域 */
    .main-content {
        flex-grow: 1;
        padding: 10px; /* 减少内边距 */
        margin-left: 0;
         position: relative;
    }

    /* 调整聊天框内部的输入区域 */
    .input-area {
        flex-direction: column; /* 垂直堆叠元素 */
        align-items: stretch; /* 元素拉伸至与容器同宽 */
        gap: 5px; /* 减少元素之间的间隙 */
        padding: 10px; /* 减少内边距 */
    }

    /* 调整输入框宽度 */
    #user-input {
        width: 100%; /* 输入框占满宽度 */
        margin-bottom: 5px; /* 与下方元素留白 */
         flex-grow: 0; /* 不允许在垂直方向上拉伸 */
         min-height: 35px; /* 调整最小高度 */
    }

    /* 调整文件上传区域布局 */
    .file-upload-area {
        width: 100%; /* 文件上传区域占满宽度 */
         flex-direction: row; /* 在上传按钮和文件列表之间水平排列 */
         align-items: center;
         gap: 10px;
         margin-bottom: 5px; /* 与下方按钮留白 */
    }

     .file-upload-area .upload-button {
          margin-bottom: 0; /* 移除底边距 */
          flex-shrink: 0; /* 防止按钮被挤压 */
     }

    #uploaded-files-list {
         flex-grow: 1; /* 文件列表占满剩余宽度 */
         overflow-x: auto; /* 如果文件列表过长，允许横向滚动 */
         white-space: nowrap; /* 文件名不换行 */
         margin-bottom: 0; /* 移除底边距 */
         padding-left: 0; /* 移除默认列表 padding */
    }

     #uploaded-files-list li {
         display: inline-flex; /* 使列表项水平排列 */
         margin-right: 10px; /* 列表项之间留白 */
         margin-bottom: 0; /* 移除底边距 */
         border: 1px solid var(--sidebar-border); /* 添加边框区分 */
         padding: 2px 5px;
         border-radius: 4px;
          background-color: var(--sidebar-bg); /* 使用侧边栏背景色 */
     }

    /* 调整发送和图片生成按钮布局 */
    #send-btn, #generate-image-btn {
        width: 100%; /* 按钮占满宽度 */
        margin-top: 0; /* 移除顶部边距 */
        padding: 8px 15px; /* 调整内边距 */
         font-size: 0.9em; /* 调整字体大小 */
    }

     /* 调整清除上下文按钮 */
     #clear-context-btn {
         margin-top: 5px; /* 调整顶部边距 */
          padding: 8px 15px; /* 调整内边距 */
          font-size: 0.9em; /* 调整字体大小 */
     }


    /* 调整消息气泡最大宽度 */
    .message {
        max-width: 95%; /* 在小屏幕上允许消息气泡更宽一些 */
        padding: 8px; /* 减少内边距 */
    }

    /* 调整消息字体大小 */
    body {
        font-size: 14px; /* 减小基础字体大小 */
    }

    .message .sender {
        font-size: 0.8em; /* 减小发送者名字字体 */
    }

    .message .content p {
        font-size: 1em; /* 段落保持基础字体大小 */
    }
     /* 调整代码块字体大小 */
    .message .content pre code {
         font-size: 0.9em;
    }

    /* 调整侧边栏 H2 字体大小 */
    .sidebar h2 {
         font-size: 1em;
    }

    /* 调整侧边栏设置组字体大小 */
    .sidebar-settings label {
         font-size: 0.9em;
    }
     .sidebar-settings select, .sidebar-settings textarea {
         font-size: 0.9em;
         padding: 6px; /* 调整内边距 */
     }

     /* 调整聊天列表字体大小 */
     #chat-list li {
         font-size: 0.9em;
          padding: 8px 10px; /* 调整内边距 */
     }
      #chat-list li .delete-chat {
         font-size: 0.7em;
          padding: 1px 5px;
      }

      /* 调整新建聊天按钮字体大小 */
     #new-chat-btn, #clear-context-btn {
         font-size: 0.9em;
         padding: 8px;
     }

      /* 调整上传文件列表字体大小 */
     #uploaded-files-list {
         font-size: 0.7em;
     }

     /* 媒体查询中针对小屏幕的代码块样式 */
    .message .content pre {
         /* 在小屏幕下，如果希望代码块出现水平滚动条 */
         overflow-x: auto; /* 允许水平滚动 */
         white-space: pre; /* 保留原始空白和换行 */
         word-break: normal; /* 防止在非空白处强制断开 */
    }
}

/* 适用于屏幕宽度大于等于 768px 的设备 (平板和桌面) */
@media (min-width: 768px) {
    /* 在桌面/平板视图下确保侧边栏是打开的 */
    .sidebar {
        width: 280px; /* 恢复默认宽度 */
        position: static; /* 恢复静态定位 */
        overflow-x: hidden; /* 防止横向滚动 */
        border-right: 1px solid var(--sidebar-border); /* 添加边框 */
        z-index: auto;
         transition: width 0.3s ease-in-out, background-color 0.3s ease;
         padding: 20px; /* 恢复 padding */
    }

     /* 确保在桌面视图下侧边栏开关按钮是隐藏的 */
    #sidebar-toggle-btn, #sidebar-open-btn {
        display: none; /* 移除 !important，让 media query 正常覆盖 */
    }

     /* 确保 body 在桌面视图下没有 sidebar-open class */
     body.sidebar-open .sidebar {
         /* 移除小屏幕下的宽度和定位 */
         width: 280px;
         position: static;
     }
      body.sidebar-open #sidebar-toggle-btn,
      body.sidebar-open #sidebar-open-btn {
           display: none;
      }

     /* 调整侧边栏内部 H2 的 padding */
     .sidebar h2 {
          padding-left: 20px;
          padding-right: 20px;
     }


     /* 确保主内容区域没有左侧边距（除非需要留白） */
     .main-content {
         margin-left: 0;
         position: static;
         padding: 20px; /* 恢复内边距 */
     }

    /* 恢复输入区域的 Flexbox 布局 */
    .input-area {
        flex-direction: row; /* 水平排列元素 */
        align-items: flex-end; /* 底部对齐 */
        gap: 10px; /* 恢复间隙 */
        padding: 15px; /* 恢复内边距 */
    }

     #user-input {
         width: auto; /* 恢复自动宽度，让 flex-grow 控制 */
         flex-grow: 1; /* 允许填充剩余空间 */
          min-height: 40px; /* 恢复最小高度 */
     }

     .file-upload-area {
         width: auto; /* 恢复自动宽度 */
          flex-direction: column; /* 恢复垂直排列 */
          align-items: flex-start;
          gap: 5px;
     }

     .file-upload-area .upload-button {
          margin-bottom: 5px; /* 恢复底边距 */
     }

     #uploaded-files-list {
          flex-grow: 0; /* 不填充剩余空间 */
          overflow-x: visible; /* 恢复可见 */
          white-space: normal; /* 恢复换行 */
           margin-bottom: 0; /* 恢复底边距 */
           padding-left: 0; /* 移除默认列表 padding */
     }
     #uploaded-files-list li {
          display: flex; /* 恢复垂直排列 */
          margin-right: 0; /* 移除右边距 */
          margin-bottom: 3px; /* 恢复底边距 */
          border: none; /* 移除边框 */
          padding: 0; /* 移除内边距 */
          background-color: transparent; /* 恢复透明背景 */
     }


     #send-btn, #generate-image-btn {
         width: auto; /* 恢复自动宽度 */
         margin-top: 0; /* 恢复顶部边距 */
         padding: 10px 20px; /* 恢复内边距 */
          font-size: 1em; /* 恢复字体大小 */
     }

      #clear-context-btn {
          margin-top: 10px; /* 恢复顶部边距 */
           padding: 10px; /* 恢复内边距 */
           font-size: 1em; /* 恢复字体大小 */
      }

     /* 恢复消息气泡最大宽度 */
     .message {
         max-width: 80%;
         padding: 10px;
     }

     /* 恢复字体大小 */
     body {
         font-size: 16px;
     }
     .message .sender {
         font-size: 0.9em;
     }
     .message .content p {
         font-size: 1em;
     }
     .message .content pre code {
          font-size: 1em;
     }
     .sidebar h2 {
          font-size: 1.2em;
     }
     .sidebar-settings label {
          font-size: 1em;
     }
      .sidebar-settings select, .sidebar-settings textarea {
          font-size: 1em;
          padding: 8px;
      }
     #chat-list li {
          font-size: 1em;
          padding: 10px;
     }
      #chat-list li .delete-chat {
         font-size: 0.8em;
          padding: 2px 6px;
      }
     #new-chat-btn, #clear-context-btn {
         font-size: 1em;
         padding: 10px;
     }
      #uploaded-files-list {
         font-size: 0.8em;
     }

}