/* ========== 全局变量 ========== */
:root {
  --bg-primary: #000000;           /* 纯黑背景 */
  --bg-secondary: #0a0a0a;         /* 次级背景 - 微灰黑 */
  --bg-card: #0d0d0d;             /* 卡片背景 - 深灰黑 */
  --bg-input: #080808;            /* 输入框背景 - 近黑 */
  
  --accent-blue: #2563eb;          /* 主蓝色 */
  --accent-blue-light: #3b82f6;    /* 亮蓝 */
  --accent-blue-dark: #1d4ed8;     /* 深蓝 */
  --accent-blue-glow: rgba(37, 99, 235, 0.3);  /* 蓝色光晕 */
  
  --accent-red: #dc2626;           /* 主红色 */
  --accent-red-light: #ef4444;     /* 亮红 */
  --accent-red-dark: #b91c1c;      /* 深红 */
  --accent-red-glow: rgba(220, 38, 38, 0.25);  /* 红色光晕 */
  
  --text-primary: #e2e8f0;         /* 主文字 */
  --text-secondary: #94a3b8;       /* 次级文字 */
  --text-muted: #64748b;           /* 弱化文字 */
  --text-red: #fca5a5;             /* 红色文字（点缀） */
  
  --border-blue: rgba(37, 99, 235, 0.2);
  --border-red: rgba(220, 38, 38, 0.3);
}

/* ========== 全局背景 ========== */
body, .app-container, .main-layout {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* ========== 侧边栏 ========== */
.sidebar, .nav-panel, .menu-container {
  background: var(--bg-secondary) !important;
  border-right: 1px solid var(--border-blue) !important;
}

/* 侧边栏选中项 - 红色点缀 */
.sidebar-item.active, .nav-item.selected, .menu-item:hover {
  background: linear-gradient(90deg, transparent 0%, var(--accent-red-glow) 100%) !important;
  border-left: 3px solid var(--accent-red) !important;
  color: var(--text-primary) !important;
}

/* 侧边栏图标 */
.sidebar-icon, .nav-icon {
  color: var(--accent-blue-light) !important;
}
.sidebar-item.active .sidebar-icon {
  color: var(--accent-red-light) !important;
  filter: drop-shadow(0 0 4px var(--accent-red-glow));
}

/* ========== 聊天区域 ========== */
.chat-container, .message-area, .conversation-view {
  background: var(--bg-primary) !important;
}

/* 用户消息 - 蓝色主题 */
.message.user, .message-outgoing, .user-bubble {
  background: linear-gradient(135deg, var(--accent-blue-dark) 0%, var(--accent-blue) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 12px var(--accent-blue-glow) !important;
}

/* AI 消息 - 纯黑卡片 */
.message.assistant, .message-incoming, .ai-bubble {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-blue) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5) !important;
}

/* 系统消息 / 提示 - 红色点缀 */
.message.system, .system-notice, .status-message {
  background: var(--bg-secondary) !important;
  color: var(--text-red) !important;
  border-left: 3px solid var(--accent-red) !important;
  font-family: monospace !important;
}

/* ========== 输入框 ========== */
.input-area, .chat-input, .prompt-box, textarea {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-blue) !important;
  border-radius: 8px !important;
}

.input-area:focus, .chat-input:focus, textarea:focus {
  border-color: var(--accent-blue-light) !important;
  box-shadow: 0 0 0 3px var(--accent-blue-glow) !important;
  outline: none !important;
}

/* 发送按钮 - 红色点缀 */
.send-button, .submit-btn, .action-button.primary {
  background: linear-gradient(135deg, var(--accent-red-dark) 0%, var(--accent-red) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px var(--accent-red-glow) !important;
  transition: all 0.2s ease !important;
}

.send-button:hover, .submit-btn:hover {
  background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-light) 100%) !important;
  box-shadow: 0 4px 16px var(--accent-red-glow) !important;
  transform: translateY(-1px) !important;
}

/* ========== 卡片 / 面板 ========== */
.card, .panel, .settings-box, .config-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-blue) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

/* 卡片标题 - 红色点缀 */
.card-title, .panel-header, .section-title {
  color: var(--text-primary) !important;
  border-bottom: 2px solid var(--accent-red) !important;
  padding-bottom: 8px !important;
}

/* ========== 按钮 ========== */
button, .btn, .action-button {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-blue) !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

button:hover, .btn:hover, .action-button:hover {
  background: var(--accent-blue-dark) !important;
  border-color: var(--accent-blue-light) !important;
  color: #ffffff !important;
}

/* 危险/删除按钮 - 红色 */
button.danger, .btn-delete, .action-button.danger {
  background: var(--accent-red-dark) !important;
  border-color: var(--accent-red) !important;
  color: #ffffff !important;
}

button.danger:hover {
  background: var(--accent-red) !important;
  box-shadow: 0 0 12px var(--accent-red-glow) !important;
}

/* ========== 开关 / 滑块 ========== */
.toggle-switch, .switch input:checked + .slider {
  background: var(--accent-blue) !important;
}

/* 启用状态 - 红色点缀 */
.toggle-switch.active, .switch.enabled .slider {
  background: var(--accent-red) !important;
  box-shadow: 0 0 8px var(--accent-red-glow) !important;
}

/* ========== 滚动条 ========== */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

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

::-webkit-scrollbar-thumb {
  background: var(--accent-blue-dark) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-blue) !important;
}

/* ========== 代码 / 日志样式 ========== */
code, pre, .code-block, .log-output {
  background: var(--bg-input) !important;
  color: var(--accent-blue-light) !important;
  border: 1px solid var(--border-blue) !important;
  border-radius: 6px !important;
  font-family: 'Courier New', monospace !important;
}

/* 日志中的错误/警告 - 红色点缀 */
code .error, .log-error, .status-error {
  color: var(--accent-red-light) !important;
  background: var(--accent-red-glow) !important;
  padding: 0 4px !important;
  border-radius: 3px !important;
}

/* ========== 标签 / 徽章 ========== */
.tag, .badge, .label {
  background: var(--accent-blue-dark) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--accent-blue) !important;
}

/* 重要标签 - 红色 */
.tag.important, .badge.alert, .label.danger {
  background: var(--accent-red-dark) !important;
  border-color: var(--accent-red) !important;
  color: #ffffff !important;
  box-shadow: 0 0 6px var(--accent-red-glow) !important;
}

/* ========== 输入框占位符 ========== */
::placeholder {
  color: var(--text-muted) !important;
}

/* ========== 链接 ========== */
a, .link, .clickable {
  color: var(--accent-blue-light) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a:hover, .link:hover {
  color: var(--accent-red-light) !important;
  text-shadow: 0 0 8px var(--accent-red-glow) !important;
}

/* ========== 分割线 ========== */
hr, .divider, .separator {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, var(--accent-blue) 50%, transparent 100%) !important;
}

/* ========== 加载 / 动画 ========== */
.loading-spinner, .spinner {
  border-color: var(--accent-blue-dark) !important;
  border-top-color: var(--accent-red) !important;
}

/* 脉冲动画 - 红色点缀 */
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-red-glow); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

.alert-pulse, .notification.urgent {
  animation: pulse-red 2s infinite !important;
}

/* ========== 世界书 / 配置面板特殊样式 ========== */
.lorebook-item, .world-entry, .config-row {
  background: var(--bg-card) !important;
  border-left: 3px solid var(--accent-blue) !important;
}

.lorebook-item.active, .world-entry.selected {
  border-left-color: var(--accent-red) !important;
  background: linear-gradient(90deg, var(--accent-red-glow) 0%, transparent 100%) !important;
}

/* 优先级数值 - 红色高亮 */
.priority-value, .priority-number {
  color: var(--accent-red-light) !important;
  font-weight: bold !important;
}

/* 触发词标签 - 蓝色 */
.trigger-word, .keyword-tag {
  background: var(--accent-blue-dark) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--accent-blue) !important;
}

/* ========== 响应式微调 ========== */
@media (max-width: 768px) {
  .sidebar {
    background: var(--bg-primary) !important;
    border-right: none !important;
    border-bottom: 2px solid var(--accent-red) !important;
  }
}