/* static/css/chat.css */
/* ==========================================================================
   通用和基础样式 (General & Base Styles)
   ========================================================================== */
body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 20px;
    overflow-x: hidden; /* 防止水平滚动 */
    width: 100%;
    box-sizing: border-box; /* 确保padding不会导致溢出 */
}

h1 {
    color: #333;
    font-size: 2em; /* 确保标题大小适中 */
    font-weight: bold; /* 确保标题加粗 */
}

h2 {
    color: #333;
    font-size: 1.5em;
    font-weight: bold;
}

pre {
    background-color: #f5f5f5;
    padding: 9px;
    border-radius: 4px;
    overflow: auto;
    margin: 0.5em 0;
}

code {
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    background-color: #f5f5f5;
    padding: 2px 4px;
    border-radius: 4px;
    margin: 0;
}

/* ==========================================================================
   布局容器 (Layout Containers)
   ========================================================================== */
.input-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 1600px;
    margin-top: 20px;
    max-height: 500px;
    box-sizing: border-box;
    /* padding: 0 10px; */
}

#result-container {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin-top: 30px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    /* padding: 0 10px; */
    box-sizing: border-box;
    overflow-x: hidden;
}

.code-container {
    position: relative;
    margin-bottom: 1em;
}

/* ==========================================================================
   组件样式 (Component Styles)
   ========================================================================== */

/* 模型选择区域 */
.model-selection {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    flex: 2; /* 占据更多空间 */
}

.model-option {
    position: relative;
    flex: 1 1 auto; /* 允许按钮根据容器大小调整 */
    min-width: 80px; /* 设置最小宽度防止按钮过窄 */
    height: 45px;
    opacity: 0.9;
    padding: 10px;
    margin-right: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center; /* 文本居中 */
    line-height: 1.5;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.model-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.model-option.selected {
    border: 3px solid; /* 设置边框宽度 */
    border-image-slice: 1; /* 确保边框图像被完整地应用 */
    animation: borderMarquee 5s linear infinite; /* 应用动画 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    height: 45px; /* 保持和未选中一致 */
    box-sizing: border-box;
}

/* 模型选择下拉框 */
.model-select {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
    flex: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tooltip 提示 */
.model-option::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 1000;
    pointer-events: none;
    margin-bottom: 5px;
}

.model-option:hover::after {
    visibility: visible;
    opacity: 1;
}

/* 输入框 */
textarea {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
    overflow: auto;
    box-sizing: border-box;
    min-height: 100px;
    max-height: 460px;
    width: 100%;
    transition: all 0.2s ease;
    white-space: pre-wrap;
    word-wrap: break-word;
}

textarea.scrollable {
    overflow: auto;
}

/* 按钮组 */
.button-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.button-group button {
    padding: 10px 20px;
    font-size: 14px;
    opacity: 0.8;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex: 1;
    max-width: 120px;
}

.button-group button:hover:not(:disabled) {
    background-color: #45a049;
}

.button-group button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.button-group .clear-button {
    background-color: #f44336;
    color: white;
}

.button-group .send-button {
    color: white;
}

.button-group .clear-button:hover:not(:disabled) {
    background-color: #d32f2f;
}

/* 小按钮 (可能用于不同上下文) */
.clear-button, .send-button {
    padding: 2px 6px;
    font-size: 10px;
    cursor: pointer;
}

.clear-button:disabled, .send-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* 结果显示区域 */
#result {
    margin-top: 0;
    padding: 0;
    background-color: transparent;
    border: none;
    width: 100%;
    word-wrap: break-word;
    min-height: 100px;
    box-sizing: border-box;
    padding: 8px 12px 8px 12px;
}

#result, #result * {
    font-size: 15px;
    line-height: 1.8;
}

#result h1, #result h2, #result h3, #result h4, #result h5, #result h6 {
    font-weight: bold !important;
    margin: 0.6em 0 0.3em 0;
}

#result h1 { font-size: 24px !important; }
#result h2 { font-size: 21px !important; }
#result h3 { font-size: 18px !important; }
#result h4 { font-size: 16px !important; }
#result h5, #result h6 { font-size: 15px !important; }
  
#result h1::before,
#result h2::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
    /* 把原来的 base64 图片取反成红色，或者直接用滤镜变红 */
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAM1BMVEUAAAD/YGD/Xl7/X1//a2v/X1//enr/X1//YGD/X1//b2//X1//X1//YGD/YWH/Xl7/Xl6tC6eVAAAAEHRSTlMAgOzLE2YCmTV5CqWTUkk2rbJclgAAAIRJREFUSMftlMEKgCAQRMtVU0vb///aIII5tnNYKPCdffAQnWXyFVrdUyTOZ1HVkLJZ6HojxSqs+rBFSkCXTUAXIaCLEND1LqCLENBFCOiyCOgiBHRRgoZuFMDJCgctOCeF4XqtUlyeBmpcnjdqPL+oFI+ZqeyQDXYqG8bYPvc1LpN/cQEDvh+z6ML+gAAAAABJRU5ErkJggg==)
        no-repeat 50% / cover;
    /* 最简单把黑图标变红：滤镜 */
    filter: hue-rotate(180deg) saturate(200%);
}

#result pre,
#result code {
    font-size: 12px !important;
}

#result hr {
    box-sizing: content-box;
    overflow: hidden;
    background: var(--color-border-default); /* 使用 CSS 变量 */
    height: 2px; /* 增加高度 */
    padding: 0;
    margin: 24px 0;
    border: 0;
}


#result hr:before {
    display: table;
    content: ""
}

#result hr:after {
    display: table;
    clear: both;
    content: ""
}


#result ul,
#result ol {
  margin: 0;
  padding-left: 1.3em;  /* 控制缩进大小 */
}

#result table {
    border-spacing: 0;
    border-collapse: collapse;
    display: block;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    overflow: auto
}

#result td,#result th {
    padding: 0
}

#result:before {
    display: table;
    content: ""
}

#result:after {
    display: table;
    clear: both;
    content: ""
}

#result table th {
    font-weight: var(--base-text-weight-semibold, 600)
}

#result table th,#result table td {
    padding: 6px 13px;
    border: 1px solid var(--color-border-default)
}

#result table tr {
    background-color: var(--color-canvas-default);
    border-top: 1px solid var(--color-border-muted)
}

#result table tr:nth-child(2n) {
    background-color: var(--color-canvas-subtle)
}

#result table img {
    background-color: transparent
}


/* 修改后的代码 */
#result blockquote {
    /* margin: 0; 改为如下 */
    margin: 1em 0; /* 增加了 1em 的上下外边距 */
    padding: 0 1em; 
    color: #57606a; 
    border-left: .25em solid var(--color-border-default); 
}

/* 这两条可以保留，它们能确保引用块内部内容紧贴边框，格式更统一 */
#result blockquote>:first-child {
   margin-top: 0;
}

#result blockquote>:last-child {
   margin-bottom: 0;
}

#result img,
#result-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 代码复制按钮 */
.copy-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 0 1px;
    font-size: 3px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 1px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.copy-btn:hover {
    opacity: 1;
}

/* 响应状态文本 */
#responseStatus {
    margin-top: 10px;
    text-align: center;
    padding: 5px;
    font-size: 16px;
    font-weight: bold;
    background: linear-gradient( to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3 );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1), -1px -1px 2px rgba(0,0,0,0.1);
    animation: fadeIn 0.3s ease-in-out, rainbow 2s linear infinite, pulse 1.5s ease-in-out infinite;
}

/* 切换开关 */
.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 20px 0;
    cursor: pointer;
}

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

.slider {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

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

input:checked + .slider {
    background-color: #4CAF50;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.switch-label {
    margin-left: 10px;
    font-size: 16px;
    color: #666;
}

/* 视图切换按钮 */
.toggle-view-btn {
    position: absolute;
    top: -30px;
    right: 0;
    padding: 5px 10px;
    font-size: 12px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.3s ease;
    z-index: 1;
    display: none; /* 默认隐藏 */
}


/* ==========================================================================
   侧边栏和历史记录 (Sidebar & History)
   ========================================================================== */
.show-history {
    position: fixed;
    right: 20px;
    top: 20px;
    padding: 10px 20px;
    background-color: #4CAF50;
    opacity: 0.8;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    z-index: 1400;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.show-history:hover {
    background-color: #45a049;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

.history-sidebar {
    position: fixed;
    right: -300px;
    top: 0;
    width: 300px;
    height: 100%;
    background-color: white;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    z-index: 1500;
    display: flex;
    flex-direction: column;
}

.history-sidebar.active {
    right: 0;
}

.history-number {
    font-size: 12px;
    color: #666;
    font-weight: bold;
    margin-bottom: 4px;
}

.history-select-item .history-number {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 2px;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.toggle-sidebar {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.history-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px 15px 0 15px;
}

.history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-bottom: 10px;
}

.history-item:hover {
    background-color: #f5f5f5;
}

.history-item:last-child {
    margin-bottom: 15px;
    padding-bottom: 25px;
}

.history-content {
    flex-grow: 1;
    margin-right: 10px;
    overflow: hidden;
}

.history-item .question {
    font-weight: bold;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-item .timestamp {
    font-size: 12px;
    color: #666;
}

.delete-history-btn {
    position: static;
    transform: none;
    flex-shrink: 0;
    background-color: #ff4444;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    opacity: 0.8;
    transition: background-color 0.2s;
}

.delete-history-btn:hover {
    background-color: #cc0000;
}

/* ==========================================================================
   遮罩层和弹窗 (Overlays & Modals)
   ========================================================================== */

/* 加载动画 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1000;
}

.loader {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #4CAF50;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

.loading-text {
    margin-top: 20px;
    color: white;
    font-size: 1.5em;
    font-weight: bold;
}

.loading-gif {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
}

/* 密码输入弹窗 */
.password-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.password-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    width: 80%;
    max-width: 300px;
    margin: 0 20px;
    box-sizing: border-box;
}

.password-box h2 {
    margin-bottom: 15px;
    color: #333;
    font-size: 1.2em;
    word-wrap: break-word;
}

.password-input-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.password-input-group input[type="password"] {
    flex: 1;
    min-width: 150px;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.password-input-group button {
    padding: 8px 15px;
    font-size: 14px;
    white-space: nowrap;
    background-color: #4CAF50;
    color: white;
    border: 1px solid #4CAF50;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.password-input-group button:hover {
    background-color: #45a049;
}

.error-message {
    color: red;
    margin-top: 10px;
    display: none;
    text-align: left;
}

/* 历史记录选择弹窗 */
.history-select-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.history-select-box {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    width: 80%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.history-select-box h3 {
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

#historySelectList {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 15px;
    padding-right: 10px;
}

#historySelectList::-webkit-scrollbar { width: 8px; }
#historySelectList::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
#historySelectList::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
#historySelectList::-webkit-scrollbar-thumb:hover { background: #555; }

.history-select-item {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

.history-select-item:hover {
    background-color: #f5f5f5;
}

.history-select-item label {
    flex: 1;
    margin-left: 10px;
    cursor: pointer;
}

.history-select-buttons {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #eee;
    text-align: right;
    flex-shrink: 0;
}

.history-select-buttons button {
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.history-select-buttons .cancel { background-color: #f44336; }
.history-select-buttons .confirm { background-color: #4CAF50; }
.history-select-buttons .cancel:hover { background-color: #d32f2f; }
.history-select-buttons .confirm:hover { background-color: #45a049; }

/* 自定义 Alert 弹窗 */
.custom-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2090;
    display: none;
    animation: fadeIn 0.3s ease-out;
}

.custom-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2100;
    max-width: 90%;
    width: 400px;
    display: none;
    animation: slideIn 0.3s ease-out;
}

.custom-alert-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.custom-alert-content {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.4;
}

.custom-alert-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
    width: 100%;
}

.custom-alert-button:hover {
    background-color: #45a049;
}

/* ==========================================================================
   动画 (Keyframes)
   ========================================================================== */
@keyframes borderMarquee {
    0%   { border-image-source: linear-gradient(to left,   #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); }
    25%  { border-image-source: linear-gradient(to top,    #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); }
    50%  { border-image-source: linear-gradient(to right,  #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); }
    75%  { border-image-source: linear-gradient(to bottom, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); }
    100% { border-image-source: linear-gradient(to left,   #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rainbow {
    to { background-position: 200% center; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

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


/* 选择按钮样式 */
.select-container {
    display: inline-flex;
    align-items: center;
    margin: 20px 0;
}

.number-select {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 30px;
}

.number-select:hover {
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

.number-select:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

/* 禁用状态样式 */
.number-select:disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    border-color: #ddd;
}

.number-select:disabled:hover {
    border-color: #ddd;
    box-shadow: none;
}

.choice-select {
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 50px;
}

.choice-select:hover {
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

.choice-select:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

/* 禁用状态样式 */
.choice-select:disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
    border-color: #ddd;
}

.choice-select:disabled:hover {
    border-color: #ddd;
    box-shadow: none;
}


.select-label {
    margin-left: 10px;
    font-size: 16px;
    color: #666;
    transition: color 0.3s ease;
}

/* 禁用状态下的标签样式 */
.select-container.disabled .select-label {
    color: #999;
}


/* ==========================================================================
   响应式设计 (Responsive Design for max-width: 600px)
   ========================================================================== */
@media (max-width: 600px) {
    body {
        padding: 20px 10px;
        margin: 0 auto; /* 确保居中 */
        width: 100%;
        box-sizing: border-box;
    }

    /* 确保输入和结果容器居中 */
    .input-container, #result-container {
        margin-left: auto;
        margin-right: auto;
        width: calc(100% - 20px); /* 减去 padding */
    }

    /* 检查模型选择区域的布局 */
    .model-selection {
        justify-content: center; /* 确保按钮居中 */
    }

    /* 布局容器 */
    .input-container {
        max-height: none;
        padding: 0 5px;
    }

    #result-container {
        padding: 10px;
    }

    /* 模型选择 */
    .model-selection {
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 3px;
        width: 100%;
        margin-bottom: 10px;
    }

    .model-option {
        font-size: 11px;
        padding: 6px 8px;
        min-width: 60px;
        margin-bottom: 5px;
    }

    .model-option::after {
        font-size: 10px;
        padding: 3px 6px;
    }

    .model-select {
        font-size: 11px;
        padding: 6px;
    }

    /* 输入框 */
    textarea {
        max-height: 200px;
        font-size: 11px;
    }

    /* 按钮组 */
    .button-group {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .button-group button {
        width: 100%;
        max-width: none;
        padding: 8px 12px;
        font-size: 12px;
        margin: 0;
    }

    .button-group .clear-button { background-color: #f44336; }
    .button-group .send-button { background-color: #4CAF50; }

    /* 结果区域 */
    #result, #result * { font-size: 11px !important; }
    #result h1 { font-size: 14px !important; }
    #result h2 { font-size: 13px !important; }
    #result h3 { font-size: 12px !important; }
    #result h4, #result h5, #result h6 { font-size: 11px !important; }
    #result pre, #result code { font-size: 11px !important; }
    #result img, #result-container img { max-width: 100%; height: auto; display: block; }
    
    /* 复制按钮 */
    .copy-btn {
        padding: 2px 4px;
        font-size: 9px;
    }
    
    /* 渲染切换按钮 */
    .toggle-view-btn {
        padding: 2px 4px;
        font-size: 9px;        
    }

    /* 密码弹窗 */
    .password-box {
        padding: 15px;
        width: 95%;
        margin: 0 10px;
    }

    .password-box h2 {
        font-size: 1.1em;
        margin-bottom: 10px;
    }

    .password-input-group {
        flex-direction: column;
        width: 100%;
    }

    .password-input-group input[type="password"],
    .password-input-group button {
        width: 100%;
        margin: 0;
        border-radius: 4px;
    }

    .password-input-group button {
        background-color: #4CAF50;
        color: white;
    }

    .error-message {
        font-size: 12px;
        margin-top: 5px;
    }

    /* 历史记录侧边栏 */
    .show-history {
        top: 10px;
        right: 10px;
        padding: 8px 15px;
        font-size: 12px;
    }

    /* 切换开关 */
    .switch {
        margin: 0 2px;
        flex-shrink: 0;
    }

    div[style*="display: flex; align-items: center; gap: 16px; margin: 16px 0;"] {
        gap: 6px !important;
    }

    .select-container {
        display: inline-flex;
        align-items: center;
        margin: 5px 0;
        gap: 5px;
    }
    
    .number-select, .choice-select {
        padding: 6px 8px;
        font-size: 11px;
        border: 1px solid #ccc;
        border-radius: 3px;
        background-color: white;
        color: #333;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 40px;
        max-width: 80px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    
    /* 确保在极小屏幕上也能正常显示 */
    .choice-select {
        min-width: 50px;
    }    

    .slider {
        width: 48px;
        height: 27px;
    }

    .slider:before {
        height: 21px;
        width: 21px;
        left: 3px;
        bottom: 3px;
    }

    input:checked + .slider:before {
        transform: translateX(21px);
    }

    .switch-label {
        font-size: 12px;
        margin-left: 8px;
    }
    
    /* 历史记录选择弹窗 */
    .history-select-box {
        width: 90%;
        padding: 15px;
        max-height: 90vh;
    }

    .history-select-item {
        padding: 10px;
    }
    
    /* 自定义 Alert 弹窗 */
    .custom-alert {
        width: 85%;
        padding: 15px;
    }

    .custom-alert-title { font-size: 16px; }
    .custom-alert-content { font-size: 14px; }
    .custom-alert-button { padding: 8px 16px; font-size: 14px; }
}


/* =================================================================
   暗黑模式：变量与通用覆盖
   ================================================================= */
:root {
  /* 供亮色和暗色同时调用的自定义属性 */
  --primary-color: #4CAF50;
  --primary-color-dark: #4CAF50;
  --chat-bg-color: #ffffff;
  --chat-bg-color-dark: #18181c;
  --color-border-default: #b4bbc4; /* <-- 新增此行 */
}

html.dark {
  color-scheme: dark;
  --color-fg-default: #c9d1d9;
  --color-canvas-default: #0d1117;
  --color-border-default: #30363d;
  --color-neutral-muted: rgba(110,118,129,.4);
}

/* 1. 全局背景与文字 */
html.dark body {
  background-color: #000000;
  color: #b4bbc4;
}

/* 2. 标题 */
html.dark h1,
html.dark h2 {
  color: #b4bbc4;
}



html.dark hr {
    background: #282c34;
}

/* 3. 输入容器 */
html.dark .input-container {
  background-color: transparent; /* 保持父级背景即可 */
  color: #b4bbc4;
}

/* 4. 结果容器 */
html.dark #result-container {
  background-color: var(--chat-bg-color-dark);
  border-color: #25272d;
  color: #b4bbc4;
}

/* 4.1 标题文本 */
html.dark #result-container h1,
html.dark #result-container h2,
html.dark #result-container h3,
html.dark #result-container h4,
html.dark #result-container h5,
html.dark #result-container h6 {
  color: #e3e3e3;
}

/* 4.2 加粗文本 */
html.dark strong,
html.dark b {
  color: #e3e3e3;
}

/* 5. 预格式/代码块 */
html.dark pre,
html.dark code {
  background-color: #282c34;
  color: #e3e3e3;
}

html.dark code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em;
}
html.dark code.hljs {
    padding: 3px 5px;
}
html.dark .hljs-punctuation,html.dark .hljs-tag {
    color: #cad1d8
}
html.dark .hljs {
    color: #abb2bf;
    background: #282c34;
}
html.dark .hljs-keyword,
html.dark .hljs-operator,
html.dark .hljs-pattern-match {
    color: #f92672;
}
html.dark .hljs-function,
html.dark .hljs-pattern-match .hljs-constructor {
    color: #61aeee;
}
html.dark .hljs-function .hljs-params {
    color: #a6e22e;
}
html.dark .hljs-function .hljs-params .hljs-typing {
    color: #fd971f;
}
html.dark .hljs-module-access .hljs-module {
    color: #7e57c2;
}
html.dark .hljs-constructor {
    color: #e2b93d;
}
html.dark .hljs-constructor .hljs-string {
    color: #9ccc65;
}
html.dark .hljs-comment,
html.dark .hljs-quote {
    color: #b18eb1;
    font-style: italic;
}
html.dark .hljs-doctag,
html.dark .hljs-formula {
    color: #c678dd;
}
html.dark .hljs-deletion,
html.dark .hljs-name,
html.dark .hljs-section,
html.dark .hljs-selector-tag,
html.dark .hljs-subst {
    color: #e06c75;
}
html.dark .hljs-literal {
    color: #56b6c2;
}
html.dark .hljs-addition,
html.dark .hljs-attribute,
html.dark .hljs-meta .hljs-string,
html.dark .hljs-regexp,
html.dark .hljs-string {
    color: #98c379;
}
html.dark .hljs-built_in,
html.dark .hljs-class .hljs-title,
html.dark .hljs-title.class_ {
    color: #e6c07b;
}
html.dark .hljs-attr,
html.dark .hljs-number,
html.dark .hljs-selector-attr,
html.dark .hljs-selector-class,
html.dark .hljs-selector-pseudo,
html.dark .hljs-template-variable,
html.dark .hljs-type,
html.dark .hljs-variable {
    color: #d19a66;
}
html.dark .hljs-bullet,
html.dark .hljs-link,
html.dark .hljs-meta,
html.dark .hljs-selector-id,
html.dark .hljs-symbol,
html.dark .hljs-title {
    color: #61aeee;
}
html.dark .hljs-emphasis {
    font-style: italic;
}
html.dark .hljs-strong {
    font-weight: 700;
}
html.dark .hljs-link {
    text-decoration: underline;
}

/* 6. 模型选择按钮 */
html.dark .model-option {
  background-color: #1e1e22;
  border-color: #35373c;
  color: #0a0a0a !important;
}
html.dark .model-option:hover {
  background-color: #33373c;
}
html.dark .model-option.selected {
  border-color: var(--primary-color-dark);
  color: var(--primary-color-dark);
  box-shadow: 0 0 6px var(--primary-color-dark);
}

/* 7. 下拉框 */
html.dark .model-select {
  background-color: #1e1e22;
  color: #d1d1d1;
  border-color: #35373c;
}

/* 8. 文本域 */
html.dark textarea {
  background-color: #1e1e22;
  color: #d1d1d1;
  border-color: #35373c;
}
html.dark textarea:focus {
  border-color: var(--primary-color-dark);
}

/* 9. 按钮组 */
html.dark .button-group button {
  background-color: var(--primary-color-dark);
}
html.dark .button-group button:hover:not(:disabled) {
  background-color: #86dfba;
}
html.dark .button-group button:disabled {
  background-color: #424245;
  color: #6e7681;
}

/* 清除按钮特殊色 */
html.dark .button-group .clear-button {
  background-color: #ff6b6b;
}


html.dark .button-group .clear-button:hover:not(:disabled) {
  background-color: #ff8f8f;
}

/* 10. 复制按钮 */
html.dark .copy-btn {
  background-color: var(--primary-color-dark);
}
html.dark .copy-btn:hover {
  background-color: #86dfba;
}

/* 11. 响应状态文本 */
html.dark #responseStatus {
  background: linear-gradient(to right, #63e2b7, #58a6ff, #d2a8ff, #ffa657);
  -webkit-background-clip: text;
  background-clip: text;
}

/* 12. 切换开关 */
html.dark .slider {
  background-color: #35373c;
}
html.dark .slider:before {
    background-color: #b4bbc4; /* 改白点颜色 */
}
html.dark input:checked + .slider {
  background-color: var(--primary-color-dark);
}
html.dark .switch-label {
  color: #b4bbc4;
}

/* 13. 侧边栏 */
html.dark .history-sidebar {
  background-color: #18181c;
  box-shadow: -2px 0 8px rgba(0,0,0,.6);
}
html.dark .sidebar-header {
  border-color: #30363d;
  color: #e3e3e3;
}

html.dark .history-item {
  border-color: #30363d;
  color: #c9d1d9;
}
html.dark .history-item:hover {
  background-color: #25272d;
}
html.dark .history-item .timestamp {
  color: #8b949e;
}
html.dark .delete-history-btn {
  background-color: #da3633;
}
html.dark .delete-history-btn:hover {
  background-color: #f85149;
}

/* 14. 加载遮罩 */
html.dark .loading-overlay {
  background-color: rgba(0,0,0,.75);
  color: #b4bbc4;
}
html.dark .loader {
  border-top-color: var(--primary-color-dark);
}

/* 15. 密码弹窗 */
html.dark .password-overlay {
  background-color: rgba(0,0,0,.8);
  color: #b4bbc4;
}
html.dark .password-box {
  background-color: #1e1e22;
  color: #b4bbc4;
}
html.dark .password-box h2 {
  color: #b4bbc4;
}
html.dark .password-input-group input[type="password"] {
  background-color: #25272d;
  color: #b4bbc4;
  border-color: #35373c;
}
html.dark .password-input-group button {
  background-color: var(--primary-color-dark);
  color: #b4bbc4;
  border-color: var(--primary-color-dark);
}
html.dark .error-message {
  color: #ff6b6b;
}

/* 16. 历史记录选择弹窗 */
html.dark .history-select-overlay {
  background-color: rgba(0,0,0,.8);
}
html.dark .history-select-box {
  background-color: #18181c;
  color: #e3e3e3;
  border-color: #35373c;
}
html.dark .history-select-item {
  border-color: #30363d;
}
html.dark .history-select-item:hover {
  background-color: #25272d;
}
html.dark #historySelectList::-webkit-scrollbar-thumb {
  background: #35373c;
}
html.dark #historySelectList::-webkit-scrollbar-track {
  background: #18181c;
}

/* 17. 自定义 Alert */
html.dark .custom-alert-overlay {
  background-color: rgba(0,0,0,.7);
}
html.dark .custom-alert {
  background-color: #18181c;
  box-shadow: 0 4px 12px rgba(0,0,0,.6);
}
html.dark .custom-alert-title {
  color: #e3e3e3;
}
html.dark .custom-alert-content {
  color: #c9d1d9;
}
html.dark .custom-alert-button {
  background-color: var(--primary-color-dark);
}
html.dark .custom-alert-button:hover {
  background-color: #86dfba;
}

/* 18. 滚动条（WebKit） */
html.dark ::-webkit-scrollbar {
  width: 8px;
}
html.dark ::-webkit-scrollbar-track {
  background: #18181c;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #424245;
  border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #6e7681;
}

/* 暗黑模式下所有箭头统一变浅 */
html.dark .mermaid svg .arrowheadPath,
html.dark .mermaid svg .marker path,
html.dark .mermaid svg marker path {
    fill: #e3e3e3 !important;
    stroke: #e3e3e3 !important;
}

/* 暗黑模式下的选择按钮样式 */
html.dark .number-select {
    background-color: #2d2d30;
    border-color: #424245;
    color: #b4bbc4;
}

html.dark .number-select:hover {
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

html.dark .number-select:disabled {
    background-color: #1e1e22;
    color: #666;
    border-color: #35373c;
}

html.dark .number-select:disabled:hover {
    border-color: #35373c;
    box-shadow: none;
}

/* 暗黑模式下的选择按钮样式 */
html.dark .choice-select {
    background-color: #2d2d30;
    border-color: #424245;
    color: #b4bbc4;
}

html.dark .choice-select:hover {
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

html.dark .choice-select:disabled {
    background-color: #1e1e22;
    color: #666;
    border-color: #35373c;
}

html.dark .choice-select:disabled:hover {
    border-color: #35373c;
    box-shadow: none;
}

html.dark .select-label {
    color: #b4bbc4;
}

html.dark .select-container.disabled .select-label {
    color: #666;
}

/* 仅防横向滚动，不碰其它布局 */
html,body{ width:100vw; overflow-x:hidden; }