/**
 * 主题样式定义
 * 使用CSS变量定义不同主题的颜色
 */

:root {
    /* 浅色主题（默认）*/
    --bg-color: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-panel: #ffffff;
    --bg-input: #ffffff;
    --border-color: #e1e4e8;
    --border-secondary: #eaecef;
    --text-color: #24292e;
    --text-secondary: #586069;
    --text-placeholder: #a0a0a0;
    --primary-color: #0366d6;
    --primary-light: #58a6ff;
    --primary-dark: #044289;
    --success-color: #2ea44f;
    --warning-color: #e36209;
    --error-color: #d73a49;
    --code-bg: #f6f8fa;
    --panel-header: #f6f8fa;
    --hover-bg: #f6f8fa;
    --active-bg: #e1e4e8;
    --separator-color: #e1e4e8;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --tooltip-bg: #24292e;
    --tooltip-color: #ffffff;
    --button-bg: #fafbfc;
    --button-border: #e1e4e8;
    --button-hover: #f3f4f6;
    --button-active: #e1e4e8;
    
    /* 图表元素颜色 */
    --node-fill: #e1e1e1;
    --node-border: #999999;
    --node-text: #333333;
    --edge-color: #666666;
    
    /* 代码编辑器颜色 */
    --editor-bg: #f6f8fa;
    --editor-line-number: #999999;
    --editor-text: #24292e;
    --editor-keyword: #d73a49;
    --editor-comment: #6a737d;
    --editor-string: #032f62;
    --editor-number: #005cc5;
    
    /* 动画过渡 */
    --transition-time: 0.3s;
}

/* 暗黑主题 */
[data-theme="dark"] {
    --bg-color: #0d1117;
    --bg-secondary: #161b22;
    --bg-panel: #21262d;
    --bg-input: #0d1117;
    --border-color: #30363d;
    --border-secondary: #30363d;
    --text-color: #c9d1d9;
    --text-secondary: #8b949e;
    --text-placeholder: #6e7681;
    --primary-color: #58a6ff;
    --primary-light: #79c0ff;
    --primary-dark: #1f6feb;
    --success-color: #2ea043;
    --warning-color: #f0883e;
    --error-color: #f85149;
    --code-bg: #161b22;
    --panel-header: #21262d;
    --hover-bg: #30363d;
    --active-bg: #39414a;
    --separator-color: #30363d;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --tooltip-bg: #c9d1d9;
    --tooltip-color: #0d1117;
    --button-bg: #21262d;
    --button-border: #30363d;
    --button-hover: #30363d;
    --button-active: #39414a;
    
    /* 图表元素颜色 */
    --node-fill: #30363d;
    --node-border: #6e7681;
    --node-text: #c9d1d9;
    --edge-color: #8b949e;
    
    /* 代码编辑器颜色 */
    --editor-bg: #161b22;
    --editor-line-number: #6e7681;
    --editor-text: #c9d1d9;
    --editor-keyword: #ff7b72;
    --editor-comment: #8b949e;
    --editor-string: #a5d6ff;
    --editor-number: #79c0ff;
    
    /* 配置面板特定颜色 */
    --modal-overlay-bg: rgba(0, 0, 0, 0.7);
    --modal-content-bg: #21262d;
    --modal-header-bg: #30363d;
    --modal-list-bg: #161b22;
    --modal-item-bg: #21262d;
    --modal-item-hover-bg: #30363d;
    --modal-item-active-bg: #0d419d;
    --modal-item-active-border: #1f6feb;
    --modal-btn-bg: #21262d;
    --modal-btn-hover-bg: #30363d;
}

/* 主要样式应用 */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color var(--transition-time), color var(--transition-time);
}

/* 面板样式 */
.panel-header {
    background-color: var(--panel-header);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    transition: background-color var(--transition-time), color var(--transition-time), border-color var(--transition-time);
}

.panel-content {
    background-color: var(--bg-panel);
    color: var(--text-color);
    transition: background-color var(--transition-time), color var(--transition-time);
}

/* 按钮样式 */
.tool-btn, .btn {
    background-color: var(--button-bg);
    border: 1px solid var(--button-border);
    color: var(--text-color);
    transition: background-color var(--transition-time), color var(--transition-time), border-color var(--transition-time);
}

.tool-btn:hover, .btn:hover {
    background-color: var(--button-hover);
}

.tool-btn:active, .btn:active {
    background-color: var(--button-active);
}

.btn.primary {
    background-color: var(--primary-color);
    border-color: var(--primary-dark);
    color: #ffffff;
}

.btn.primary:hover {
    background-color: var(--primary-dark);
}

/* 输入框样式 */
input, textarea, select {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    transition: background-color var(--transition-time), color var(--transition-time), border-color var(--transition-time);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--primary-color);
}

/* 分隔线样式 */
.separator {
    background-color: var(--separator-color);
    transition: background-color var(--transition-time);
}

/* 侧边面板样式 */
.left-panel, .right-panel {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    transition: background-color var(--transition-time), border-color var(--transition-time);
}

/* 主题切换按钮图标 */
.theme-toggle-icon {
    transition: transform var(--transition-time);
}

[data-theme="dark"] .theme-toggle-icon {
    transform: rotate(180deg);
}

/* 导出面板 */
.export-side-panel {
    background-color: var(--bg-panel);
    border-left: 1px solid var(--border-color);
    color: var(--text-color);
    transition: background-color var(--transition-time), color var(--transition-time), border-color var(--transition-time);
}

/* 信息面板 */
.message-panel .panel-content {
    border: 1px solid var(--border-color);
}

/* 代码面板 */
.code-panel .panel-content {
    background-color: var(--editor-bg);
    color: var(--editor-text);
    transition: background-color var(--transition-time), color var(--transition-time);
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* 配置模态框暗黑主题样式 */
[data-theme="dark"] .model-config-panel,
[data-theme="dark"] .prompt-config-panel,
[data-theme="dark"] .chart-config-panel {
    background-color: var(--modal-overlay-bg);
}

[data-theme="dark"] .model-config-content,
[data-theme="dark"] .prompt-config-content,
[data-theme="dark"] .chart-config-content {
    background-color: var(--modal-content-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .model-config-header,
[data-theme="dark"] .prompt-config-header,
[data-theme="dark"] .chart-config-header {
    background-color: var(--modal-header-bg);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .model-config-header h3,
[data-theme="dark"] .prompt-config-header h3,
[data-theme="dark"] .chart-config-header h3 {
    color: var(--text-color);
}

[data-theme="dark"] .model-config-header .close-btn,
[data-theme="dark"] .prompt-config-header .close-btn,
[data-theme="dark"] .chart-config-header .close-btn {
    color: var(--text-secondary);
}

[data-theme="dark"] .model-config-header .close-btn:hover,
[data-theme="dark"] .prompt-config-header .close-btn:hover,
[data-theme="dark"] .chart-config-header .close-btn:hover {
    color: var(--text-color);
    background-color: var(--hover-bg);
}

[data-theme="dark"] .model-list,
[data-theme="dark"] .prompt-list,
[data-theme="dark"] .chart-list {
    background-color: var(--modal-list-bg);
    border-right: 1px solid var(--border-color);
}

[data-theme="dark"] .model-list-header,
[data-theme="dark"] .prompt-list-header,
[data-theme="dark"] .chart-list-header {
    background-color: var(--modal-header-bg);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .model-list-header h4,
[data-theme="dark"] .prompt-list-header h4,
[data-theme="dark"] .chart-list-header h4 {
    color: var(--text-color);
}

[data-theme="dark"] .add-model-btn,
[data-theme="dark"] .add-prompt-btn,
[data-theme="dark"] .add-chart-btn {
    background-color: var(--primary-color);
}

[data-theme="dark"] .add-model-btn:hover,
[data-theme="dark"] .add-prompt-btn:hover,
[data-theme="dark"] .add-chart-btn:hover {
    background-color: var(--primary-dark);
}

[data-theme="dark"] .model-item,
[data-theme="dark"] .prompt-item,
[data-theme="dark"] .chart-item {
    background-color: var(--modal-item-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    color: var(--text-color);
}

[data-theme="dark"] .model-item:hover,
[data-theme="dark"] .prompt-item:hover,
[data-theme="dark"] .chart-item:hover {
    background-color: var(--modal-item-hover-bg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .model-item.active,
[data-theme="dark"] .prompt-item.active,
[data-theme="dark"] .chart-item.active {
    border-color: var(--modal-item-active-border);
    background-color: var(--modal-item-active-bg);
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

[data-theme="dark"] .model-item-name,
[data-theme="dark"] .model-item-info,
[data-theme="dark"] .prompt-item-info,
[data-theme="dark"] .chart-item-info {
    color: var(--text-color);
}

[data-theme="dark"] .model-item-type {
    color: var(--text-secondary);
}

[data-theme="dark"] .model-item-actions button,
[data-theme="dark"] .prompt-item-actions button,
[data-theme="dark"] .chart-item-actions button {
    color: var(--text-secondary);
}

[data-theme="dark"] .model-item-actions button:hover,
[data-theme="dark"] .prompt-item-actions button:hover,
[data-theme="dark"] .chart-item-actions button:hover {
    color: var(--text-color);
    background-color: var(--hover-bg);
}

[data-theme="dark"] .model-edit,
[data-theme="dark"] .prompt-edit,
[data-theme="dark"] .chart-edit {
    background-color: var(--modal-content-bg);
}

[data-theme="dark"] .model-edit h4,
[data-theme="dark"] .prompt-edit h4,
[data-theme="dark"] .chart-edit h4 {
    color: var(--text-color);
}

[data-theme="dark"] .form-group label {
    color: var(--text-color);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
    border-color: var(--primary-color);
}

/* 导出图片侧边栏暗黑主题样式 */
[data-theme="dark"] .export-side-panel {
    background-color: var(--bg-panel);
    border-left: 1px solid var(--border-color);
}

[data-theme="dark"] .export-panel-header {
    background-color: var(--modal-header-bg);
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .export-panel-header h3 {
    color: var(--text-color);
}

[data-theme="dark"] .export-panel-header .close-btn {
    color: var(--text-secondary);
}

[data-theme="dark"] .export-panel-header .close-btn:hover {
    color: var(--text-color);
    background-color: var(--hover-bg);
}

[data-theme="dark"] .export-panel-body {
    background-color: var(--bg-panel);
}

[data-theme="dark"] .export-form-group label {
    color: var(--text-color);
}

[data-theme="dark"] .export-select,
[data-theme="dark"] .export-form-group input[type="number"] {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .export-form-group input[type="color"] {
    background-color: var(--bg-input);
    border-color: var(--border-color);
}

[data-theme="dark"] .preview-box {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* 会话区域暗黑主题样式 */
[data-theme="dark"] .message-panel {
    background-color: var(--bg-panel);
    border-color: var(--border-color);
}

[data-theme="dark"] .history {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .history.active {
    border-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 6px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .history-content {
    color: var(--text-color);
}

[data-theme="dark"] .history-metadata {
    color: var(--text-secondary);
}

[data-theme="dark"] .history-timestamp,
[data-theme="dark"] .history-type {
    color: var(--text-secondary);
}

[data-theme="dark"] .history-action-btn {
    color: var(--text-secondary);
    background-color: var(--button-bg);
}

[data-theme="dark"] .history-action-btn:hover {
    color: var(--text-color);
    background-color: var(--button-hover);
}

/* 对话框暗黑主题样式 */
[data-theme="dark"] .custom-dialog-overlay {
    background-color: var(--modal-overlay-bg);
}

[data-theme="dark"] .custom-dialog {
    background-color: var(--modal-content-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .custom-dialog-title {
    background-color: var(--modal-header-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .custom-dialog-close {
    color: var(--text-secondary);
}

[data-theme="dark"] .custom-dialog-close:hover {
    color: var(--text-color);
}

[data-theme="dark"] .custom-dialog-content {
    color: var(--text-color);
}

[data-theme="dark"] .custom-dialog-button {
    background-color: var(--button-bg);
    border-color: var(--button-border);
    color: var(--text-color);
}

[data-theme="dark"] .custom-dialog-button:hover {
    background-color: var(--button-hover);
}

[data-theme="dark"] .custom-dialog-button.confirm-button {
    background-color: var(--primary-color);
    border-color: var(--primary-dark);
}

[data-theme="dark"] .custom-dialog-button.confirm-button:hover {
    background-color: var(--primary-dark);
}

/* 通知消息暗黑主题样式 */
[data-theme="dark"] .custom-message {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .custom-message-title {
    color: var(--text-color);
}

[data-theme="dark"] .custom-message-content {
    color: var(--text-secondary);
}

[data-theme="dark"] .custom-message-close {
    color: var(--text-secondary);
}

[data-theme="dark"] .custom-message-close:hover {
    color: var(--text-color);
}

/* 代码输入框暗黑主题样式 */
[data-theme="dark"] .input-form {
    background-color: var(--bg-panel);
    border-color: var(--border-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .input-form:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    border-color: var(--border-secondary);
}

[data-theme="dark"] .input-form:focus-within {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    border-color: rgba(79, 138, 255, 0.4);
}

[data-theme="dark"] #txtInput {
    background-color: var(--bg-secondary);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] #txtInput:focus {
    background-color: var(--bg-input);
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

[data-theme="dark"] #txtInput::placeholder {
    color: var(--text-placeholder);
}

/* 工具栏暗黑主题样式 */
[data-theme="dark"] .toolbar {
    background-color: var(--bg-panel);
    border-top: 1px solid var(--border-color);
    backdrop-filter: blur(5px);
}

/* 工具栏内的选择器 */
[data-theme="dark"] .toolbar select {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-color);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c9d1d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="dark"] .toolbar select:hover {
    border-color: var(--border-secondary);
    background-color: var(--hover-bg);
}

[data-theme="dark"] .toolbar select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 138, 255, 0.25);
}

/* 工具栏内的按钮 */
[data-theme="dark"] .toolbar .btn,
[data-theme="dark"] .toolbar .tool-btn {
    background-color: var(--bg-secondary);
    color: var(--text-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .toolbar .btn:hover,
[data-theme="dark"] .toolbar .tool-btn:hover {
    background-color: var(--hover-bg);
    color: var(--text-color);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .toolbar .btn.primary {
    background-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .toolbar .btn.primary:hover {
    background-color: var(--primary-dark);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* 工具栏分隔符 */
[data-theme="dark"] .toolbar .separator {
    background-color: var(--border-color);
}

/* 自定义滚动条 */
[data-theme="dark"] #txtInput::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] #txtInput::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 6px;
}

[data-theme="dark"] #txtInput::-webkit-scrollbar-thumb {
    background: var(--border-secondary);
    border-radius: 6px;
}

[data-theme="dark"] #txtInput::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* 图片上传区域 */
[data-theme="dark"] .upload-group .tool-btn {
    background-color: var(--bg-secondary);
    color: var(--text-color);
}

[data-theme="dark"] .upload-group .tool-btn:hover {
    background-color: var(--hover-bg);
}

/* 拖放状态 */
[data-theme="dark"] #txtInput.dragover {
    background-color: var(--hover-bg);
    border: 2px dashed var(--primary-color);
}

/* 代码面板内容区域暗黑主题修复 */
[data-theme="dark"] #codePanel_Content,
[data-theme="dark"] #codePanel .panel-content {
    background-color: var(--editor-bg) !important;
    color: var(--editor-text) !important;
    border-color: var(--border-color);
}

[data-theme="dark"] #codePanel_Content pre,
[data-theme="dark"] #codePanel_Content code {
    background-color: var(--editor-bg);
    color: var(--editor-text);
}

/* 确保代码高亮在暗黑主题下正常显示 */
[data-theme="dark"] .hljs {
    background-color: var(--editor-bg);
    color: var(--editor-text);
}

[data-theme="dark"] .hljs-keyword {
    color: var(--editor-keyword);
}

[data-theme="dark"] .hljs-comment {
    color: var(--editor-comment);
}

[data-theme="dark"] .hljs-string {
    color: var(--editor-string);
}

[data-theme="dark"] .hljs-number {
    color: var(--editor-number);
}

/* 代码行号 */
[data-theme="dark"] .hljs-ln-numbers {
    color: var(--editor-line-number);
    border-right-color: var(--border-color);
}