:root {
  --bg-app: #050505;
  --bg-sidebar: #0a0a0a;
  --bg-nav: rgba(5, 8, 15, 0.5);
  /* 统一的深蓝色，50%透明度 */
  --bg-surface: #141414;
  --bg-input: #0E1014;
  --bg-secondary: #1e1e1e;
  --text-primary: #e6e6e6;
  --text-secondary: #999999;
  --text-muted: #666666;
  --border-color: #333333;
  --border-highlight: #555555;
  --accent-color: #409eff;
  --accent-hover: #66b1ff;
  --accent-glow: rgba(64, 158, 255, 0.2);
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --status-ready: #67c23a;
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.6);
  --radius-sm: 2px;
  --radius-md: 4px;
  --font-family: 'Inter', 'Segoe UI', 'Microsoft YaHei', sans-serif;
  --font-family-mono: 'Consolas', 'Monaco', monospace;
  --font-size-ui: 13px;
  --bottom-overlay-space: 72px;

  /* Missing Variables */
  --particle-color: rgba(64, 158, 255, 0.4);
  --bg-hover-transparent: rgba(255, 255, 255, 0.05);
  --bg-light: #f8f9fa;
  --agent-text-color: #e6e6e6;
  --agent-title-color: #999999;
  --accent-color-rgb: 64, 158, 255;
  --tab-nav-height: 60px;
}

[data-theme="light"] {
  --bg-app: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-nav: #000000;
  /* 统一的深蓝色，50%透明度 */
  --bg-surface: #ffffff;
  --bg-input: #ffffff;
  --bg-secondary: #f8f9fa;
  --text-primary: #1f1f1f;
  --text-secondary: #5f6368;
  --text-muted: #9aa0a6;
  --accent-color: #1a73e8;
  --accent-hover: #1557b0;
  --accent-glow: rgba(26, 115, 232, 0.15);
  --border-color: #e0e6ed;
  --border-highlight: #d1d9e6;
  --shadow-card: 0 2px 6px rgba(60, 64, 67, 0.05), 0 4px 16px rgba(60, 64, 67, 0.05);
  --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.1);
  --bg-hover-transparent: rgba(0, 0, 0, 0.05);
  --bg-light: #f8f9fa;
  --agent-text-color: #1f1f1f;
  --agent-title-color: #5f6368;
}

[data-theme="light"] body {
  background-color: #ffffff !important;
  background-image: none !important;
  background-size: auto !important;
}

[data-theme="personal"] {
  --bg-app: #0b0f19;
  --bg-sidebar: rgba(11, 15, 25, 0.8);
  --bg-nav: rgba(5, 8, 15, 0.5);
  /* 统一的深蓝色，50%透明度 */
  --bg-surface: rgba(20, 25, 40, 0.6);
  --bg-input: #161b27;
  --bg-secondary: #1e1e1e;
  --text-primary: #e6e6e6;
  --text-secondary: #999999;
  --text-muted: #666666;
  --border-color: rgba(64, 158, 255, 0.2);
  --border-highlight: #555555;
  --accent-color: #409eff;
  --accent-hover: #66b1ff;
  --accent-glow: rgba(64, 158, 255, 0.2);
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --status-ready: #67c23a;
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.6);
  --bg-hover-transparent: rgba(255, 255, 255, 0.05);
  --bg-light: #050a14;
  --agent-text-color: #e6e6e6;
  --agent-title-color: #999999;
}

[data-theme="personal"] body {
  background-image: radial-gradient(circle at 50% 30%, #1a1a1a 0%, #050505 70%);
  background-size: cover;
}

[data-theme="personal"] .modal-content,
[data-theme="personal"] .confirm-dialog-box,
[data-theme="personal"] .data-select-modal-content,
[data-theme="personal"] .custom-dialog,
[data-theme="personal"] .modal-dialog,
[data-theme="personal"] .popup-content {
  background-color: #0c1a2c !important;
  border: 1px solid #333;
}

[data-theme="personal"] input,
[data-theme="personal"] textarea,
[data-theme="personal"] select,
[data-theme="personal"] .editor-content,
[data-theme="personal"] [contenteditable="true"],
[data-theme="personal"] #note-editor-content,
[data-theme="personal"] .note-editor-content,
[data-theme="personal"] .rich-text-editor,
[data-theme="personal"] .quill-editor {
  background-color: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}

[data-theme="personal"] .color-picker-popup {
  background-color: #050a14 !important;
  border: 1px solid #333;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 14px;
  height: 100vh;
  overflow: hidden;
  background-image: radial-gradient(circle at 50% 30%, #1a1a1a 0%, #050505 70%);
  background-size: cover;
  transition: background-color 0.3s, color 0.3s;
}

/* 左侧旋转跳转链接 */
.gateway-link {
  position: fixed;
  left: 20px;
  top: 0px;
  transform: none;
  height: 60px;
  width: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  z-index: 10000;
  overflow: hidden;
  position: fixed;
  pointer-events: auto;
}

.gateway-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: slowSpin 20s linear infinite;
}

/* 移除伪元素条带与图片，避免干扰 */
.gateway-link::before,
.gateway-link::after {
  display: none !important;
}

.gateway-label {
  position: relative;
  z-index: 3;
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
}

@keyframes slowSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}


body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 240px;
  /* background-image: url('./images/gateway.png'); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: slowSpin 20s linear infinite;
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
  display: none;
  /* 隐藏空旷位置的图片 */
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-highlight);
  border-radius: 3px;
}

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

#app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tab-nav {
  display: flex;
  height: var(--tab-nav-height);
  background: linear-gradient(to bottom, rgba(6, 9, 14, 0.5) 0%, rgba(6, 9, 14, 0) 100%) !important;
  border-bottom: none !important;
  padding: 0 15px;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  z-index: 100;
  box-shadow: none !important;
}

.tab-link {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 0 20px;
  height: 36px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.tab-link:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05);
}

.tab-link.active {
  color: #fff;
  background-color: var(--accent-color);
  font-weight: bold;
  box-shadow: 0 2px 8px var(--accent-glow);
}

.tab-content-container {
  flex: 1;
  /* padding: 5px; */
  overflow: hidden;
  /* [修改] 禁止整体页面滚动，让各列独立滚动 */
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: calc(100dvh - var(--tab-nav-height));
  /* 减去顶部导航栏高度 */
  box-sizing: border-box;
}

/* 辅助工具页面的容器特殊处理 - 使用更兼容的方式 */
.tab-content-container.tools-active {
  padding: 0;
  overflow: hidden;
  height: calc(100dvh - var(--tab-nav-height));
  /* 确保占满除去导航栏后的所有高度 */
}

/* 当辅助工具页面激活时，确保高度正确 */
.tab-content-container.tools-active #tab-tools {
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  margin: 0;
}

/* 确保游戏和设置页面正常显示 */
.tab-content-container.games-active {
  padding: 15px;
  overflow-y: auto;
  padding-bottom: calc(15px + var(--bottom-overlay-space));
}

.tab-content-container.settings-active {
  padding: 15px;
  overflow-y: auto;
  padding-bottom: calc(15px + var(--bottom-overlay-space));
}

/* 确保tab-games和tab-settings正确显示 */
#tab-games.tab-content.active,
#tab-settings.tab-content.active {
  display: flex;
  flex-direction: column;
  visibility: visible;
  opacity: 1;
}

/* 当工具运行器视图显示时，移除所有padding以确保占满高度 */
#tab-tools.tools-active #tool-runner-view:not(.hidden) {
  padding: 0;
}

/* 工具仪表板视图时，保留padding */
#tab-tools.tools-active #tools-dashboard-view:not(.hidden) {
  padding: 15px;
}

.tab-content {
  display: none;
  height: 100%;
  flex-direction: column;
  min-height: 100%;
  /* [修改] 确保占满容器高度 */
  overflow-y: auto;
  /* [Modified] Allow vertical scrolling */
}

/* 确保初始加载时有active类的tab立即显示，避免闪烁 */
.tab-content.active {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 避免页面刷新时的闪烁，为初始状态添加平滑过渡 */
body:not(.loaded) .tab-content.active {
  animation: none;
}

body.loaded .tab-content.active {
  animation: fadeIn 0.2s ease-out;
}

/* 设置页面特殊处理：禁止整体滚动，让内部面板独立滚动 */
#tab-settings {
  overflow: hidden;
  height: 100%;
  min-height: 0;
}

/* 辅助工具页面特殊处理：确保工具运行器能够占满高度 */
#tab-tools.tab-content {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  display: none;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  padding: 15px;
}

/* 当tab-tools激活时显示 */
#tab-tools.tab-content.active {
  display: flex;
}

/* 确保tab-games和tab-settings有正确的默认样式 */
#tab-games.tab-content,
#tab-settings.tab-content {
  display: none;
  flex-direction: column;
}

#tab-games.tab-content.active,
#tab-settings.tab-content.active {
  display: flex !important;
}

/* 当工具运行器显示时，移除padding以占满高度 */
#tab-tools:has(.tool-runner-container:not(.hidden)) {
  padding: 0 !important;
}

#tab-tools .tool-runner-container:not(.hidden) {
  margin: 0 !important;
  flex: 1 1 100% !important;
  height: 100% !important;
}

/* 当工具运行器显示时，确保容器占满高度 */
#tab-tools .tool-runner-container {
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: calc(100vh - 60px) !important;
  /* 最大高度不超过视口减去顶部导航栏 */
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* 确保工具运行器主体能够填充剩余空间 */
#tab-tools .tool-runner-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: calc(100% - 50px) !important;
  /* 减去header的50px高度 */
  max-height: calc(100vh - 60px - 50px) !important;
  /* 最大高度不超过视口减去顶部导航栏和header */
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* 确保iframe能够占满容器高度 */
#tab-tools #tool-runner-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  display: block !important;
  border: none !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

/* 确保工具运行器视图能够占满高度 */
#tab-tools #tool-runner-view {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* 当工具运行器视图显示时，隐藏工具仪表板 */
#tab-tools #tool-runner-view:not(.hidden)~#tools-dashboard-view,
#tab-tools #tools-dashboard-view:has(~ #tool-runner-view:not(.hidden)) {
  display: none !important;
}

/* 确保工具运行器视图在隐藏时不影响布局 */
#tab-tools #tool-runner-view.hidden {
  display: none !important;
}

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

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

input[type="text"],
input[type="number"],
input[type="password"],
textarea,
select {
  background-color: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid transparent;
  border-bottom: 2px solid var(--border-color);
  padding: 8px 12px;
  border-radius: 4px 4px 0 0;
  font-family: inherit;
  font-size: 14px;
  width: auto;
  min-width: 150px;
  max-width: 100%;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-right: 5px;
  text-align: center;
  /* 下拉框文字居中 */
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  background-color: var(--bg-surface);
  border-bottom-color: var(--accent-color);
  box-shadow: 0 4px 8px -4px var(--accent-glow);
}

textarea {
  resize: none;
  width: 100%;
}

button,
.button-like-label {
  background-color: var(--accent-color);
  color: #fff;
  border: 1px solid var(--accent-color);
  padding: 0 24px !important;
  height: 34px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin-right: 0 !important;
}

/* 弹框中的保存按钮使用绿色 */
.modal-dialog .primary-button,
#modal-user-personalization .primary-button,
#modal-my-settings .primary-button,
.modal-dialog button[id*="save"],
#modal-user-personalization button[id*="save"],
#modal-my-settings button[id*="save"] {
  background-color: #67c23a !important;
  color: #fff !important;
  border: 1px solid #67c23a !important;
  transition: all 0.2s ease;
}

.modal-dialog .primary-button:hover,
#modal-user-personalization .primary-button:hover,
#modal-my-settings .primary-button:hover,
.modal-dialog button[id*="save"]:hover,
#modal-user-personalization button[id*="save"]:hover,
#modal-my-settings button[id*="save"]:hover {
  background-color: #85ce61 !important;
  border-color: #85ce61 !important;
  box-shadow: 0 0 12px rgba(103, 194, 58, 0.5) !important;
  filter: brightness(1.05);
  transform: translateY(-1px);
}

button:hover,
.button-like-label:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 12px var(--accent-glow);
  transform: translateY(-1px);
}

button:active {
  transform: scale(0.96);
}

button:disabled {
  background-color: var(--bg-input);
  border-color: var(--border-color);
  color: var(--text-muted);
  filter: none;
  box-shadow: none;
  transform: none;
}

.secondary-button {
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.secondary-button:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.new-chat-button {
  background-color: transparent !important;
  border: 3px solid var(--warning-color, #e6a23c) !important;
  color: var(--warning-color, #e6a23c) !important;
  transition: all 0.3s ease;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.new-chat-button:disabled,
.new-chat-button.disabled {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
  opacity: 0.75;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.new-chat-button:disabled:hover,
.new-chat-button.disabled:hover {
  background-color: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
  opacity: 0.75;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.new-chat-button:hover {
  background-color: rgba(230, 162, 60, 0.14) !important;
  border-color: #f0b45e !important;
  color: #f0b45e !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.new-chat-button:active {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

.new-chat-button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 弹框中的重置按钮使用蓝色 */
.modal-dialog button[id*="reset"],
#modal-user-personalization button[id*="reset"],
#modal-my-settings button[id*="reset"] {
  background-color: transparent;
  border: 1px solid #409eff;
  color: #409eff;
}

.modal-dialog button[id*="reset"]:hover,
#modal-user-personalization button[id*="reset"]:hover,
#modal-my-settings button[id*="reset"]:hover {
  background-color: rgba(64, 158, 255, 0.1);
  border-color: #409eff;
  color: #409eff;
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.3);
}

/* 取消按钮保持原样（不应用蓝色） */
.modal-dialog button[id*="cancel"],
#modal-user-personalization button[id*="cancel"],
#modal-my-settings button[id*="cancel"] {
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.modal-dialog button[id*="cancel"]:hover,
#modal-user-personalization button[id*="cancel"]:hover,
#modal-my-settings button[id*="cancel"]:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--text-primary);
  color: var(--text-primary);
}

.danger-button {
  background-color: transparent;
  border: 1px solid var(--danger-color);
  color: var(--danger-color);
}

.danger-button:hover {
  background-color: var(--danger-color);
  color: #fff;
  box-shadow: 0 0 8px rgba(245, 108, 108, 0.4);
}

.lib-action-btn {
  box-shadow: none !important;
  text-shadow: none !important;
  background-color: transparent !important;
  border-width: 1px !important;
  border-style: solid !important;
  opacity: 0.9;
}

.lib-action-btn:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.05) !important;
  transform: translateY(-1px);
}

.lib-action-btn.green {
  border-color: #67c23a !important;
  color: #67c23a !important;
}

.lib-action-btn.blue {
  border-color: #409eff !important;
  color: #409eff !important;
}

.lib-action-btn.orange {
  border-color: #e6a23c !important;
  color: #e6a23c !important;
}

.lib-action-btn.red {
  border-color: #f56c6c !important;
  color: #f56c6c !important;
}

.file-upload-input {
  display: none;
}

.library-controls .file-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffb300, #ff8f00);
  color: #1a1a1a;
  border: 1px solid rgba(255, 168, 0, 0.7);
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  user-select: none;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

.library-controls .file-upload-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
}

.library-controls .file-upload-btn:active {
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

.section-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
}

.hidden {
  display: none !important;
}

.tree-view {
  overflow-y: auto;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  flex-grow: 1;
  border-radius: var(--radius-md);
}

.tree-view ul {
  list-style: none;
  padding-left: 20px;
  margin: 0;
}

.tree-view>ul {
  padding-left: 0;
}

.tree-view li {
  padding: 3px 0;
  user-select: none;
}

.tree-item-label {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 2px;
  color: var(--text-primary);
  line-height: 1.5;
}

.tree-item-label:hover {
  background-color: var(--bg-input);
}

.tree-item.selected>.tree-item-label {
  background-color: var(--accent-color);
  color: white;
}

.tree-item.collapsed>ul {
  display: none;
}

.tree-item.collapsed>.tree-item-label::before {
  content: "\1f4c1";
  display: inline-block;
  width: 24px;
  margin-right: 2px;
}

.tree-item:not(.collapsed)>.tree-item-label::before {
  content: "\1f4c2";
  display: inline-block;
  width: 24px;
  margin-right: 2px;
}

#projects-tree-select .tree-item-label[data-node-type="conversation"]::before {
  content: none !important;
  display: none !important;
}

#projects-tree-select .tree-item-label[data-node-type="conversation"] {
  display: flex;
  align-items: center;
}

#projects-tree-select .project-conversation-bubble-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  vertical-align: middle;
}

#projects-tree-select .project-conversation-icon {
  width: 14px;
  height: 14px;
  display: block;
  object-fit: contain;
}

.tree-item[data-type="note"]>.tree-item-label::before {
  content: "\1f4dd" !important;
  width: 22px;
  margin-right: 4px;
}

.tree-controls,
.keyword-header-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 15px;
  margin-bottom: 10px;
}

/* =========================================
   [新增] 方形图标按钮样式 (Recent Instructions)
   ========================================= */
.icon-square-btn {
  width: 26px;
  height: 26px;
  padding: 0 !important;
  /* Override button padding */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  min-width: unset !important;
  /* Override potential min-width */
  margin-left: 4px;
}

.icon-square-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border-color: var(--text-primary);
}

.icon-square-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Emoji图标样式 - 确保emoji正确显示 */
.icon-square-btn {
  font-size: 14px;
  line-height: 1;
}

/* SVG图标悬停动画 - 适用于所有图标 */
.icon-hover-animate {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.icon-hover-animate:hover {
  transform: scale(1.15) rotate(5deg);
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(64, 158, 255, 0.6));
}

/* 按钮内的图标悬停动画 */
button:hover .icon-hover-animate,
.icon-square-btn:hover .icon-hover-animate {
  transform: scale(1.15) rotate(5deg);
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(64, 158, 255, 0.6));
}

/* 危险按钮内的图标悬停动画 */
.danger-button:hover .icon-hover-animate {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(245, 108, 108, 0.6));
}

/* 火箭图标已有专门的动画，不应用通用动画 */
.rocket-icon {
  transition: transform 0.3s ease;
}

.rocket-icon:hover {
  animation: rocket-fly 1.5s ease-in-out infinite;
}

/* 危险按钮变体 */
.icon-square-btn.danger-button {
  color: var(--danger-color);
  border-color: var(--danger-color);
}

.icon-square-btn.danger-button:hover {
  background: rgba(245, 108, 108, 0.1) !important;
  color: var(--danger-color) !important;
  box-shadow: none !important;
}

/* 删除模式图标颜色 - 根据主题模式设置 */
/* 深色模式和薛某风格：白色图标 */
[data-theme="dark"] .delete-mode-icon,
[data-theme="personal"] .delete-mode-icon {
  filter: brightness(0) invert(1);
}

/* 浅色模式：黑色图标 */
[data-theme="light"] .delete-mode-icon {
  filter: brightness(0);
}

/* 深色和个性化模式下，悬停时图标也保持白色 */
[data-theme="dark"] .delete-mode-icon:hover,
[data-theme="dark"] button:hover .delete-mode-icon,
[data-theme="dark"] .icon-square-btn:hover .delete-mode-icon,
[data-theme="personal"] .delete-mode-icon:hover,
[data-theme="personal"] button:hover .delete-mode-icon,
[data-theme="personal"] .icon-square-btn:hover .delete-mode-icon {
  filter: brightness(0) invert(1) !important;
}

/* 删除模式按钮悬停时显示边框颜色 - 根据主题模式 */
/* 深色模式和薛某风格：蓝色边框 */
[data-theme="dark"] #btn-select-all:hover,
[data-theme="dark"] #btn-deselect-all:hover,
[data-theme="personal"] #btn-select-all:hover,
[data-theme="personal"] #btn-deselect-all:hover {
  border-color: #409eff !important;
  border-width: 1px;
}

/* 浅色模式：黑色边框 */
[data-theme="light"] #btn-select-all:hover,
[data-theme="light"] #btn-deselect-all:hover {
  border-color: #000000 !important;
  border-width: 1px;
}

/* 右侧小点已移除 */

.tree-control-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: space-between;
}

/* [新增] 关键词区标题行样式统一 */
#keyword-section>div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 2px 5px 2px;
  /* 与tree-controls保持一致 */
  flex-shrink: 0;
}

.dropdown-container {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 5px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding: 10px;
  /* [修改] 增加内边距 */
  z-index: 1000;
  min-width: 140px;
  /* [修改] 稍微加宽 */
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* [修改] 按钮之间的间距 */
}

.dropdown-menu button {
  width: 100%;
  text-align: center !important;
  /* [修改] 文字居中 */
  justify-content: center !important;
  /* [修改] Flex 居中 */
  margin: 0 !important;
  border: 1px solid transparent !important;
  /* [修改] 增加透明边框防止跳动 */
  background: transparent;
  padding: 8px 0 !important;
  /* [修改] 增加按钮高度 */
}

.dropdown-menu button:hover {
  background-color: var(--bg-input) !important;
  color: var(--text-primary);
}

.agent-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* [修改] 靠左对齐，配合 margin-left: auto 实现 API 模块靠右 */
  gap: 5px;
  /* [修改] 每个元素的间距只有5像素 */
  flex-wrap: nowrap;
  /* [修改] 不允许换行，确保 API 模块在最右侧且在同一行 */
  overflow-x: auto;
  /* [新增] 溢出时允许横向滚动 */
  background-color: var(--bg-surface);
  border-left: 3px solid var(--border-color) !important;
  /* [修改] 左边3像素宽线条 */
  border-right: 3px solid var(--border-color) !important;
  /* [修改] 右边3像素宽线条 */
  border-top: none !important;
  border-bottom: none !important;
  padding: 10px 12px !important;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--radius-md);
  min-height: 60px;
  height: auto;
}

/* 智能体名字显示框（可点击展开左侧智能体列表） */
.current-agent-name-display {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  min-height: 38px;
  padding: 10px 15px;
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
}

.current-agent-name-display:hover {
  border-color: var(--accent-color);
  background-color: var(--bg-input);
}

.current-agent-name-display #agent-name-text {
  flex: 1;
  overflow: visible;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  padding: 0;
  margin: 0;
  line-height: 1.5;
}

.current-agent-name-display .agent-name-arrow {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 12px;
  transition: transform 0.2s ease;
}

.current-agent-name-display:hover .agent-name-arrow {
  color: var(--accent-color);
  transform: translateY(2px);
}

/* [新增] API快速控制区域 */
.api-quick-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid var(--border-color);
  position: relative;
}

.api-platform-name {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.api-platform-name:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.api-platform-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 160px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2000;
}

.api-platform-item {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 13px;
  user-select: none;
}

.api-platform-item:hover {
  background-color: var(--bg-input);
}

/* [新增] 页面独立的 API 快速控制样式 */
.page-api-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 5px;
  background: transparent;
  flex-shrink: 0;
  border: none !important;
  margin-left: auto;
}

/* [新增] 智能体操作按钮图标样式 */
.icon-agent-btn {
  width: 7px !important;
  height: 7px !important;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: all 0.2s ease;
}

.icon-add {
  -webkit-mask-image: url("../icons/add.svg");
  mask-image: url("../icons/add.svg");
}

.icon-edit {
  -webkit-mask-image: url("../icons/edit.svg");
  mask-image: url("../icons/edit.svg");
}

.icon-settings {
  -webkit-mask-image: url("../icons/settings.svg");
  mask-image: url("../icons/settings.svg");
}

.api-status-lamp-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.page-api-controls .quick-selector {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #fff;
  padding: 4px 8px;
  font-size: 13px;
  min-width: 120px;
}

.page-api-controls .btn-small {
  padding: 4px 12px;
  font-size: 13px;
  height: 28px;
}

/* [新增] API状态指示灯 */
.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #666;
  /* 默认灰色 */
  border: 2px solid #888;
  transition: all 0.3s;
  cursor: pointer;
}

.status-indicator.success {
  background-color: #67c23a;
  /* 绿色 */
  border-color: #85ce61;
  box-shadow: 0 0 8px rgba(103, 194, 58, 0.6);
}

.status-indicator.error {
  background-color: #ff4d4f;
  /* 红色 */
  border-color: #ff7875;
  box-shadow: 0 0 8px rgba(255, 77, 79, 0.6);
}

.status-indicator.idle {
  background-color: #909399;
  /* 灰色 */
  border-color: #c0c4cc;
}

.status-indicator.has-data {
  background-color: #e6a23c;
  /* 黄色 - 有模型数据 */
  border-color: #ebb563;
  box-shadow: 0 0 8px rgba(230, 162, 60, 0.6);
}

/* [新增] 离线模式状态 - 橙色 */
.status-indicator.offline {
  background-color: #e6a23c;
  /* 橙色 - 离线模式 */
  border-color: #f0b85c;
  box-shadow: 0 0 8px rgba(230, 162, 60, 0.8);
  animation: offlinePulse 2s ease-in-out infinite;
}

@keyframes offlinePulse {

  0%,
  100% {
    box-shadow: 0 0 8px rgba(230, 162, 60, 0.8);
  }

  50% {
    box-shadow: 0 0 12px rgba(230, 162, 60, 1);
  }
}

/* [新增] 刷新按钮已合并到小灯，隐藏刷新按钮 */
#btn-refresh-model-data {
  display: none !important;
}

/* 启用真实 API 切换样式 */
.real-api-toggle-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background-color: transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.real-api-toggle-wrapper.enabled {
  background-color: #67c23a !important;
  border-color: #67c23a !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(103, 194, 58, 0.35) !important;
}

#toggle-switch-visual {
  width: 44px;
  height: 22px;
  border-radius: 11px;
  border: 1px solid var(--border-color);
  background-color: transparent;
  position: relative;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

#toggle-switch-visual::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease;
}

#toggle-switch-visual.enabled {
  background-color: #67c23a !important;
  border-color: #67c23a !important;
}

#toggle-switch-visual.enabled::after {
  transform: translateX(22px);
}

/* 隐藏原生真实API复选框，仅用自定义开关 */
#toggle-real-api {
  display: none !important;
}

/* [新增] 快速模型选择器 */
.quick-selector {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  min-width: 150px;
  cursor: pointer;
  text-align: center;
  /* 下拉框文字居中 */
}

.quick-selector:focus {
  outline: none;
  border-color: var(--accent-color);
}

/* [新增] 下拉菜单选中项使用主题色 */
.quick-selector option:checked {
  background: var(--accent-color) !important;
  color: white !important;
}

/* [新增] 下拉菜单选项悬停和选中状态 */
.quick-selector option:hover {
  background: var(--accent-color) !important;
  color: white !important;
}

#quick-image-size-selector {
  display: none !important;
}


.pane-resizer {
  flex: 0 0 8px;
  background-color: transparent;
  cursor: col-resize;
  position: relative;
  z-index: 1;
  /* 低于输入框，避免遮挡 */
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

body.agent-welcome-mode #tab-agent .pane-resizer {
  display: none !important;
}

body.agent-welcome-mode #tab-agent #keyword-section,
body.agent-welcome-mode #tab-agent .notes-selection-pane {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body:not(.agent-welcome-mode) #tab-agent .pane-resizer {
  display: flex !important;
}

#btn-clear-input.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.pane-resizer::after {
  content: '';
  width: 3px;
  height: 40px;
  background-color: var(--border-color);
  transition: background-color 0.2s;
  pointer-events: none;
}

.pane-resizer:hover::after,
.pane-resizer.resizing::after {
  background-color: var(--accent-color);
  height: 100%;
  width: 4px;
}

.pane-resizer.resizing {
  cursor: col-resize;
  background-color: rgba(64, 158, 255, 0.1);
}

/* 已保存模型标签及删除按钮 */
.model-tag {
  position: relative;
}

.model-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-left: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.model-tag:hover .model-delete-btn {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.1);
}

.model-delete-btn:hover {
  background: #fff;
  transform: scale(1.06);
}

/* 底部保存按钮更亮的蓝色背景 */
#btn-save-api-config {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
}

#btn-save-api-config:hover {
  background-color: #2563eb !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.45);
}

.chat-display {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px 20px;
  /* [修改] 底部内边距 = 输入框高度(约85px) + 5px = 90px */
  padding-bottom: 90px;
  /* background-color: var(--bg-app); */
}

/* [新增] 购物商品卡片样式 */
.shopping-products-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.shopping-product-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.shopping-product-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.product-image-wrapper {
  width: 100%;
  min-height: 200px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.product-main-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.shopping-product-card:hover .product-image {
  transform: scale(1.05);
}

.product-thumbnails {
  display: flex;
  gap: 8px;
  padding: 8px;
  justify-content: center;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.1);
}

.product-thumbnail {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.product-thumbnail:hover {
  border-color: var(--accent-color);
  transform: scale(1.1);
}

.product-info {
  padding: 15px;
}

.product-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 10px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-color);
  margin: 10px 0;
}

.product-platform {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 8px 0;
}

.product-action-area {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-link {
  display: inline-block;
  padding: 8px 16px;
  background: var(--accent-color);
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s ease;
  text-align: center;
  align-self: flex-start;
}

.product-link:hover {
  background: var(--accent-color);
  opacity: 0.9;
  transform: translateX(2px);
}

.product-disclaimer {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
  padding: 6px 0;
  font-style: italic;
}

.shopping-notice {
  grid-column: 1 / -1;
  padding: 15px;
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 8px;
  color: #ffc107;
  text-align: center;
  margin-bottom: 10px;
}

.shopping-error {
  padding: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

/* [新增] 生成图片样式 */
.generated-image-container {
  margin: 10px 0;
  text-align: center;
}

.generated-image {
  max-width: 100%;
  max-height: 600px;
  border-radius: 8px;
  cursor: zoom-in;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

.generated-image:hover {
  transform: scale(1.02);
}

.image-prompt {
  margin-top: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  text-align: left;
}

.image-generation-error {
  padding: 20px;
  text-align: center;
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.1);
  border: 1px solid rgba(245, 108, 108, 0.3);
  border-radius: 8px;
}

.chat-empty-state {
  height: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #f7f7f7;
  gap: 10px;
  letter-spacing: 0.3px;
}

/* [新增] 欢迎界面样式（图1） */
.chat-welcome-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  text-align: center;
  position: relative;
  width: 100%;
}

.chat-welcome-title {
  font-size: 48px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
  z-index: 1;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  white-space: nowrap;
}

[data-theme="light"] .chat-welcome-title {
  /* color: var(--text-primary) !important; */
  color: #343434 !important;
}

/* [新增] 灵感建议区域容器样式 - 与输入框一起居中，完全透明显示背景 */
.inspiration-container,
.inspiration-container *,
.inspiration-header,
.inspiration-header *,
.inspiration-suggestions,
.inspiration-suggestions *,
.inspiration-item,
.inspiration-item * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.inspiration-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  transform: none;
  padding: 0 0 0 124px;
  /* 左侧留出按钮组的宽度，使文字对齐 */
  overflow: visible;
  /* 改为 visible，允许背景层扩展 */
  gap: 8px;
  pointer-events: auto;
  /* 允许容器拦截点击事件，防止点击空白区域关闭 */
  z-index: 101;
  /* 在 input-area (z-index: 100) 之上，但低于弹框(9999+) */
}

#tab-agent .input-area:not(.welcome-mode) .inspiration-container {
  top: auto;
  bottom: calc(100% + 10px);
}

/* 添加透明背景层，覆盖整个区域，阻止点击穿透，但无背景色和边框 */
.inspiration-container::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -124px;
  right: 0;
  bottom: -10px;
  background: transparent;
  /* 完全透明，无背景色 */
  pointer-events: auto;
  /* 拦截点击事件，防止点击空白区域关闭模块 */
  z-index: -1;
  /* 在内容下方 */
}

.inspiration-container>* {
  pointer-events: auto;
  position: relative;
  z-index: 1;
  /* 确保内容在背景层上方，可以正常点击 */
  /* 注意：父容器 .inspiration-container 已有 z-index: 101 */
}

.inspiration-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: #ffffff;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeInDown 0.3s ease-out forwards;
  width: 100%;
}

[data-theme="light"] .inspiration-header {
  color: var(--text-primary) !important;
}

.inspiration-header>span:first-child {
  flex: 0 0 auto;
}

.inspiration-header .inspiration-more-link {
  flex: 0 0 auto;
  margin-left: auto;
}

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

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

/* [新增] 关闭动画 - 向上淡出 */
@keyframes fadeOutUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* [新增] 灵感模块关闭时的动画 */
.inspiration-container.inspiration-closing {
  animation: fadeOutUp 0.3s ease-out forwards;
}

.inspiration-container.inspiration-closing .inspiration-header,
.inspiration-container.inspiration-closing .inspiration-item {
  animation: fadeOutUp 0.3s ease-out forwards;
}

.inspiration-more-link {
  color: #409eff;
  text-decoration: none;
  font-size: 12px;
  transition: opacity 0.3s, color 0.3s;
  cursor: pointer;
  white-space: nowrap;
}

.inspiration-more-link:hover {
  opacity: 0.8;
  color: #66b1ff;
}

.inspiration-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: flex-start;
}

.inspiration-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  /* Pill shape */
  cursor: pointer;
  transition: all 0.3s;
  color: #ffffff;
  opacity: 0;
  transform: translateY(-20px);
  animation: slideDownIn 0.4s ease-out forwards;

  /* Dark Blue Style */
  background-color: rgba(20, 30, 50, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(5px);
}

[data-theme="light"] .inspiration-item {
  color: var(--text-primary) !important;
  background-color: #ffffff !important;
  border-color: var(--border-color) !important;
}

.inspiration-item:hover {
  background-color: rgba(64, 158, 255, 0.2) !important;
  border-color: var(--accent-color) !important;
}

[data-theme="light"] .inspiration-item:hover {
  background-color: rgba(0, 0, 0, 0.03) !important;
  border-color: #000000 !important;
}

/* Personality Popups Dark Blue */
.modal-dialog,
.user-personalization-content,
.p13n-menu,
.p13n-content,
.modal-content,
.p13n-pane {
  background-color: #050a14 !important;
  /* Deep Dark Blue */
  color: #e6e6e6 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.p13n-menu-item {
  color: #999 !important;
}

.p13n-menu-item.active {
  background-color: rgba(64, 158, 255, 0.15) !important;
  color: #fff !important;
}

/* Ensure inputs in popups are also dark */
.modal-dialog input,
.modal-dialog textarea,
.modal-dialog select {
  background-color: #050a14 !important;
  /* 使用用户输入框的底色 */
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.p13n-pane input,
.p13n-pane textarea,
.p13n-pane select {
  background-color: #050a14 !important;
  /* 个性化弹框输入框使用用户输入框的底色 */
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.inspiration-item:nth-child(1) {
  animation-delay: 0.1s;
}

.inspiration-item:nth-child(2) {
  animation-delay: 0.2s;
}

.inspiration-item:nth-child(3) {
  animation-delay: 0.3s;
}

.inspiration-item:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes slideDownIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

.inspiration-item:hover {
  border-color: var(--accent-color) !important;
  transform: translateX(3px) !important;
}

/* 强制覆盖任何可能的背景样式，包括来自父容器的 */
.input-area .inspiration-container,
.input-area.section-box .inspiration-container,
.section-box .inspiration-container,
.input-area .inspiration-container *,
.input-area.section-box .inspiration-container *,
.section-box .inspiration-container *,
.input-area .inspiration-item,
.welcome-mode .inspiration-container,
.welcome-mode.section-box .inspiration-container,
.welcome-mode .inspiration-container *,
.welcome-mode.section-box .inspiration-container *,
.welcome-mode .inspiration-item {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.inspiration-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.inspiration-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
}

.chat-empty-icon {
  font-size: 28px;
  opacity: 0.85;
}

.chat-empty-text {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
}

.chat-message {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  width: 100% !important;
  /* 强制全宽，与输入框对齐 */
  max-width: 100% !important;
  box-sizing: border-box;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  flex-shrink: 0;
  color: var(--text-secondary);
  overflow: visible;
}

/* [新增] SVG图标样式 */
.chat-avatar svg {
  width: 24px;
  height: 24px;
  color: var(--text-secondary);
}

/* [新增] 头像图标样式 */
.chat-avatar-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* [修改] 用户头像清除所有样式，显示原始 SVG 颜色 */
.user-avatar-icon {
  filter: none !important;
}

.chat-message.user .chat-avatar-icon {
  filter: none !important;
}

/* [新增] AI头像固定蓝色 */
.ai-avatar-icon {
  filter: none !important;
}

/* [新增] 呼吸动画 - AI回复时 */
@keyframes breathing {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.14);
    opacity: 1;
  }
}

.chat-avatar.breathing-animation {
  animation: none;
}

.chat-avatar.breathing-animation .chat-avatar-icon,
.chat-avatar.breathing-animation>svg {
  animation: breathing 1.6s ease-in-out infinite;
  transform-origin: center;
}

.chat-content-wrapper {
  flex: 1;
  /* 占满剩余空间，确保宽度一致 */
  min-width: 0;
  /* 允许内部文本换行 */
  display: flow-root;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  box-sizing: border-box;
}

/* [新增] 智能体对话文字颜色设置 */
.chat-message.assistant .chat-content-wrapper {
  color: var(--agent-text-color, var(--text-primary));
}

.chat-message.user .chat-content-wrapper {
  background-color: #191d24;
}

#chat-display-area.virtual-mode .chat-content-wrapper {
  text-align: left;
}

#chat-display-area.virtual-mode .chat-content-wrapper pre {
  text-align: left;
}

.input-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  background: #050a14 !important;
  /* Deep Blue background same as main menu */
  background-color: #050a14 !important;
  box-shadow: none !important;
}

/* [修复] 确保输入框在欢迎模式下始终可见 */
.input-area.welcome-mode {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  border: 1px solid #19222c !important;
}

/* [修复] 确保欢迎模式下输入框始终显示，即使有collapsed或hidden类 */
.input-area.welcome-mode.collapsed,
.input-area.welcome-mode.hidden {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 200;
  /* 覆盖在内容框和拖拽手柄条上面，但低于弹框(9999+) */
  width: auto;
  min-width: 800px;
  max-width: 90%;
  border-radius: 999px !important;
}

/* 输入模式指示器 - 显示在对话框上方，作为状态显示图标 */
.input-mode-indicator {
  position: absolute;
  top: -50px;
  right: 20px;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  border-radius: 50%;
  background: transparent !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: default;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
  pointer-events: none;
}

.chat-main-area {
  position: relative;
  z-index: 5;
  /* 普通内容模块，低于输入区域(z-index: 100) */
}

.input-mode-indicator .mode-icon {
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.input-mode-indicator.hidden {
  display: none;
}

/* 响应式调整：在小屏幕上，图标位置可能需要调整 */
@media (max-width: 1200px) {
  .input-mode-indicator {
    right: 15px;
    top: -45px;
  }
}

@media (max-width: 900px) {
  .input-mode-indicator {
    right: 10px;
    top: -40px;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    max-width: 38px;
    max-height: 38px;
  }

  .input-mode-indicator .mode-icon {
    font-size: 24px;
  }
}

/* 覆盖 section-box 的背景设置 */
.input-area.section-box {
  background: #050a14 !important;
  background-color: #050a14 !important;
  border: 1px solid #19222c !important;
  border-radius: 999px !important;
  padding: 10px 0 !important;
}

#chat-add-btn {
  font-size: 56px !important;
  /* Enlarge + icon，放大一倍 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  /* 确保加号完全居中，去掉干扰样式 */
}

#chat-memory-btn {
  color: #666 !important;
  /* Default gray */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  /* 和增加按钮一样的大小尺寸，放大一倍 */
  padding: 0 !important;
  /* 确保图标居中 */
}

#chat-memory-btn.active {
  color: #fff !important;
  /* 图标白色 */
  background-color: var(--accent-color) !important;
  /* 背景色是风格主色 */
}

#chat-memory-btn svg,
#chat-memory-btn img,
.memory-icon {
  width: 36px !important;
  height: 36px !important;
  /* 放大一倍，确保是正方形 */
  aspect-ratio: 1 / 1;
  display: block;
  margin: 0 auto;
  filter: grayscale(1) brightness(0.7);
  opacity: 0.75;
  object-fit: contain;
}

[data-theme="light"] #chat-memory-btn svg,
[data-theme="light"] #chat-memory-btn img,
[data-theme="light"] .memory-icon {
  filter: none !important;
  opacity: 1 !important;
}


#user-input-area {
  min-width: 400px;
  max-width: none !important;
  background-color: transparent !important;
  border: none !important;
  color: #fff !important;
  font-size: 16px;
  height: 45px;
  min-height: 45px;
  max-height: 45px;
  line-height: 27px;
  border-radius: 999px !important;
  padding: 9px 50px !important;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  margin: 0;
}

[data-theme="light"] #user-input-area {
  color: var(--text-primary) !important;
  caret-color: var(--text-primary) !important;
}

[data-theme="light"] #user-input-area::placeholder {
  color: var(--text-muted) !important;
}

#user-input-area:focus {
  border: 1px solid var(--accent-color) !important;
  box-shadow: none !important;
  outline: none !important;
}

[data-theme="light"] #user-input-area:focus {
  border-color: #000000 !important;
}

.voice-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
}

.input-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 增加间距 */
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  z-index: 1000;
}

.chat-input-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  /* [修复] 减少元素间距，让布局更紧凑 */
  justify-content: flex-start;
  /* [修复] 改为flex-start，让元素靠左排列 */
  background: transparent !important;
  /* 默认状态：透明边框和padding，保持与聚焦状态相同的尺寸 */
  border: 1px solid #19222c !important;
  border-radius: 999px;
  padding: 10px 10px !important;
  /* [Changed] Reduced horizontal padding from 20px to 10px to give 20px more space to content */
  box-sizing: border-box;
  box-shadow: none !important;
  transition: border-color 0.2s ease;
  width: 100%;
  flex: 1 1 auto;
  min-width: 750px;
  position: relative;
  z-index: 1000;
}

[data-theme="light"] .chat-input-pill {
  background-color: #ffffff !important;
  border-color: var(--border-color) !important;
}

/* 当鼠标悬停在输入框模块上时，显示颜色边框 */
.input-area:hover .chat-input-pill,
.chat-input-pill:hover {
  border: 1px solid #19222c !important;
}

[data-theme="light"] .input-area:hover .chat-input-pill,
[data-theme="light"] .chat-input-pill:hover {
  border-color: #000000 !important;
}

/* 当鼠标悬停在输入框模块上时，内部输入框也显示颜色边框 */
.input-area:hover #user-input-area {
  border: 1px solid var(--accent-color) !important;
}

[data-theme="light"] .input-area:hover #user-input-area {
  border-color: #000000 !important;
}

/* 当输入框聚焦时，外层容器显示3px主题色边框，尺寸保持不变 */
.chat-input-pill:has(#user-input-area:focus) {
  border: 1px solid var(--accent-color) !important;
  /* padding和border-radius已在默认状态设置，这里不需要重复 */
}

[data-theme="light"] .chat-input-pill:has(#user-input-area:focus) {
  border-color: #000000 !important;
}

/* 左侧按钮组（加号和记忆按钮） - 紧挨着放在左边 */
.chat-add-wrapper {
  flex-shrink: 0;
}

.chat-memory-toggle {
  flex-shrink: 0;
  margin-left: 0;
  /* 分离按钮 */
}

/* 右侧按钮组（语音、发送和清除按钮） */
#btn-voice-input,
#btn-send-message,
#btn-clear-input {
  flex-shrink: 0 !important;
}

.chat-add-wrapper {
  position: relative;
  flex-shrink: 0;
}

.chat-icon-btn,
.chat-send-btn {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  border-radius: 50% !important;
  border: 1px solid #19222c !important;
  background: rgba(20, 30, 50, 0.9) !important;
  /* 深蓝色背景 */
  color: #999999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 !important;
  box-shadow: none;
  margin: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  font-size: 36px !important;
  /* 调整 + 号等文字大小，放大一倍 */
  /* [修复] 确保按钮内容不超出 */
  overflow: hidden;
}

.chat-send-btn {
  font-size: 0 !important;
}

.chat-send-btn .send-plane-icon {
  width: 24px !important;
  height: 24px !important;
  display: block;
  color: var(--accent-color) !important;
}

[data-theme="light"] .chat-icon-btn,
[data-theme="light"] .chat-send-btn {
  background: #ffffff !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.chat-icon-btn:hover,
.chat-send-btn:hover {
  border-color: #19222c !important;
  color: var(--accent-color) !important;
  box-shadow: none;
}

[data-theme="light"] .chat-icon-btn:hover,
[data-theme="light"] .chat-send-btn:hover {
  border-color: #000000 !important;
  color: #000000 !important;
}

.chat-icon-btn:active {
  transform: translateY(1px);
}

.chat-add-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  min-width: 190px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 20;
  transition: bottom 0.3s ease, top 0.3s ease;
  align-items: center;
}

/* 当输入框在底部时，菜单显示在上面（默认行为） */
.chat-add-menu.menu-above {
  top: auto;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.chat-add-item {
  border: none;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: flex-start;
}

.chat-add-icon {
  font-size: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
}

.chat-add-text {
  flex: 1;
  text-align: left;
}

.chat-add-item:hover {
  background: var(--bg-input);
  color: var(--accent-color);
}

.hidden-file-input {
  display: none;
}

.chat-memory-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.memory-btn {
  border-color: #409eff;
  /* 改为和加号按钮一样的浅蓝色 */
}

/* [修复] .memory-icon 样式已在上方定义，这里只保留 active 状态 */
.memory-btn.active .memory-icon {
  filter: none !important;
  opacity: 1 !important;
  color: #fff !important;
  /* 开启时图标白色 */
}

.memory-btn.active img.memory-icon {
  filter: none !important;
  opacity: 1 !important;
}

.chat-send-btn {
  position: relative;
}

.chat-send-btn .send-button-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.chat-send-btn:hover {
  border-color: #19222c !important;
  box-shadow: none;
  transform: translateY(-1px);
}

.chat-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.chat-send-btn.loading:disabled {
  opacity: 1;
}

.chat-send-btn.loading,
.chat-send-btn.waiting {
  overflow: visible;
}

.voice-icon,
.clear-icon,
.chat-input-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: grayscale(1) brightness(0.8);
  opacity: 0.8;
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.3s ease;
}

.voice-icon {
  color: currentColor !important;
  fill: currentColor !important;
}

.voice-svg-icon {
  display: block;
  background-color: currentColor;
  -webkit-mask-image: url('../icons/yuyin.svg');
  mask-image: url('../icons/yuyin.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* [修改] 发送按钮图标缩小0.5倍 */
.chat-send-btn .send-plane-icon {
  width: 24px !important;
  height: 24px !important;
  transform: scale(1);
}

.chat-send-btn .cancel-icon {
  display: none !important;
}

/* [修正] 发送过程中只显示等待图标，发送图标隐藏 */
.chat-send-btn.loading .send-plane-icon,
.chat-send-btn.waiting .send-plane-icon {
  opacity: 0;
  display: none !important;
}

@keyframes sendIconBreathe {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.12);
    opacity: 0.8;
  }
}

.chat-icon-btn:hover .chat-input-icon,
.chat-icon-btn:hover .voice-icon,
.chat-icon-btn:hover .clear-icon,
.chat-send-btn:hover .send-plane-icon {
  filter: none;
  opacity: 1;
}

/* hover时语音图标也保持灰色 */
.chat-icon-btn.active .chat-input-icon,
.chat-icon-btn.active .voice-icon,
.chat-icon-btn.active .clear-icon {
  filter: none;
  opacity: 1;
}

#btn-clear-input:hover {
  border-color: #19222c !important;
  background-color: rgba(245, 108, 108, 0.1) !important;
}

#btn-clear-input:hover .clear-icon {
  filter: none;
  opacity: 1;
}

#btn-clear-input.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
  background-color: transparent !important;
  border-color: var(--border-color) !important;
}

.chat-send-btn .loading-inner-mask,
.chat-send-btn .loading-icon-wrapper {
  display: none;
}

.chat-send-btn .loading-inner-mask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  z-index: 2;
  pointer-events: none;
}

.chat-send-btn .loading-icon-wrapper {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  color: var(--accent-color);
}

.chat-send-btn.loading .send-plane-icon,
.chat-send-btn.waiting .send-plane-icon {
  opacity: 0 !important;
  display: none !important;
}

.chat-send-btn.loading .loading-inner-mask,
.chat-send-btn.loading .loading-icon-wrapper,
.chat-send-btn.waiting .loading-inner-mask,
.chat-send-btn.waiting .loading-icon-wrapper {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}

.chat-send-btn .loading-icon-wrapper .send-thinking-icon {
  width: 24px !important;
  height: 24px !important;
  display: block;
  background-color: currentColor;
  -webkit-mask-image: url('../icons/cerebra.svg');
  mask-image: url('../icons/cerebra.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  animation: sendIconBreathe 1.5s ease-in-out infinite;
  filter: none !important;
  opacity: 1 !important;
}

.chat-send-btn.cancelable.loading .loading-icon-wrapper,
.chat-send-btn.cancelable.waiting .loading-icon-wrapper {
  display: none !important;
}

.chat-send-btn.cancelable.loading .send-plane-icon,
.chat-send-btn.cancelable.waiting .send-plane-icon {
  display: none !important;
}

.chat-send-btn.cancelable.loading .cancel-icon,
.chat-send-btn.cancelable.waiting .cancel-icon {
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
}

.chat-input-pill #btn-voice-input {}

/* =========================================
   [新增] 登录气泡弹窗样式
   ========================================= */

#login-popup-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#login-popup-container.hidden {
  display: none;
}

.login-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
}

.login-popup {
  position: relative;
  transform-origin: bottom left;
  pointer-events: auto;
  z-index: 10001;
}

#login-popup-container:not(.hidden) .login-popup {
  animation: jelly-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.login-bubble {
  position: relative;
  width: 320px;
  background: #2c2c2e;
  border-radius: 20px;
  padding: 25px;
  border: 1px solid #444;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

/* 气泡的小尾巴 */
.login-bubble::after {
  content: '';
  position: absolute;
  bottom: -20px;
  /* 调整尾巴位置 */
  left: 40px;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: #2c2c2e;
  border-bottom: 0;
  border-left: 0;
  transform: rotate(45deg);
}

.login-bubble h3 {
  text-align: center;
  color: #f5f5f7;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 20px;
}

.login-bubble .form-group {
  margin-bottom: 15px;
}

.login-bubble input[type="text"],
.login-bubble input[type="password"] {
  width: 100%;
  padding: 12px;
  background-color: rgba(30, 40, 60, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #f5f5f7;
  font-size: 14px;
  pointer-events: auto;
  user-select: text;
  cursor: text;
}

.login-bubble input[type="text"]:focus,
.login-bubble input[type="password"]:focus {
  border-color: var(--accent-color);
  background-color: rgba(30, 40, 60, 0.9);
}

.captcha-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.captcha-group input {
  flex: 0 0 120px;
}

#captcha-image {
  width: 130px;
  height: 42px;
  background-color: #1c1c1e;
  border: 1px solid #444;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #888;
}

/* [新增] 确保用户图标按钮容器为相对定位 */
.hidden {
  display: none !important;
}

#user-avatar-btn {
  position: relative;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  transition: transform 0.3s ease;
  font-size: 19.2px !important;
  /* 缩小0.4倍 (32px * 0.6 = 19.2px) */
  line-height: 1 !important;
  box-shadow: none !important;
}

#user-avatar-btn:hover {
  transform: none !important;
  /* 鼠标悬停时放大图标 */
}

/* 账户类型标签样式 */
.user-role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
  transition: all 0.2s ease;
}

.user-role-badge.role-badge-admin {
  background-color: #f56c6c;
  color: #ffffff;
  border: 1px solid #f56c6c;
}

.user-role-badge.role-badge-pro {
  background-color: #e6a23c;
  color: #ffffff;
  border: 1px solid #e6a23c;
  position: relative;
  padding-right: 20px;
}

.user-role-badge.role-badge-pro::after {
  content: '👑';
  position: absolute;
  top: -14px;
  right: -6px;
  font-size: 16px;
  transform: rotate(24deg);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.user-role-badge.role-badge-normal {
  background-color: #409eff;
  color: #ffffff;
  border: 1px solid #409eff;
}

.user-role-badge.role-badge-guest {
  background-color: #909399;
  color: #ffffff;
  border: 1px solid #909399;
}

.user-role-badge.role-badge-superadmin {
  background-color: #7c3aed;
  color: #ffffff;
  border: 1px solid #7c3aed;
}

#user-avatar-btn img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* 悬停时显示主题颜色 */
#user-avatar-btn:hover img {
  opacity: 0.9;
}

/* [新增] 用户登录气泡框样式 (Moved from inline) */
.user-login-bubble {
  position: absolute;
  top: 48px;
  right: 52px;
  background: #2c2c2e;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  padding: 25px;
  width: 320px;
  z-index: 1000;
  overflow: visible;
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-height: 400px;
  pointer-events: none;
  border: 1px solid #444;
  color: #f5f5f7;
}

.nav-right-controls .user-login-bubble.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.user-login-bubble.expanded {
  max-height: 700px;
}

.user-login-bubble::after {
  content: "";
  position: absolute;
  top: 20px;
  right: -10px;
  border-width: 10px 0 10px 10px;
  border-style: solid;
  border-color: transparent transparent transparent #2c2c2e;
}

.bubble-form-group {
  margin-bottom: 15px;
}

.bubble-form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #3a5a8a;
  border-radius: 4px;
  box-sizing: border-box;
  background: #0b223b;
  color: #ffffff;
}

.bubble-form-group input:-webkit-autofill,
.bubble-form-group input:-webkit-autofill:hover,
.bubble-form-group input:-webkit-autofill:focus,
.bubble-form-group input:-webkit-autofill:active,
.bubble-form-group input:autofill,
.bubble-form-group input:-moz-autofill {
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px #0b223b inset !important;
  box-shadow: 0 0 0 1000px #0b223b inset !important;
  background-color: #0b223b !important;
  background: #0b223b !important;
  border: 1px solid #3a5a8a !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

.bubble-form-group input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.bubble-button-row {
  display: flex;
  gap: 10px;
}

.bubble-login-btn,
.bubble-register-btn {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.bubble-login-btn {
  background: var(--accent-color);
  color: #ffffff;
  transition: background-color 0.2s ease;
}

.bubble-register-btn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

/* 注册表单网格布局 */
.register-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.register-grid .bubble-form-group {
  margin-bottom: 0;
}

.register-full-width {
  grid-column: 1 / -1;
}

.hidden-view {
  display: none;
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.bubble-login-view,
.bubble-register-view {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.bubble-login-view.hidden-view,
.bubble-register-view.hidden-view {
  display: none;
  opacity: 0;
  transform: translateX(10px);
}

.bubble-login-view:not(.hidden-view),
.bubble-register-view:not(.hidden-view) {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

.bubble-form-group input:focus {
  outline: none;
  border-color: var(--accent-color);
}

.bubble-form-group input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.bubble-button-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.bubble-login-btn {
  flex: 2;
  padding: 10px 16px;
  background: var(--accent-color);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.bubble-login-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
}

.bubble-register-btn {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.bubble-register-btn:hover {
  background: rgba(64, 158, 255, 0.1);
  transform: translateY(-1px);
}

.login-button {
  width: 100%;
  padding: 12px;
  background-color: var(--accent-color);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-button:hover {
  background-color: var(--accent-hover);
}

/* 注册提示 */
#register-hint {
  position: absolute;
  top: -55px;
  /* 定位到气泡上方 */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

#register-hint span {
  color: white;
  font-size: 14px;
  margin-top: 5px;
}

/* 红色帽子图标 (用CSS绘制) */
#register-hint::before {
  content: '';
  width: 40px;
  height: 30px;
  background-color: #e53935;
  /* 红色 */
  border-radius: 50% 50% 0 0;
  position: relative;
  border: 2px solid white;
}

#register-hint::after {
  content: '';
  position: absolute;
  top: -8px;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
}

.register-arrow {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid white;
}

/* 果冻Q弹动画 */
@keyframes jelly-bounce {
  0% {
    transform: scale(0.1, 0.1);
    opacity: 0;
  }

  50% {
    transform: scale(1.1, 1.1);
    opacity: 1;
  }

  70% {
    transform: scale(0.9, 0.9);
  }

  90% {
    transform: scale(1.05, 1.05);
  }

  100% {
    transform: scale(1, 1);
    opacity: 1;
  }
}

/* [新增] 主聊天面板 */
.main-pane {
  flex: 1 1 auto;
  /* 自动伸缩，填充剩余空间 */
  display: flex;
  flex-direction: column;
  min-width: 400px;
  overflow: hidden;
}

/* [修改] 近期指令面板 - 独立显示在最左侧 */
#keyword-section {
  flex: 0 0 25%;
  /* [修改] 宽度25% (2.5/10) */
  display: flex;
  flex-direction: column;
  min-width: 220px;
  /* 最小宽度220px */
  max-width: none;
  /* 移除最大宽度限制 */
  height: 100%;
  /* 占满父容器高度 */
  overflow-y: auto;
  /* 内部滚动 */
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 0 10px 10px 10px;
  /* 统一内边距，确保内容宽度一致 */
  box-sizing: border-box;
  /* 确保边框和内边距包含在宽度内 */
}

#keyword-section>#conversations-list-pane.conversation-list-pane {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

#keyword-section>#conversations-list-pane.conversation-list-pane .conversation-list-title {
  width: 100%;
  box-sizing: border-box;
}

#keyword-section>#conversations-list-pane.conversation-list-pane .conversation-list-header {
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border-color);
}

#keyword-section>#conversations-list-pane.conversation-list-pane #conversations-list {
  width: 100%;
  box-sizing: border-box;
}

/* [修改] 分类与笔记面板 - 独立显示在最右侧 */
.notes-selection-pane {
  flex: 0 0 25%;
  /* [修改] 宽度25% (2.5/10) */
  display: flex;
  flex-direction: column;
  min-width: 220px;
  /* 最小宽度220px */
  max-width: none;
  /* 移除最大宽度限制 */
  height: 100%;
  /* 占满父容器高度 */
  overflow-y: auto;
  /* 内部滚动 */
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  border-radius: var(--radius-md);
  position: relative;
  z-index: 1;
  /* 普通内容模块，低于输入区域(z-index: 100) */
  padding: 0 10px 10px 10px;
  /* 统一内边距，确保内容宽度一致 */
  box-sizing: border-box;
  /* 确保边框和内边距包含在宽度内 */
}

#tab-agent .notes-selection-pane.section-box {
  margin-bottom: 0 !important;
  padding: 0 10px 10px 10px !important;
}

.tree-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tab-btn {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-btn.active {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

.tab-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.library-pane {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
  gap: 0;
  position: relative;
  z-index: 1;
  /* 普通内容模块，低于输入区域(z-index: 100) */
}

.library-management-pane {
  width: 280px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  position: relative;
  /* [新增] 为收起按钮定位 */
  padding-top: 20px;
  /* [修改] 为收起按钮留出10像素空间 */
}

/* [新增] 内容库收起/展开按钮 - 横线样式，高度20像素，中间小箭头 */
.library-toggle-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* [修改] 宽度和整个这一列一样宽 */
  height: 20px !important;
  /* [修改] 确保高度20像素 */
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible;
  /* 确保箭头可见 */
}

.library-toggle-btn:hover {
  background-color: var(--bg-input);
  border-color: var(--accent-color);
  /* [修改] 只有颜色变化，没有其他动画效果 */
}

[data-theme="light"] #tab-library .library-toggle-btn {
  background-color: #ffffff !important;
  border-color: #dcdfe6 !important;
  pointer-events: auto !important;
}

[data-theme="light"] #tab-library .toggle-line {
  background-color: #dcdfe6 !important;
}

[data-theme="light"] #tab-library .toggle-arrow {
  color: #000000 !important;
  background-color: #ffffff !important;
}

[data-theme="light"] #tab-library .tree-item-label {
  color: #000000 !important;
}

[data-theme="light"] #tab-library .tree-item.selected>.tree-item-label {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
}

[data-theme="light"] #tab-library .tree-view {
  border-color: #dcdfe6 !important;
}

[data-theme="light"] #tab-library #note-editor-content {
  color: #000000 !important;
}

#tab-library #library-notes-tree .tree-item-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  min-height: 32px;
}

#tab-library #library-notes-tree .tree-view li {
  padding: 0;
}

#tab-library #library-notes-tree .tree-item-name {
  flex: 1;
}

#tab-library #library-notes-tree .tree-item-ai-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 32px;
  font-size: 16px;
  line-height: 1;
  margin-left: 8px;
}

.toggle-line {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}

.toggle-arrow {
  position: relative;
  font-size: 10px;
  color: var(--text-secondary);
  transition: transform 0.3s ease;
  /* [保留] 只有箭头变化有动画 */
  z-index: 1;
  background-color: var(--bg-surface);
  /* [新增] 给箭头添加背景，确保可见 */
  padding: 0 2px;
  /* [新增] 给箭头左右留点空间 */
}

.library-management-pane.collapsed .toggle-arrow {
  transform: rotate(180deg);
}

/* [新增] 内容库控制区域包装器 - 只隐藏功能按钮，保留列表 */
.library-controls-wrapper {
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
  overflow: hidden;
  margin-top: 15px !important;
  /* [修改] 和上面按钮的距离保持15像素 */
}

.library-management-pane.collapsed .library-controls-wrapper {
  max-height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  /* 禁用交互 */
}

/* [新增] 确保列表内容在收起时仍然显示 */
.library-management-pane.collapsed #library-notes-tree,
.library-management-pane.collapsed .tree-view {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.library-search-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 15px;
}

.library-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.library-search-input:focus {
  outline: none;
  border-color: var(--accent-color);
}

.library-content-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  overflow: hidden;
}

#lazy-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.9);
  border: 1px solid var(--accent-color);
  color: #fff;
  padding: 15px 30px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  z-index: 9999;
  text-align: center;
  min-width: 320px;
  animation: fadeInToast 0.3s ease-out;
}

#lazy-toast .close-icon {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  color: #999;
  font-size: 20px;
}

#lazy-toast .close-icon:hover {
  color: #fff;
}

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

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20000 !important;
}

/* [修复] 弹框层级 - 确保My按钮和管理弹框最高 */
.modal-dialog,
#modal-my-settings,
#modal-data-management-export,
#modal-data-management-clear,
#modal-memory-management {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-highlight);
  padding: 0;
  border-radius: 6px;
  width: 800px;
  max-width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8);
  margin: auto;
  /* 确保居中 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20001 !important;
}

/* 个性化弹框 - 居中显示 */
#modal-edit-personalization,
#modal-user-personalization,
#modal-askstring,
#modal-edit-note,
#modal-select-options,
#modal-select-category,
#modal-my-settings {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* 记忆管理弹框 - 完全居中显示，并且在MY弹框之上 */
#modal-memory-management {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 20006 !important;
}

/* hidden类定义 */
.modal-dialog.hidden,
#modal-memory-management.hidden {
  display: none !important;
}

/* [修复] 弹框层级 - 确保My按钮和管理弹框最高 */
#modal-my-settings,
#modal-data-management-export,
#modal-data-management-clear {
  z-index: 20001 !important;
}

#modal-memory-management {
  z-index: 20006 !important;
  width: 700px;
  max-width: 90%;
}

/* 记忆管理弹框样式 */
.memory-modal-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.memory-modal-title-group {
  flex: 1;
}

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

.memory-modal-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.memory-learn-more {
  color: var(--accent-color);
  text-decoration: none;
}

.memory-learn-more:hover {
  text-decoration: underline;
}

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

.memory-search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
}

.search-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 12px;
}

.search-icon {
  margin-right: 8px;
  font-size: 16px;
}

.memory-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
}

.memory-search-actions {
  display: flex;
  gap: 8px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-primary);
  transition: all 0.2s;
}

.icon-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-color);
}

.memory-more-menu {
  position: fixed;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 8px 0;
  min-width: 200px;
  z-index: 20010;
}

.memory-more-menu.hidden {
  display: none;
}

/* 排序菜单样式 */
.memory-sort-menu {
  position: fixed;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 8px 0;
  min-width: 150px;
  z-index: 20010;
}

.memory-sort-menu.hidden {
  display: none;
}

.memory-sort-item {
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.memory-sort-item:hover {
  background: var(--bg-hover);
}

.memory-sort-item.active {
  color: var(--accent-color);
}

.memory-sort-item .checkmark {
  font-size: 16px;
  opacity: 0;
}

.memory-sort-item.active .checkmark {
  opacity: 1;
}

.memory-more-item {
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.memory-more-item i {
  width: 16px;
  font-size: 14px;
}

.memory-more-item:hover {
  background: var(--bg-hover);
}

.memory-more-item.danger {
  color: #f56c6c;
}

.memory-more-item.danger:hover {
  background: rgba(245, 108, 108, 0.1);
}

.memory-list-container {
  min-height: 300px;
}

.empty-memory-list {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

.memory-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.memory-item {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px;
  transition: all 0.2s;
}

.memory-item:hover {
  border-color: var(--accent-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.memory-header {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
}

.memory-role {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.memory-role.role-user {
  background: rgba(64, 158, 255, 0.2);
  color: #409eff;
}

.memory-role.role-assistant {
  background: rgba(103, 194, 58, 0.2);
  color: #67c23a;
}

.memory-role.role-system {
  background: rgba(230, 162, 60, 0.2);
  color: #e6a23c;
}

.memory-source {
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(144, 147, 153, 0.2);
  color: var(--text-secondary);
}

.memory-content {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
  word-break: break-word;
}

/* 搜索关键词高亮 */
.memory-content .highlight {
  background-color: rgba(255, 215, 0, 0.3);
  color: #ffd700;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 2px;
}

.memory-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.memory-time {
  font-size: 12px;
}

.memory-delete-btn {
  padding: 4px 12px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.memory-delete-btn:hover {
  background: rgba(245, 108, 108, 0.1);
  border-color: #f56c6c;
  color: #f56c6c;
}

#modal-my-settings {
  padding: 20px;
}

#modal-memory-history {
  z-index: 20007 !important;
  width: 900px;
  max-width: 95%;
  height: 600px;
  max-height: 85vh;
}

.memory-history-body {
  padding: 0;
  overflow: hidden;
}

.memory-history-layout {
  display: flex;
  height: 100%;
  gap: 0;
}

.memory-history-sidebar {
  width: 200px;
  border-right: 1px solid var(--border-color);
  overflow-y: auto;
  background: var(--bg-input);
}

.checkpoint-list {
  padding: 12px;
}

.checkpoint-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

.checkpoint-item {
  padding: 12px;
  margin-bottom: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.checkpoint-item:hover {
  border-color: var(--accent-color);
  background: var(--bg-hover);
}

.checkpoint-item.active {
  border-color: var(--accent-color);
  background: rgba(64, 158, 255, 0.1);
}

.checkpoint-date {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.checkpoint-count {
  font-size: 12px;
  color: var(--text-secondary);
}

.memory-history-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.empty-history {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

.history-memory-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-memory-item {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px;
  transition: all 0.2s;
}

.history-memory-item:hover {
  border-color: var(--accent-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.memory-deleted-tag {
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(245, 108, 108, 0.2);
  color: #f56c6c;
  font-size: 12px;
  font-weight: 500;
}

.memory-restore-btn {
  padding: 4px 12px;
  border: 1px solid var(--accent-color);
  background: transparent;
  color: var(--accent-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.memory-restore-btn:hover {
  background: var(--accent-color);
  color: #fff;
}

.modal-dialog.wide {
  width: 700px;
}

.modal-dialog.extra-wide {
  width: 660px;
  max-width: 95vw;
  height: auto;
  max-height: 80vh;
  /* 改为最大高度 */
  font-size: 12px;
  /* 整体字体12px */
  padding: 20px;
  /* 添加内边距 */
}

/* 确保个性化弹框显示在最上面 */
#modal-edit-personalization,
#modal-user-personalization {
  z-index: 10001 !important;
}

/* ========================================
   MCP 管理样式
   ======================================== */

.mcp-servers-list {
  margin-top: 16px;
}

.mcp-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}

.mcp-empty-state p {
  margin-bottom: 16px;
  font-size: 14px;
}

.mcp-add-btn {
  padding: 8px 16px;
  background: var(--accent-color);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.mcp-add-btn:hover {
  background: var(--accent-hover);
}

.mcp-server-item {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.2s;
}

.mcp-server-item:hover {
  border-color: var(--accent-color);
}

.mcp-server-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
}

.mcp-server-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.mcp-server-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.mcp-server-details {
  flex: 1;
  min-width: 0;
}

.mcp-server-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.mcp-server-desc {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mcp-server-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mcp-icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.mcp-icon-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.mcp-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.mcp-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mcp-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #444;
  transition: 0.3s;
  border-radius: 24px;
}

.mcp-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.mcp-toggle-switch input:checked+.mcp-toggle-slider {
  background-color: var(--accent-color);
}

.mcp-toggle-switch input:checked+.mcp-toggle-slider:before {
  transform: translateX(20px);
}

.mcp-server-content {
  padding: 0 16px 12px 16px;
  border-top: 1px solid var(--border-color);
  margin-top: 8px;
  padding-top: 12px;
}

.mcp-config-display {
  margin-bottom: 8px;
}

.mcp-config-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.mcp-config-value {
  font-size: 13px;
  color: var(--text-primary);
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  background: var(--bg-surface);
  padding: 8px;
  border-radius: 4px;
  word-break: break-all;
}

/* MCP设置菜单 */
.mcp-settings-menu {
  position: fixed;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 8px 0;
  min-width: 160px;
  z-index: 20010;
}

.mcp-menu-item {
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mcp-menu-item i {
  width: 16px;
  font-size: 14px;
}

.mcp-menu-item:hover {
  background: var(--bg-hover);
}

.mcp-menu-item.danger {
  color: #f56c6c;
}

.mcp-menu-item.danger:hover {
  background: rgba(245, 108, 108, 0.1);
}

/* MCP编辑弹框 */
#modal-mcp-edit {
  width: 700px;
  max-width: 90%;
  z-index: 20008 !important;
}

.mcp-edit-modal .modal-body {
  padding: 20px;
}

.mcp-edit-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mcp-edit-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}

.mcp-edit-instruction {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.mcp-code-editor-wrapper {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.mcp-code-editor {
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 16px;
  min-height: 300px;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre;
  outline: none;
}

.mcp-edit-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(230, 162, 60, 0.1);
  border: 1px solid rgba(230, 162, 60, 0.3);
  border-radius: 6px;
  color: #e6a23c;
  font-size: 13px;
}

.mcp-edit-warning i {
  font-size: 16px;
}

/* MCP日志弹框 */
#modal-mcp-logs {
  width: 700px;
  max-width: 90%;
  height: 500px;
  max-height: 80vh;
  z-index: 20008 !important;
}

.mcp-logs-modal .modal-body {
  padding: 0;
  overflow: hidden;
}

.mcp-logs-content {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  background: #1e1e1e;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 12px;
}

.mcp-logs-empty {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.mcp-log-entry {
  padding: 4px 0;
  color: #d4d4d4;
  line-height: 1.6;
}

.mcp-log-time {
  color: #858585;
  margin-right: 8px;
}

.mcp-log-level {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 8px;
}

.mcp-log-level.info {
  background: rgba(64, 158, 255, 0.2);
  color: #409eff;
}

.mcp-log-level.error {
  background: rgba(245, 108, 108, 0.2);
  color: #f56c6c;
}

.mcp-log-level.warn {
  background: rgba(230, 162, 60, 0.2);
  color: #e6a23c;
}

.mcp-log-message {
  color: #d4d4d4;
}

/* ========================================
   网页搜索结果样式
   ======================================== */

.web-search-results {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.search-results-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.search-results-header i {
  font-size: 16px;
}

.search-result-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.search-result-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.search-result-title {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

.search-result-title a {
  color: var(--accent-color);
  text-decoration: none;
}

.search-result-title a:hover {
  text-decoration: underline;
}

.search-result-snippet {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 4px;
}

.search-result-url {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
}

.ai-response-section {
  background: var(--bg-surface);
  border-radius: 8px;
  padding: 16px;
}

.ai-response-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.ai-response-header i {
  font-size: 16px;
  color: #67c23a;
}

.ai-response-content {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.8;
}

/* [新增] 个性化模态框布局 */
.personalization-modal-layout {
  display: flex;
  gap: 15px;
  /* 左右间距 */
  min-height: 400px;
  max-height: 60vh;
  overflow: hidden;
  padding: 0;
  /* 确保布局容器不添加额外padding */
}

.p13n-menu {
  flex: 0 0 auto;
  width: 210px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid var(--border-color);
  padding-right: 15px;
  overflow-x: hidden;
}

#modal-user-personalization .user-p13n-menu {
  padding-top: 12px;
  padding-left: 12px;
}

.p13n-menu-item {
  width: auto;
  text-align: left;
  padding: 8px 15px;
  background: var(--bg-surface);
  border: 1px solid var(--accent-color);
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
  font-size: 12px;
  white-space: normal;
  transition: all 0.2s;
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.3);
  /* 蓝色发光边框效果 */
}

.p13n-menu-item:hover {
  box-shadow: 0 0 12px rgba(64, 158, 255, 0.5);
  /* 悬停时增强发光效果 */
}

.p13n-menu-item.active {
  background: var(--accent-color);
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  /* 蓝色文字 */
  box-shadow: none;
}

.p13n-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px;
}

.p13n-pane {
  display: none;
}

.p13n-pane.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.p13n-pane label {
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.p13n-pane input,
.p13n-pane textarea {
  font-size: 14px;
  padding: 8px;
  background-color: #050a14 !important;
  /* 使用用户输入框的底色 */
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  border-radius: 4px;
  resize: vertical;
}

.p13n-pane textarea {
  min-height: 80px;
}

.modal-buttons {
  text-align: right;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
}

/* 用户个性化设置样式 */
.user-personalization-content {
  height: 450px;
  max-height: 450px;
  overflow-y: auto;
  padding-right: 8px;
}

.personalization-section {
  margin-bottom: 32px;
}

.personalization-section:last-child {
  margin-bottom: 0;
}

.style-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.my-settings-content {
  flex: 1;
  height: 420px;
  /* 固定高度，与布局一致 */
  max-height: 420px;
  overflow-y: auto;
  padding-right: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.my-settings-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.my-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.my-section-head h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.my-section-desc {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.my-settings-list {
  display: flex;
  flex-direction: column;
}

.my-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
}

.my-list-item:first-child {
  border-top: none;
  padding-top: 0;
}

.my-item-text {
  flex: 1;
  min-width: 0;
}

.my-item-title {
  font-weight: 600;
  color: var(--text-primary);
}

.my-item-desc {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.5;
}

.my-item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.my-ghost-button {
  background: var(--bg-input);
  color: #409eff;
  /* 操作按钮使用蓝色 */
  border: 1px solid #409eff;
  /* 操作按钮使用蓝色边框 */
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.my-ghost-button:hover {
  background-color: rgba(64, 158, 255, 0.1);
  border-color: #409eff;
  color: #409eff;
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.3);
}

.my-ghost-button.danger {
  color: #f56c6c;
  border-color: #f56c6c;
  background: rgba(245, 108, 108, 0.08);
}

.my-ghost-button.danger:hover {
  background: rgba(245, 108, 108, 0.14);
}

.my-chevron {
  color: var(--text-secondary);
  font-size: 16px;
}

.my-settings-layout {
  display: flex;
  gap: 16px;
  align-items: stretch;
  height: 420px;
  /* 固定高度，避免切换时抖动 */
  min-height: 420px;
  max-height: 420px;
}

.my-menu {
  width: 120px;
  min-width: 100px;
  height: 420px;
  /* 固定高度，与布局一致 */
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 15px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.my-menu-item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--accent-color);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  white-space: normal;
  transition: all 0.2s;
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.3);
  /* 蓝色发光边框效果 */
}

.my-menu-item:hover {
  box-shadow: 0 0 12px rgba(64, 158, 255, 0.5);
  /* 悬停时增强发光效果 */
}

.my-menu-item.active {
  background: var(--accent-color);
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  /* 蓝色文字 */
  box-shadow: none;
}

.my-pane {
  display: none;
  height: 100%;
  /* 使用父容器高度 */
  overflow-y: auto;
  /* 如果内容超出，显示滚动条 */
}

.my-pane.active {
  display: block;
}

.center-buttons {
  text-align: center !important;
}

.center-buttons button {
  margin: 0 6px;
}

.section-header {
  margin-bottom: 16px;
}

#modal-user-personalization .section-header {
  display: block;
  margin-bottom: 16px;
}

.section-header h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 10px 0 10px 0;
  display: flex;
  align-items: center;
}

#modal-user-personalization .section-header h4 {
  font-size: 18px;
  margin-bottom: 6px;
}

.section-description {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

#modal-user-personalization .section-description {
  font-size: 15px;
}

.section-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 12px;
  background-color: #050a14 !important;
  /* 统一使用用户输入框的底色 */
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px;
  color: #fff !important;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-color: #050a14 !important;
  /* 统一使用用户输入框的底色 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  /* 箭头颜色改为白色，适配深色背景 */
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  text-align: center;
  /* 下拉框文字居中 */
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.char-counter {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
  margin-top: 4px;
}

.toggle-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.toggle-option:last-child {
  border-bottom: none;
}

.toggle-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toggle-label>span:first-child {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.toggle-description {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.toggle-switch-wrapper {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 28px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

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

.toggle-switch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg,
      rgba(108, 117, 125, 0.38),
      rgba(108, 117, 125, 0.26));
  border: 1px solid var(--border-color);
  border-radius: 999px;
  transition: background-color 0.25s ease, border-color 0.25s ease,
    box-shadow 0.25s ease, background 0.25s ease;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.toggle-switch::before {
  content: "启用";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.95);
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
  pointer-events: none;
}

.toggle-slider {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  top: 3px;
  background: linear-gradient(180deg, #ffffff, #f2f4f8);
  border-radius: 50%;
  transition: transform 0.28s cubic-bezier(0.68, -0.55, 0.27, 1.55),
    box-shadow 0.25s ease, background 0.25s ease;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(0, 0, 0, 0.12);
  will-change: transform;
}

.toggle-switch-input:checked+.toggle-switch {
  background-color: var(--accent-color);
  background-image: linear-gradient(180deg,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0));
  border-color: var(--accent-color);
  box-shadow: 0 8px 22px rgba(64, 158, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.toggle-switch-input:checked+.toggle-switch::before {
  opacity: 1;
}

.toggle-switch-input:checked+.toggle-switch+.toggle-slider {
  transform: translateX(26px);
}

.toggle-switch-wrapper:hover .toggle-switch-input:not(:checked)+.toggle-switch {
  border-color: rgba(64, 158, 255, 0.6);
}

.toggle-switch-input:focus-visible+.toggle-switch {
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.35);
}

.toggle-switch-wrapper:active .toggle-switch-input:not(:checked)+.toggle-switch+.toggle-slider {
  transform: translateX(0) scale(0.96);
}

.toggle-switch-wrapper:active .toggle-switch-input:checked+.toggle-switch+.toggle-slider {
  transform: translateX(26px) scale(0.96);
}

.link-button {
  background: none;
  border: none;
  color: var(--accent-color);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: opacity 0.2s;
}

.link-button:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.info-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.footer-tip {
  position: fixed;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.7;
  pointer-events: none;
  z-index: 5000;
  text-align: center;
  white-space: nowrap;
}

.info-text a {
  color: var(--accent-color);
  text-decoration: none;
}

.info-text a:hover {
  text-decoration: underline;
}

.profile-card {
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 2000;
  width: 230px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: translateY(0);
  pointer-events: auto;
}

.profile-card.retracted {
  transform: translateY(-100%);
}

.profile-avatar-bg,
#profile-avatar-bg {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 2px solid var(--accent-color) !important;
  background-color: transparent !important;
  background-image: url("../ui/index/images/tom.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  flex-shrink: 0 !important;
  margin-right: 5px !important;
  /* [修改] 减少间距，最大5像素 */
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
}

.profile-info {
  flex-grow: 0 !important;
  /* 移除flex-grow，避免多余宽度 */
  flex-shrink: 1;
  /* 允许收缩 */
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  /* 限制最大宽度 */
  /* [修改] 移除flex-grow，让文本区域自适应，不留下空白 */
}

.wechat-row {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-primary);
}

.profile-tagline {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toggle-bio-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  /* Updated to circle from later duplicate */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  margin-left: 5px !important;
  /* [修改] 减少间距，最大5像素 */
  flex-shrink: 0 !important;
  /* 防止按钮被压缩 */
}

.toggle-bio-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.profile-card.bio-visible .toggle-bio-btn {
  transform: rotate(180deg);
  background-color: var(--bg-input);
  color: var(--accent-color);
}

.retract-card-btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 24px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 12px 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: -1;
  opacity: 1 !important;
  /* 始终显示 */
  pointer-events: auto !important;
  /* 始终可点击 */
  transition: bottom 0.3s ease, opacity 0.3s ease, background-color 0.2s, color 0.2s;
}

.profile-card:hover .retract-card-btn,
.profile-card:not(.retracted):hover .retract-card-btn {
  opacity: 1 !important;
  /* 确保悬停时也显示 */
  bottom: -24px;
  pointer-events: auto;
  border-color: var(--accent-color);
}

.retract-card-btn:hover {
  background-color: var(--bg-input);
  color: var(--accent-color);
  opacity: 1 !important;
  /* 确保悬停时不消失 */
}

.profile-card.retracted .retract-card-btn {
  display: none !important;
}

.wechat-label {
  font-size: 14px;
  font-weight: bold;
  color: #06b6d4;
  margin-right: 5px;
}

.bio-inner {
  padding: 15px;
  font-size: 12px;
  border-top: 1px solid var(--border-color);
  line-height: 1.6;
  color: #e9e9e9;
}

.bio-inner p {
  margin: 5px 0;
  color: inherit;
}

.bio-inner b {
  font-weight: bold;
}

.profile-bio {
  background-color: var(--bg-secondary);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

.profile-card.bio-visible .profile-bio {
  max-height: 500px;
  opacity: 1;
  border-top: 1px solid var(--border-color);
}


/* [修复] 外星人恢复按钮 (Restore Button) 样式补丁 */
/* 注意：此样式已被后面的更具体样式覆盖，保留用于兼容性 */

#restore-card-btn {
  /* 1. 固定定位在右上角 */
  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 9999;

  /* 2. 尺寸与外观 */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);

  /* 3. 内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;

  /* 4. 默认状态：隐藏 (向上飞出屏幕) */
  transform: translateY(-100px);
  opacity: 0;
  pointer-events: none;

  /* 5. 动画过渡 */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 当添加了 .visible 类时 (即名片收起时) */
/* 注意：此样式已被后面的更具体样式覆盖 */
#restore-card-btn.visible {
  /* 滑下来，变为可见 */
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* 悬停效果 */
#restore-card-btn:hover {
  background-color: var(--accent-color);
  color: #fff;
  box-shadow: 0 0 20px var(--accent-glow);
  transform: scale(1.1) translateY(0);
}

.tools-dashboard,
.games-dashboard {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.tools-dashboard h3,
.games-dashboard h3 {
  text-align: center;
  margin-bottom: 20px;
}

.tools-grid,
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

[data-theme="personal"] .tool-card,
[data-theme="personal"] .game-card {
  background-color: transparent !important;
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: none !important;
  transition: all 0.3s ease;
  backdrop-filter: none !important;
}

[data-theme="personal"] .tool-card:hover,
[data-theme="personal"] .game-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.tool-icon,
.game-icon {
  font-size: 40px;
  width: 60px;
  height: 60px;
  background-color: var(--bg-input);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.game-icon {
  font-size: 36px;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  transition: transform 0.3s;
}

.game-card:hover .game-icon {
  transform: scale(1.1) rotate(5deg);
}

.tool-info h4,
.game-info h4 {
  margin: 0 0 5px 0;
  font-size: 18px;
  color: var(--text-primary);
}

.tool-info p,
.game-info p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.game-play-btn {
  padding: 6px 15px;
  font-size: 12px;
  border-radius: 20px;
  background-color: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  margin-left: auto;
  opacity: 0.7;
  transition: all 0.2s;
}

.game-card:hover .game-play-btn {
  opacity: 1;
  background-color: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

.game-footer-tip {
  margin-top: 30px;
  text-align: center;
  color: #7087a6be;
  font-size: 12px;
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
}

.tool-modal {
  width: 90vw !important;
  height: 90vh !important;
  max-width: 1600px !important;
  max-height: 1000px !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 确保垂直居中 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tool-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-color);
}

.tool-modal-body {
  flex: 1;
  background-color: #000;
  position: relative;
}

.tool-controls-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-tool-btn,
.close-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-tool-btn:hover {
  background-color: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--accent-color);
}

.close-btn:hover {
  background-color: var(--danger-color);
  color: white;
}

.divider-vertical {
  width: 1px;
  height: 20px;
  background-color: var(--border-color);
  margin: 0 5px;
}

#tool-modal-frame,
#game-modal-frame {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

#modal-game-runner.game-modal-custom {
  width: 960px;
  height: 640px;
  max-width: 95vw;
  max-height: 95vh;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  z-index: 2000;
  transition: all 0.3s ease;
}

#modal-game-runner.game-modal-custom.fullscreen {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
}

#modal-game-runner .tool-modal-header {
  position: absolute;
  top: 10px;
  right: 10px;
  width: auto;
  height: auto;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  z-index: 2002;
  display: flex;
  gap: 10px;
  pointer-events: none;
}

#modal-game-runner .tool-modal-header h3 {
  display: none !important;
}

#modal-game-runner .tool-controls-group {
  pointer-events: auto;
  display: flex;
  gap: 10px;
}

#modal-game-runner .control-btn-overlay {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

#modal-game-runner .control-btn-overlay:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  transform: scale(1.1);
}

/* 关闭按钮默认就显示红色 */
#modal-game-runner .close-btn-overlay {
  background-color: rgba(255, 77, 79, 0.15) !important;
  color: #ff4d4f !important;
  border-color: rgba(255, 77, 79, 0.3) !important;
}

#modal-game-runner .close-btn-overlay:hover {
  background-color: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
  color: white !important;
  transform: scale(1.1) rotate(90deg);
}

#modal-game-runner .tool-modal-body {
  flex: 1;
  background-color: #000;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 2001;
  transition: border-radius 0.3s ease;
}

#modal-game-runner.fullscreen .tool-modal-body {
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.settings-container-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  /* Reduced gap */
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
  overflow: visible;
  max-width: 1600px;
  margin: 0 auto;
  padding-left: 12px;
  box-sizing: border-box;
}

.settings-menu {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-top: 30px;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  background-color: rgba(5, 8, 15, 0.5);
  /* 50%透明背景色 */
}

.settings-content {
  flex: 1 1 0;
  width: auto;
  max-width: 1250px;
  min-width: 0;
  padding-bottom: 15px;
  padding-top: 30px;
  /* 向下移动50像素，避免内容被上面截取 */
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  padding-right: 0;
  padding-left: 20px;
  margin-top: 0;
  /* 重置margin-top */
  box-sizing: border-box;
  padding-bottom: calc(15px + var(--bottom-overlay-space));
}

.settings-content.is-scrollable {
  overflow-y: auto;
}

.comfyui-settings-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 15px;
}

.comfyui-settings-section {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.03);
}

.comfyui-settings-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.comfyui-connection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.comfyui-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comfyui-path-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comfyui-path-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 980px) {
  .settings-content {
    width: 100%;
    flex: 1 1 auto;
    padding-left: 16px;
  }

  .comfyui-connection-grid {
    grid-template-columns: 1fr;
  }
}

#pane-api,
#pane-api .settings-group,
#pane-api .section-box,
#pane-api .section-box div,
/* 确保内部所有容器无背景 */
#pane-api .settings-group div {
  background: transparent;
  box-shadow: none;
  border: none;
}

/* 隐藏设置页面右侧非当前选项卡的内容 */
.settings-pane {
  display: none;
}

.settings-pane.active {
  display: block;
}

/* ComfyUI Settings Styles */
.comfyui-settings-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 650px;
  padding: 10px 15px;
}

.settings-row-styled {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 20px;
}

.settings-row-styled label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.folder-picker-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}

.folder-picker-wrapper input {
  flex: 1;
}

.settings-actions {
  margin-top: 30px;
  display: flex;
  justify-content: flex-start;
  padding: 20px 15px;
  gap: 15px;
  border-top: 1px dashed var(--border-color);
}

#pane-anythingllm .settings-actions.anythingllm-save-row {
  justify-content: center;
}

#pane-anythingllm #btn-save-anythingllm-config {
  width: min(520px, 100%);
  min-height: 44px;
}

#pane-notebooklm .settings-actions.notebooklm-save-row {
  justify-content: center;
}

#pane-notebooklm #btn-save-notebooklm-config {
  width: min(520px, 100%);
  min-height: 44px;
}

.my-primary-button {
  background: #409eff;
  color: white;
  border: none;
  border-radius: 999px;
  padding: 10px 30px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.my-primary-button:hover {
  background: #66b1ff;
  box-shadow: 0 0 12px rgba(64, 158, 255, 0.4);
  transform: translateY(-1px);
}

.settings-info-box {
  margin: 20px 15px;
  padding: 12px 16px;
  background: rgba(64, 158, 255, 0.05);
  border-left: 4px solid #409eff;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.input-wrapper-styled input,
.input-group-styled input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.2s;
}

.input-wrapper-styled input:focus,
.input-group-styled input:focus {
  border-color: var(--accent-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.input-group-styled {
  display: flex;
  gap: 10px;
}

.input-group-styled input {
  flex: 1;
}

.settings-actions-styled {
  margin-top: 30px;
  padding: 20px 15px;
  border-top: 1px dashed var(--border-color);
  display: flex;
  justify-content: flex-start;
  gap: 15px;
}

.settings-actions-styled .primary-button {
  padding: 10px 25px;
  font-weight: 600;
}

.theme-actions-v2 {
  margin-top: 30px;
  padding: 20px 15px;
  border-top: 1px dashed var(--border-color);
  display: flex;
  justify-content: flex-start;
  gap: 15px;
}

/* 设置页面中所有下拉框文字居中 */
.settings-pane select,
#theme-font-family,
#theme-font-size,
#theme-scale,
#user-p13n-style-select {
  text-align: center !important;
}

/* KB Batch Action Modal Styles */
.batch-selection-list {
  display: flex;
  flex-direction: column;
  /* List view */
  gap: 2px;
  max-height: 300px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-input);
  margin-top: 10px;
}

.kb-batch-item {
  display: flex;
  align-items: center;
  height: 24px;
  /* Compact height */
  padding: 0 8px;
  border-radius: 4px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.1s;
  user-select: none;
  font-size: 13px;
  border: 1px solid transparent;
}

.kb-batch-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.kb-batch-item .checkbox-icon {
  width: 14px;
  height: 14px;
  border: 1px solid var(--text-secondary);
  border-radius: 2px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: transparent;
  transition: all 0.1s;
}

.kb-batch-item.selected {
  background-color: rgba(64, 158, 255, 0.1);
  border-color: rgba(64, 158, 255, 0.3);
}

.kb-batch-item.selected .checkbox-icon {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
}

.kb-batch-item.selected .checkbox-icon::after {
  content: "✓";
  font-weight: bold;
}

.settings-menu-item {
  width: 100%;
  text-align: center;
  /* [修改] 文本居中 */
  background-color: transparent;
  /* [修改] 透明背景 */
  color: var(--text-secondary);
  /* [修改] 次要文本颜色 */
  padding: 12px 10px;
  /* [修改] 调整内边距 */
  border: 1px solid var(--border-color);
  border-radius: 50px;
  /* [新增] 圆角 */
  cursor: pointer;
  transition: all 0.3s ease;
  /* [新增] 过渡动画 */
  font-weight: 500;
}

.settings-menu-item:hover {
  color: #fff;
  border-color: var(--accent-color);
  background: var(--accent-glow);
  box-shadow: 0 0 15px var(--accent-glow);
}

.settings-menu-item.active {
  background-color: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
  font-weight: bold;
  transition: opacity 0.2s ease-in;
}

.settings-pane.active {
  display: block;
  opacity: 1;
  animation: fadeInPane 0.3s forwards;
}

@keyframes fadeInPane {
  from {
    opacity: 0;
    transform: translateY(2px);
  }

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

.settings-inline-row {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 400px;
}

.password-wrapper input {
  padding-right: 35px !important;
  width: 100%;
}

div.password-wrapper .toggle-password-btn {
  appearance: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  z-index: 20 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  opacity: 0.7 !important;
  color: var(--text-secondary) !important;
  transition: opacity 0.2s !important;
}

div.password-wrapper .toggle-password-btn:hover {
  opacity: 1 !important;
  background: transparent !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
}

div.password-wrapper .toggle-password-btn:active {
  transform: translateY(-50%) scale(1) !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
}

div.password-wrapper .toggle-password-btn::before {
  content: "🙈";
  display: block;
}

div.password-wrapper .toggle-password-btn.visible::before {
  content: "👁️";
}

#note-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}

#note-editor-toolbar select,
#note-editor-toolbar input[type="number"] {
  max-width: 100px !important;
  min-width: 60px;
  margin-bottom: 0;
  height: 38px;
}

.font-size-wrapper {
  display: flex;
  align-items: center;
  gap: 2px;
}

.font-size-wrapper .fs-adjust {
  min-width: 30px !important;
  padding: 4px 8px !important;
}

.font-size-wrapper .fs-input {
  width: 50px !important;
  text-align: center;
  padding: 4px !important;
}

.font-size-wrapper .fs-confirm {
  min-width: 30px !important;
  padding: 4px 8px !important;
  background-color: var(--accent-color) !important;
  color: #fff !important;
  border-color: var(--accent-color) !important;
}

.font-size-wrapper .fs-confirm:hover {
  filter: brightness(1.1);
}

.contact-qr-container {
  display: flex;
  flex-direction: row;
  gap: 30px;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
}

.qr-card {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 25px;
  text-align: center;
  width: 240px;
  flex-shrink: 0;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.qr-img-wrapper {
  width: 180px;
  height: 180px;
  background-color: #fff;
  margin: 0 auto 15px auto;
  padding: 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.qr-label {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
  margin: 10px 0 5px 0;
}

.qr-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

[data-theme="personal"] {
  --bg-app: #03050e;
  --bg-sidebar: #0b0f19;
  --bg-nav: rgba(5, 8, 15, 0.5);
  /* 统一的深蓝色，50%透明度 */
  --bg-surface: #0f1320;
  --bg-input: #161b27;
  --bg-secondary: #0b0f19;
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --text-muted: #475569;
  --accent-color: #06b6d4;
  --accent-hover: #22d3ee;
  --border-color: #1e293b;
  --border-highlight: #334155;
  --accent-glow: rgba(6, 182, 212, 0.4);
}

[data-theme="personal"] body {
  background-color: var(--bg-app);
  background-image: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.08) 0%, transparent 40%);
  background-attachment: fixed;
}

[data-theme="personal"] body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 0.5px, transparent 0.5px);
  background-size: 4px 4px;
  pointer-events: none;
  z-index: -1;
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

[data-theme="personal"] .tab-nav {
  background: linear-gradient(to bottom, rgba(6, 9, 14, 0.5) 0%, rgba(6, 9, 14, 0) 100%) !important;
  backdrop-filter: blur(12px);
  border-bottom: none !important;
}

[data-theme="personal"] .tab-link {
  border-radius: 50px !important;
  height: 38px !important;
  border: 1px solid var(--border-color) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  overflow: visible !important;
  padding-right: 25px !important;
  /* 右边增加5px (原来是20px，现在是25px) */
}

[data-theme="personal"] .tab-link:hover {
  border-color: var(--accent-color) !important;
  color: #fff !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: 0 0 15px var(--accent-glow);
}

[data-theme="personal"] .tab-link.active {
  border-color: var(--accent-color) !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #fff !important;
  font-weight: bold !important;
  box-shadow: 0 0 10px var(--accent-glow) !important;
}

[data-theme="personal"] .tab-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-color) 50%, transparent 100%);
  border-radius: 2px;
  box-shadow: 0 -2px 8px var(--accent-color);
  animation: navLineFadeIn 0.3s ease-out;
}

[data-theme="personal"] button,
[data-theme="personal"] .button-like-label {
  border-radius: 50px !important;
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  margin-right: 8px !important;
  text-shadow: none !important;
}


[data-theme="personal"] button:hover,
[data-theme="personal"] .button-like-label:hover {
  border-color: var(--accent-color) !important;
  color: #fff !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: 0 0 10px var(--accent-glow) !important;
}

[data-theme="personal"] button.active,
[data-theme="personal"] button:active {
  background: transparent !important;
  background-color: transparent !important;
  color: #fff !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
  transform: scale(0.96) !important;
}

[data-theme="personal"] .chat-main-area {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="personal"] .input-area {
  background: transparent !important;
  background-color: transparent !important;
}

[data-theme="personal"] .game-menu-item:hover,
[data-theme="personal"] .tool-menu-item:hover,
[data-theme="personal"] .settings-menu-item:hover {
  background-color: transparent !important;
  background: transparent !important;
  border-color: var(--text-secondary) !important;
}

[data-theme="personal"] .settings-menu-item.active {
  border-left: 3px solid var(--accent-color) !important;
  background: linear-gradient(to right, var(--accent-glow), transparent) !important;
  background-color: transparent !important;
  color: #fff !important;
}

[data-theme="personal"] .tree-item-label:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: #fff;
}

[data-theme="personal"] .tree-item.selected>.tree-item-label {
  background: transparent !important;
  background-color: transparent !important;
  color: #fff;
  border-radius: 50px;
  box-shadow: 0 0 10px var(--accent-glow);
}

/* [新增] 个性风格下所有div元素背景色透明 */
/* [data-theme="personal"] div {

  background-color: transparent !important;

} */

/* [修复] 薛某不才风格：设置菜单无背景 */
[data-theme="personal"] .settings-menu {
  background-color: transparent !important;
  /* border-right: 1px solid rgba(255, 255, 255, 0.1) !important; */
  flex: 0 0 clamp(160px, 20vw, 220px);
  min-width: 160px;
  max-width: 220px;
  overflow-x: hidden;
}

[data-theme="personal"] .settings-menu-item {
  background-color: transparent !important;
  white-space: normal;
  overflow-wrap: anywhere;
  padding-right: 15px !important;
  /* 右边增加5px (原来是10px，现在是15px) */
}

[data-theme="personal"] .settings-content {
  flex: 0 0 850px;
  width: 850px;
  margin-left: 15px;
}

/* [修复] 薛某不才风格：对话页面标题和输入框居中 */
[data-theme="personal"] .chat-welcome-title {
  text-align: center !important;
  color: #ffffff !important;
  /* 保持与深色模式一致的大小，此处不修改font-size */
  width: 100% !important;
  display: block !important;
}

[data-theme="personal"] .input-area,
[data-theme="personal"] .input-area.welcome-mode {
  margin: 0 auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

[data-theme="personal"] .chat-input-row {
  margin: 0 auto !important;
  justify-content: center !important;
  display: flex !important;
  max-width: 800px !important;
  /* 限制最大宽度以优化居中效果 */
}

[data-theme="personal"] .chat-input-pill {
  width: 100% !important;
  max-width: 100% !important;
}

#modal-game-runner .control-btn-overlay {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.editor-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px dashed var(--border-color);
}

.editor-header label {
  width: 100px;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 0;
  font-weight: bold;
}

.editor-header input#note-editor-title {
  flex-grow: 1;
  width: auto;
  max-width: none;
  margin-right: 0;
}

.editor-header .voice-button-container {
  flex-shrink: 0;
  margin-left: 0 !important;
  margin-right: 0;
}

.editor-header #btn-save-note-content {
  flex-shrink: 0;
  margin-right: 0;
}


.empty-state-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transform: translateY(-20px);
}

/* ================================================================= */
/* [修复] 内容库空白页 & 编辑器显示逻辑 */
/* ================================================================= */

/* 1. 修复：去掉 !important，允许通过 .hidden 类隐藏它 */


/* 确保隐藏类具有最高优先级 */
.hidden {
  display: none !important;
}

/* [新增] 初始隐藏样式 - 在首次消息发送前隐藏这些元素 */
.initially-hidden {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes fadeInPane {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.pane-reveal {
  animation: fadeInPane 0.6s ease-out forwards;
  will-change: opacity, transform;
}

/* [新增] 动画隐藏样式 - 用于发送消息时隐藏侧边栏和顶部模块 */
.slide-out-left {
  animation: slideOutLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
  overflow: hidden;
}

.slide-out-right {
  animation: slideOutRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
  overflow: hidden;
}

.slide-out-up {
  animation: slideOutUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
  overflow: hidden;
}

@keyframes slideOutLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
    flex-basis: 25%;
    min-width: 220px;
    width: auto;
    margin-right: 0;
    padding: 0 10px 10px 10px;
  }

  100% {
    transform: translateX(-100%);
    opacity: 0;
    flex-basis: 0;
    min-width: 0;
    width: 0;
    margin-right: 0;
    padding: 0;
    border: none;
  }
}

@keyframes slideOutRight {
  0% {
    transform: translateX(0);
    opacity: 1;
    flex-basis: 25%;
    min-width: 220px;
    width: auto;
    margin-left: 0;
    padding: 0 10px 10px 10px;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
    flex-basis: 0;
    min-width: 0;
    width: 0;
    margin-left: 0;
    padding: 0;
    border: none;
  }
}

@keyframes slideOutUp {
  0% {
    transform: translateY(0);
    opacity: 1;
    max-height: 500px;
    margin-bottom: 10px;
    padding: 20px;
  }

  100% {
    transform: translateY(-100%);
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    padding: 0;
    border: none;
    overflow: hidden;
  }
}

/* 确保隐藏后的元素不影响布局 */
.slide-out-left,
.slide-out-right,
.slide-out-up {
  transition: flex-basis 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    min-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-out-left.hidden,
.slide-out-right.hidden,
.slide-out-up.hidden {
  display: none !important;
  visibility: hidden;
  flex: 0 0 0 !important;
  min-width: 0 !important;
  width: 0 !important;
}

/* 对话区域在侧边栏隐藏时扩展 */
.main-pane.sidebars-hidden .chat-main-area {
  flex: 1 1 100% !important;
  transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. 机器人图标尺寸 (保持不变) */
.robot-icon {
  width: 180px;
  height: 140px;
  display: block;
  margin-bottom: 5px;
  overflow: visible;
}

/* ================================================================= */
/* [新增] 拖拽层级视觉提示 (上/中/下) */
/* ================================================================= */

/* 基础过渡 */
.tree-item-label {
  transition: border-color 0.1s, background-color 0.1s;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

/* 拖到上半部分：插入到上方 (同级) */
.tree-item.drag-top>.tree-item-label {
  border-top-color: var(--accent-color);
}

/* 拖到下半部分：插入到下方 (同级) */
.tree-item.drag-bottom>.tree-item-label {
  border-bottom-color: var(--accent-color);
}

/* 拖到中间：放入内部 (子级) */
.tree-item.drag-in>.tree-item-label {
  background-color: var(--accent-glow);
  border-radius: 4px;
  border-color: transparent;
  /* 内部拖拽时不显示上下线 */
}

.empty-text {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #374151;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
  margin-top: 0;
}

.robot-head-group {
  animation: floatHead 4s ease-in-out infinite;
}

@keyframes floatHead {

  0%,
  100% {
    transform: translate(60px, 60px);
  }

  50% {
    transform: translate(60px, 55px);
  }
}

.file-bit {
  opacity: 0;
}

.f1 {
  animation: feedMe 3s ease-in infinite;
}

.f2 {
  animation: feedMe 3.5s ease-in infinite 1s;
}

.f3 {
  animation: feedMe 4s ease-in infinite 2s;
}

@keyframes feedMe {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(80px, 90px) scale(0.2) rotate(360deg);
  }
}

[data-theme="light"] .empty-text {
  color: #9ca3af;
  text-shadow: none;
}

[data-theme="light"] .robot-head-group rect {
  stroke: #ccc;
  fill: #f3f4f6;
}

.toggle-password-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
  width: 30px !important;
  height: 30px !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-password-btn:hover {
  opacity: 1;
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-radius: 4px;
}

.toggle-password-btn::before {
  content: "🙈";
  filter: none;
  transition: all 0.2s;
}

.toggle-password-btn.visible::before {
  content: "👁️";
  filter: none;
}

[data-theme="personal"] .tab-link.active,
[data-theme="personal"] button.active,
[data-theme="personal"] .tree-item.selected>.tree-item-label,
[data-theme="personal"] #keyword-list li.active {
  /* background: linear-gradient(135deg, rgba(6, 182, 212, 0.8) 0%, rgba(59, 130, 246, 0.8) 100%) !important; */
  border: none !important;
  /* 移除边框 */
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.5) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.keyword-list li {
  padding: 5px 10px;
  margin-bottom: 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.keyword-list li:hover {
  background-color: var(--bg-input);
  border-color: var(--border-color);
}

[data-theme="light"] .keyword-list li.active {
  background-color: var(--accent-color);
  color: white;
  border-left: 4px solid #0056b3;
}

.tools-grid,
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width:1200px) {

  .tools-grid,
  .games-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.input-buttons,
.tool-controls-group,
.library-controls,
#prompt-edit-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

#theme-font-size {
  padding-right: 0;
  width: 60px;
  text-align: center;
}

.mic-popup {
  position: absolute;
  background-color: rgba(20, 20, 30, 0.95);
  border: 1px solid var(--accent-color);
  border-radius: 12px;
  padding: 15px;
  width: 200px;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.mic-popup.active {
  opacity: 1;
  pointer-events: auto;
}

.mic-alien-icon {
  font-size: 40px;
  animation: pulseAlien 1.5s infinite;
}

.mic-status-text {
  font-size: 12px;
  color: var(--text-primary);
  text-align: center;
}

@keyframes pulseAlien {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(6, 182, 212, 0));
  }

  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.8));
  }

  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(6, 182, 212, 0));
  }
}

.thinking-process-container {
  margin-bottom: 10px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.2);
  overflow: visible;
  /* [修复] 改为visible，确保展开时内容可见 */
  position: relative;
  /* [修复] 确保容器可点击 */
  z-index: 1;
}

/* [新增] 个体模式下工作流日志容器样式 - 蓝色 */
.thinking-process-container.expanded {
  border: 1px solid var(--accent-color) !important;
  /* 蓝色边框 */
  border-style: solid !important;
  /* 改为实线 */
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
  /* 蓝色阴影 */
}

.thinking-process-container.expanded .thinking-header {
  background-color: rgba(64, 158, 255, 0.2) !important;
  /* 蓝色背景 */
  border-bottom: 1px solid var(--accent-color);
  /* 蓝色底部分隔线 */
  color: var(--accent-color) !important;
  /* 蓝色文字 */
}

.thinking-process-container.expanded .thinking-content {
  border-top: 1px solid rgba(64, 158, 255, 0.3);
  /* 蓝色顶部分隔线 */
}

/* [新增] 橙色模式下工作流日志容器样式 - 只保留橙色，去掉蓝色和白色 */
body.group-mode-active .thinking-process-container.expanded {
  border: 1px solid #e6a23c !important;
  /* 橙色边框 */
  border-style: solid !important;
  /* 改为实线 */
  box-shadow: 0 0 10px rgba(230, 162, 60, 0.3);
  /* 橙色阴影 */
}

body.group-mode-active .thinking-process-container.expanded .thinking-header {
  background-color: rgba(230, 162, 60, 0.2) !important;
  /* 橙色背景 */
  border-bottom: 1px solid #e6a23c;
  /* 橙色底部分隔线 */
  color: #e6a23c !important;
  /* 橙色文字，去掉白色 */
}

body.group-mode-active .thinking-process-container.expanded .thinking-content {
  border-top: 1px solid rgba(230, 162, 60, 0.3);
  /* 橙色顶部分隔线 */
  color: #e6a23c !important;
  /* 橙色文字，去掉白色 */
}

body.group-mode-active .thinking-process-container.expanded .thinking-content::-webkit-scrollbar-thumb {
  background: #e6a23c !important;
  /* 橙色滚动条，去掉蓝色 */
}

body.group-mode-active .thinking-process-container.expanded .thinking-content {
  scrollbar-color: #e6a23c rgba(0, 0, 0, 0.2) !important;
  /* 橙色滚动条，去掉蓝色 */
}

.thinking-header {
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.05);
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  /* [修复] 确保header可点击 */
  z-index: 11;
  /* [修复] 确保header在内容上方，可点击 */
  pointer-events: auto;
  /* [修复] 确保在橙色模式下也能点击 */
}

.thinking-header:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.thinking-content {
  padding: 12px 15px;
  font-family: var(--font-family-mono);
  font-size: 13px;
  color: #b0b0b0;
  line-height: 1.8;

  /* [新增] 关键换行属性 */
  white-space: pre-wrap !important;
  /* 允许长文本换行 */
  word-break: normal !important;
  /* [修改] 改为正常断词 */
  overflow-wrap: break-word !important;

  /* 折叠：最多显示5行 */
  max-height: 9em;
  /* 5行 × 1.8行高 */
  overflow: hidden;
  transition: max-height 0.3s ease, box-shadow 0.3s;

  /* [新增] 优化排版 */
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}

.border-accent {
  border-color: var(--accent-color);
}

/* [新增] 工作流窗口按钮样式 */
.workflow-window-icon-btn {
  display: inline-block;
  padding: 8px 12px;
}

/* [新增] 工作流窗口图标样式 */
.workflow-window-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  filter: brightness(0) invert(1);
  margin-top: -2px;
}

/* [新增] 通用辅助类 */
.font-bold {
  font-weight: bold;
}

.p-10 {
  padding: 10px;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* [新增] 仓库抽屉样式 */
.repo-header-styled {
  padding: 15px;
  border-bottom: 1px solid var(--border-color);
  position: relative;
}

.repo-subtitle {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  opacity: 0.7;
}

.repo-hint {
  font-size: 12px;
  color: #888;
  padding: 0 15px;
  margin-top: 10px;
}

/* [新增] 工作流浮窗样式 */
.workflow-title {
  font-weight: bold;
  color: var(--accent-color);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* [新增] 弹窗输入框样式 */
.prompt-input {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-primary);
}


.thinking-content.expanded {
  max-height: 18em !important;
  /* 展开：最多10行 × 1.8行高 */
  overflow-y: auto;
  /* [修复] 确保滚动条可见且可用 */
  scrollbar-width: thin;
  scrollbar-color: var(--accent-color) rgba(0, 0, 0, 0.2);
}

.thinking-content.expanded::-webkit-scrollbar {
  width: 8px;
}

.thinking-content.expanded::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.thinking-content.expanded::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 4px;
}

.thinking-content.expanded::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
  opacity: 0.8;
}

.thinking-process-container.expanded .thinking-content {
  position: relative;
  /* [修复] 改为relative，避免点击区域问题 */
  top: auto;
  left: auto;
  right: auto;
  z-index: 10;
  background-color: var(--bg-surface);
  border: 1px solid var(--accent-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  max-height: 18em;
  /* 展开态统一为最多10行 */
  overflow-y: auto;
  border-radius: 0 0 8px 8px;
  /* [修复] 确保滚动条可见且可用 */
  scrollbar-width: thin;
  scrollbar-color: var(--accent-color) rgba(0, 0, 0, 0.2);
  /* [修复] 确保在橙色模式下也能正常工作 */
  pointer-events: auto;
}

/* [新增] 集群模式下去掉蓝色和白色，只保留橙色 */
body.group-mode-active .thinking-process-container.expanded .thinking-content {
  background-color: rgba(0, 0, 0, 0.3) !important;
  /* 深色背景，去掉白色 */
  border: 1px solid #e6a23c !important;
  /* 橙色边框 */
  box-shadow: 0 10px 30px rgba(230, 162, 60, 0.3) !important;
  /* 橙色阴影 */
  scrollbar-color: #e6a23c rgba(0, 0, 0, 0.2) !important;
  /* 橙色滚动条，去掉蓝色 */
  color: #e6a23c !important;
  /* 橙色文字，去掉白色 */
}

.thinking-process-container.expanded .thinking-content::-webkit-scrollbar {
  width: 8px;
}

.thinking-process-container.expanded .thinking-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.thinking-process-container.expanded .thinking-content::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 4px;
}

.thinking-process-container.expanded .thinking-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
  opacity: 0.8;
}

/* [新增] 集群模式下滚动条使用橙色，去掉蓝色 */
body.group-mode-active .thinking-process-container.expanded .thinking-content::-webkit-scrollbar-thumb {
  background: #e6a23c !important;
  /* 橙色滚动条，去掉蓝色 */
}

body.group-mode-active .thinking-process-container.expanded .thinking-content::-webkit-scrollbar-thumb:hover {
  background: #f0b85c !important;
  /* 悬停时稍亮的橙色 */
}

/* [删除] 此样式已在上方定义，避免冲突 */

.prompt-display {
  position: relative;
  transition: all 0.3s ease;
  z-index: 50;
}

.prompt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

#prompt-display-area {
  width: 100%;
  height: 60px;
  transition: height 0.3s ease;
  border: 1px solid var(--border-color);
}

.prompt-display.editing {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  width: calc(100% - 20px);
  background-color: var(--bg-surface);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  padding: 15px;
  border: 1px solid var(--accent-color);
  border-radius: 8px;
}

.prompt-display.editing #prompt-display-area {
  height: 400px;
  overflow-y: auto;
  background-color: var(--bg-input);
}

#prompt-edit-buttons {
  display: flex;
  gap: 12px;
}

#prompt-edit-buttons button {
  border-radius: 50px !important;
  background-color: transparent !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-weight: normal !important;
  color: rgba(253, 253, 253, 0.952) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 0 24px !important;
  box-shadow: none !important;
}

#btn-save-prompt {
  border-color: var(--success-color) !important;
}

#btn-save-prompt:hover {
  color: #fff !important;
  border-color: #85ce61 !important;
  box-shadow: 0 0 10px rgba(103, 194, 58, 0.6), inset 0 0 8px rgba(103, 194, 58, 0.2) !important;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}

#btn-reset-prompt {
  border-color: var(--warning-color) !important;
}

#btn-reset-prompt:hover {
  color: #fff !important;
  border-color: #ebb563 !important;
  box-shadow: 0 0 10px rgba(230, 162, 60, 0.6), inset 0 0 8px rgba(230, 162, 60, 0.2) !important;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}

#btn-cancel-prompt {
  border-color: var(--border-highlight) !important;
}

#btn-cancel-prompt:hover {
  color: #fff !important;
  border-color: #a0cfff !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.editor-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px dashed var(--border-color);
}

.editor-header input#note-editor-title {
  flex-grow: 1;
  width: auto;
  max-width: none;
  margin-right: 0;
}

.qr-card {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 25px;
  text-align: center;
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, border-color 0.3s ease;
  position: relative;
  z-index: 1;
}

@keyframes neonPulse {
  0% {
    box-shadow: 0 0 5px var(--accent-color), 0 0 10px rgba(0, 0, 0, 0.5);
  }

  50% {
    box-shadow: 0 0 20px var(--accent-color), 0 0 35px var(--accent-hover);
    border-color: var(--accent-hover);
  }

  100% {
    box-shadow: 0 0 5px var(--accent-color), 0 0 10px rgba(0, 0, 0, 0.5);
  }
}

.qr-card:hover {
  transform: translateY(-5px);
  animation: neonPulse 3s infinite ease-in-out;
  z-index: 2;
}

[data-theme="personal"] .settings-menu-item.active {
  border-left: 4px solid var(--accent-hover) !important;
  background: linear-gradient(to right, var(--accent-glow), transparent) !important;
  background-color: transparent !important;
  color: #fff !important;
}

[data-theme="personal"] button,
[data-theme="personal"] .button-like-label {
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
  background: transparent !important;
}

[data-theme="personal"] button:hover,
[data-theme="personal"] .button-like-label:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: 0 0 15px var(--accent-color) !important;
  color: #fff !important;
}

[data-theme="personal"] button.active,
[data-theme="personal"] button:active,
[data-theme="personal"] .tab-link.active {
  /* background: var(--accent-color) !important; */
  color: #fff !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 20px var(--accent-hover) !important;
}

[data-theme="personal"] .tab-link.active::after {
  background: linear-gradient(90deg, transparent 0%, var(--accent-hover) 50%, transparent 100%) !important;
  box-shadow: 0 -2px 8px var(--accent-hover);
}

[data-theme="personal"] .settings-menu-item.active {
  border-left: 4px solid var(--accent-color) !important;
  box-shadow: inset 5px 0 15px -5px var(--accent-color), 0 0 10px var(--accent-glow) !important;
  background: linear-gradient(to right, var(--accent-glow), transparent) !important;
  background-color: transparent !important;
  color: #fff !important;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.settings-header {
  margin-top: 0;
  margin-bottom: 30px !important;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
  font-size: 18px;
  text-align: center;
}

.theme-options-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  column-gap: 20px;
  row-gap: 25px;
  align-items: center;
}

/* Content Library Green Arrow Indicator */
.note-selected-dot {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #2ecc71;
  /* Green color */
  margin-right: 6px;
  vertical-align: middle;
}

/* Icon Only Button */
.icon-only-btn {
  background: none !important;
  border: none !important;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  font-size: 14px;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

.icon-only-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.theme-options-grid label {
  text-align: right;
  font-weight: bold;
  color: var(--text-secondary);
  margin-right: 0 !important;
}

input[type="color"] {
  height: 36px;
  width: 60px;
  padding: 2px;
  cursor: pointer;
  border-radius: 4px;
}

.toggle-password-btn {
  all: unset !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  cursor: pointer !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s ease !important;
}

.toggle-password-btn:hover {
  opacity: 1 !important;
  background: transparent !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
}

.toggle-password-btn:active {
  transform: translateY(-50%) !important;
  background: transparent !important;
}

.toggle-password-btn::before {
  content: "🙈";
  display: block;
}

.toggle-password-btn.visible::before {
  content: "👁️";
}

.toggle-password-btn {
  appearance: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  z-index: 20 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: 0.6 !important;
  transition: opacity 0.2s !important;
}

.toggle-password-btn:hover {
  opacity: 1 !important;
  background: transparent !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
}

.toggle-password-btn:active {
  transform: translateY(-50%) scale(1) !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.toggle-password-btn::before {
  content: "🙈";
  display: block;
}

.toggle-password-btn.visible::before {
  content: "👁️";
}

[data-theme="light"] {
  --bg-app: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-nav: #000000;
  --bg-surface: #ffffff;
  --bg-input: #ffffff;
  --bg-secondary: #f8f9fa;
  --text-primary: #1f1f1f;
  --text-secondary: #5f6368;
  --text-muted: #9aa0a6;
  --border-color: #e0e6ed;
  --border-highlight: #d1d9e6;
  --shadow-card: 0 2px 6px rgba(60, 64, 67, 0.05), 0 4px 16px rgba(60, 64, 67, 0.05);
  --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] body {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;
}

[data-theme="light"] .tab-nav {
  background-color: #000000 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .tab-link {
  background-color: #ffffff !important;
  border: 1px solid var(--border-color) !important;
  color: #000000 !important;
}

[data-theme="light"] .tab-link:hover {
  background-color: #f2f2f2 !important;
  border-color: #000000 !important;
  color: #000000 !important;
}

[data-theme="light"] .tab-link.active {
  background-color: #ffffff !important;
  border-color: #000000 !important;
  color: #000000 !important;
}

[data-theme="light"] .tab-link:hover *,
[data-theme="light"] .tab-link:hover svg,
[data-theme="light"] .tab-link:hover i,
[data-theme="light"] .tab-link.active *,
[data-theme="light"] .tab-link.active svg,
[data-theme="light"] .tab-link.active i {
  color: #000000 !important;
  fill: #000000 !important;
}

[data-theme="light"] .settings-menu {
  background-color: #000000 !important;
}

[data-theme="light"] .settings-menu-item {
  background-color: #ffffff !important;
  border-color: var(--border-color) !important;
  color: #000000 !important;
}

[data-theme="light"] .settings-menu-item:hover {
  background-color: #f2f2f2 !important;
  border-color: #000000 !important;
  color: #000000 !important;
}

[data-theme="light"] .settings-menu-item.active {
  background-color: #ffffff !important;
  border-color: #000000 !important;
  color: #000000 !important;
}

[data-theme="light"] #tab-settings .settings-menu {
  background-color: #ffffff !important;
}

[data-theme="light"] #tab-settings .settings-menu .settings-menu-item {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

[data-theme="light"] #tab-settings .settings-menu .settings-menu-item:hover {
  background-color: #111111 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

[data-theme="light"] #tab-settings .settings-menu .settings-menu-item.active {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

[data-theme="light"] .tool-runner-header,
[data-theme="light"] .tool-modal-header {
  background-color: #000000 !important;
  border-bottom: none !important;
}

[data-theme="light"] .modal-dialog,
[data-theme="light"] .modal-content,
[data-theme="light"] .user-personalization-content,
[data-theme="light"] .p13n-content,
[data-theme="light"] .p13n-pane {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: var(--border-color) !important;
}

[data-theme="light"] .modal-dialog input,
[data-theme="light"] .modal-dialog textarea,
[data-theme="light"] .modal-dialog select,
[data-theme="light"] .p13n-pane input,
[data-theme="light"] .p13n-pane textarea,
[data-theme="light"] .p13n-pane select {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: var(--border-color) !important;
}

[data-theme="light"] .p13n-menu,
[data-theme="light"] .my-menu {
  background-color: #000000 !important;
  border-color: var(--border-color) !important;
}

[data-theme="light"] .p13n-menu-item,
[data-theme="light"] .my-menu-item {
  background-color: #ffffff !important;
  border: 1px solid var(--border-color) !important;
  color: #000000 !important;
  box-shadow: none !important;
}

[data-theme="light"] .p13n-menu-item.active,
[data-theme="light"] .my-menu-item.active {
  border-color: #000000 !important;
}

[data-theme="light"] input[type="text"]:focus,
[data-theme="light"] input[type="password"]:focus,
[data-theme="light"] input[type="number"]:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: #000000 !important;
  box-shadow: none !important;
  outline: none !important;
}

[data-theme="light"] button,
[data-theme="light"] .tab-link,
[data-theme="light"] .button-like-label,
[data-theme="light"] .settings-menu-item {
  border-radius: 8px !important;
}

/* [新增] 浅色模式下主菜单按钮增加内边距 */
[data-theme="light"] .settings-menu-item {
  padding: 22px 25px 22px 10px !important;
  /* 上下增加10px，右边增加15px */
}

/* [新增] 浅色模式下顶部主菜单按钮增加内边距 */
[data-theme="light"] .tab-link {
  padding: 10px 35px 10px 20px !important;
  /* 上下增加10px，右边增加15px */
}

[data-theme="light"] .tab-link.active {
  border-radius: 8px 8px 0 0 !important;
  border-radius: 8px !important;
}

[data-theme="light"] body {
  background-color: #ffffff !important;
  background-image: none !important;
  background-size: auto !important;
}

div.password-wrapper .toggle-password-btn {
  appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  z-index: 20 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  opacity: 0.7 !important;
  color: var(--text-secondary) !important;
  transition: opacity 0.2s !important;
}

div.password-wrapper .toggle-password-btn:hover {
  opacity: 1 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: var(--text-primary) !important;
  transform: translateY(-50%) !important;
}

div.password-wrapper .toggle-password-btn:active {
  transform: translateY(-50%) scale(1) !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
}

div.password-wrapper .toggle-password-btn::before {
  content: "🙈";
  display: block;
}

div.password-wrapper .toggle-password-btn.visible::before {
  content: "👁️";
}

[data-theme="light"] button:not(.active),
[data-theme="light"] .tab-link:not(.active),
[data-theme="light"] .button-like-label:not(.active),
[data-theme="light"] .theme-toggle-btn:not(.active) {
  background-color: #ffffff !important;
  border: 1px solid var(--border-color) !important;
  color: #000000 !important;
  box-shadow: none !important;
}

[data-theme="light"] .icon-only-btn:not(.active) {
  border: none !important;
}

[data-theme="light"] button:not(.active):hover,
[data-theme="light"] .tab-link:not(.active):hover,
[data-theme="light"] .theme-toggle-btn:not(.active):hover {
  background-color: #f2f2f2 !important;
  border-color: #000000 !important;
  color: #000000 !important;
}

/* 浅色模式下按钮hover时，图标和文字使用accent-color */
[data-theme="light"] button:not(.active):hover *,
[data-theme="light"] button:not(.active):hover svg,
[data-theme="light"] button:not(.active):hover i,
[data-theme="light"] button:not(.active):hover .icon,
[data-theme="light"] .button-like-label:not(.active):hover *,
[data-theme="light"] .button-like-label:not(.active):hover svg,
[data-theme="light"] .button-like-label:not(.active):hover i,
[data-theme="light"] .tab-link:not(.active):hover *,
[data-theme="light"] .tab-link:not(.active):hover svg,
[data-theme="light"] .tab-link:not(.active):hover i,
[data-theme="light"] .theme-toggle-btn:not(.active):hover *,
[data-theme="light"] .theme-toggle-btn:not(.active):hover svg,
[data-theme="light"] .theme-toggle-btn:not(.active):hover i {
  color: #000000 !important;
  fill: #000000 !important;
}

/* 浅色模式下图标按钮hover时使用accent-color */
[data-theme="light"] .icon-only-btn:hover {
  color: var(--accent-color) !important;
  background: rgba(26, 115, 232, 0.1) !important;
}

[data-theme="light"] .icon-only-btn:hover *,
[data-theme="light"] .icon-only-btn:hover svg,
[data-theme="light"] .icon-only-btn:hover i {
  color: var(--accent-color) !important;
  fill: var(--accent-color) !important;
}

/* 浅色模式下图标方按钮hover时使用accent-color */
[data-theme="light"] .icon-square-btn:hover {
  background: rgba(26, 115, 232, 0.1) !important;
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

[data-theme="light"] .icon-square-btn:hover *,
[data-theme="light"] .icon-square-btn:hover svg,
[data-theme="light"] .icon-square-btn:hover i {
  color: var(--accent-color) !important;
  fill: var(--accent-color) !important;
}

/* 浅色模式下聊天图标按钮hover时使用accent-color */
[data-theme="light"] .chat-icon-btn:hover {
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
}

[data-theme="light"] .chat-icon-btn:hover *,
[data-theme="light"] .chat-icon-btn:hover svg,
[data-theme="light"] .chat-icon-btn:hover i {
  color: var(--accent-color) !important;
  fill: var(--accent-color) !important;
}

[data-theme="light"] button.active,
[data-theme="light"] .tab-link.active,
[data-theme="light"] .theme-toggle-btn.active,
[data-theme="light"] .settings-menu-item.active {
  background-color: #ffffff !important;
  border-color: #000000 !important;
  color: #000000 !important;
  box-shadow: none !important;
}

[data-theme="light"] .settings-menu {
  background-color: #000000 !important;
}

[data-theme="light"] .settings-menu-item {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

[data-theme="light"] .settings-menu-item:hover {
  background-color: #f2f2f2 !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

.input-buttons,
.tool-controls-group,
#prompt-edit-buttons,
.data-management-buttons,
.theme-toggle-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px !important;
}

/* 内容库主按钮区域：两列布局 */
.library-controls {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
}

.library-controls button,
.library-controls label {
  width: 100%;
  justify-content: center;
}

.theme-toggle-group {
  justify-content: flex-start;
}

.input-buttons button,
.tool-controls-group button,
.library-controls button,
.library-controls label,
.theme-toggle-group button {
  margin: 0 !important;
}

[data-theme="light"] .lib-action-btn.blue {
  border-color: #666 !important;
  color: #333 !important;
}

[data-theme="light"] .lib-action-btn.blue:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
}

.prompt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  min-height: 15px;
  padding: 0;
}

/* [新增] Prompt内容包装器 - 支持收起展开 */
#prompt-content-wrapper {
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}

#prompt-content-wrapper.collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
}

#prompt-display-area {
  background-color: rgba(5, 8, 15, 0.5) !important;
  /* 使用和主菜单一样的深蓝色背景 */
  color: rgba(125, 143, 149, 0.838);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

#prompt-display-area:hover {
  background-color: rgba(5, 8, 15, 0.7) !important;
  /* 悬停时稍微加深 */
  color: rgba(255, 255, 255, 0.87);
  border-color: var(--border-color);
}

.prompt-display.editing #prompt-display-area {
  background-color: var(--bg-input);
  color: #ffffff !important;
  border: 1px solid var(--accent-color);
  cursor: text;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

#prompt-edit-buttons {
  display: flex;
  gap: 10px;
}

div.password-wrapper .toggle-password-btn {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

div.password-wrapper .toggle-password-btn:active {
  transform: translateY(-50%) scale(1) !important;
}

.input-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px !important;
  justify-content: center;
}

#keyword-list {
  padding: 0;
}

#keyword-list li {
  list-style: none;
  position: relative;
  padding-left: 24px;
}

#keyword-list li::before {
  content: "📝";
  font-size: 12px;
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-color) !important;
  opacity: 0.8;
}

#keyword-list li:hover::before {
  opacity: 1;
  text-shadow: 0 0 5px var(--accent-glow);
}

#status-right {
  position: fixed !important;
  bottom: calc(8px + env(safe-area-inset-bottom)) !important;
  right: 20px !important;
  bottom: 2px !important;
  left: auto !important;
  color: var(--accent-color) !important;
  font-size: 12px;
  font-weight: bold;
  z-index: 2000;
  background-color: transparent;
  opacity: 0.9;
  pointer-events: none;
}

.chat-action-group {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-left: 12px;
  height: 80px;
}

/* =========================================
   科技感发送按钮 - 带光效 + 星星闪耀
   ========================================= */
.action-btn-large {
  position: relative;
  height: 100% !important;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  font-size: 28px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(64, 158, 255, 0.8) !important;
  /* 加粗边框 */
  display: flex !important;
  flex-direction: column !important;
  /* 改为垂直布局 */
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  cursor: pointer;
  overflow: hidden !important;
  /* [修改] 改为hidden，确保星星只在内部显示 */
  transition: all 0.3s ease;

  /* [修改] 透明背景 */
  background: transparent !important;

  /* 发光效果 */
  box-shadow: none;
}

/* 萤火虫粒子动画层 - 多个粒子向上飘动 */
.action-btn-large::before,
.action-btn-large::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  z-index: 0;
}

/* 第一组萤火虫 - 蓝色系 */
.action-btn-large::before {
  box-shadow: none;
  animation: firefly-float-1 4s ease-in infinite;
}

/* 第二组萤火虫 - 蓝色系（错开时间） */
.action-btn-large::after {
  box-shadow: none;
  animation: firefly-float-2 5s ease-in infinite;
  animation-delay: 1s;
}

/* 火箭图标样式 - 缩小到按钮中间，往上一点 */
.action-btn-large .rocket-icon {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
  z-index: 1;
  /* 确保在星星上方 */
}

/* 发送文字样式 */
.action-btn-large .send-text {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
  z-index: 1;
  /* 确保在星星上方 */
}

/* 悬停效果 - 增强光效 + 边框发光 */
.action-btn-large:hover {
  transform: translateY(-2px);
  border-color: rgba(64, 158, 255, 1) !important;
  box-shadow:
    0 0 30px rgba(64, 158, 255, 0.6),
    0 0 60px rgba(64, 158, 255, 0.4),
    0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 -2px 10px rgba(0, 0, 0, 0.2),
    inset 0 2px 10px rgba(255, 255, 255, 0.2);
}

.action-btn-large:hover::before {
  animation: firefly-float-1 2s ease-in infinite;
  /* 悬停时加快萤火虫飘动 */
}

.action-btn-large:hover::after {
  animation: firefly-float-2 2.5s ease-in infinite;
  animation-delay: 0.5s;
}

/* 火箭悬停时上下飞动动画 */
.action-btn-large:hover .rocket-icon {
  animation: rocket-fly 1.5s ease-in-out infinite;
}

@keyframes rocket-fly {

  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-8px);
  }
}

/* 按下效果 */
.action-btn-large:active {
  transform: translateY(0);
  box-shadow:
    0 0 15px rgba(64, 158, 255, 0.5),
    0 0 30px rgba(64, 158, 255, 0.3),
    0 2px 10px rgba(0, 0, 0, 0.3);
}

/* =========================================
   Loading 状态相关元素 - 默认隐藏
   ========================================= */

/* Loading 元素默认隐藏 */
.action-btn-large .loading-inner-mask,
.action-btn-large .loading-icon-wrapper {
  display: none;
}

/* =========================================
   Loading 状态 - 流光旋转 + 雷达扩散
   ========================================= */
.action-btn-large.loading {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  cursor: not-allowed !important;
}

/* 隐藏火箭图标 */
.action-btn-large.loading .rocket-icon {
  display: none !important;
}

/* 显示 loading 元素 */
.action-btn-large.loading .loading-inner-mask,
.action-btn-large.loading .loading-icon-wrapper {
  display: flex !important;
}

/* 雷达扩散动画层 (最底层) */
.action-btn-large.loading::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 50% !important;
  height: 50% !important;
  background: radial-gradient(circle, rgba(64, 158, 255, 0.5) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  animation: loading-radar-pulse 2s ease-out infinite !important;
  z-index: 1 !important;
}

/* 旋转流光背景层 - [修改] 加快旋转速度 */
.action-btn-large.loading::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  background: conic-gradient(from 0deg,
      transparent 0%,
      rgba(64, 158, 255, 0.1) 25%,
      rgba(64, 158, 255, 0.4) 50%,
      rgba(64, 158, 255, 0.8) 75%,
      rgba(64, 158, 255, 1) 85%,
      rgba(64, 158, 255, 0.3) 95%,
      transparent 100%) !important;
  border-radius: 50% !important;
  animation: loading-glow-spin 0.8s linear infinite !important;
  /* [修改] 从2s改为0.8s，加快速度 */
  filter: blur(8px) !important;
  z-index: 2 !important;
}

/* 内部遮罩层 - 创造流光环效果 */
.action-btn-large.loading .loading-inner-mask {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65%;
  height: 65%;
  background: #0a0a0a;
  border-radius: 50%;
  z-index: 3;
}

/* 中心图标容器 - [修改] 改为放大缩小动画 */
.action-btn-large.loading .loading-icon-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 40%;
  z-index: 4;
  align-items: center;
  justify-content: center;
  animation: loading-icon-pulse 1s ease-in-out infinite;
  /* [修改] 改为放大缩小动画 */
}

/* loading.png 图标 */
.action-btn-large.loading .loading-icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(64, 158, 255, 0.8));
}

/* =========================================
   Loading 动画 Keyframes
   ========================================= */

/* 旋转动画 */
@keyframes loading-glow-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* 雷达扩散动画 */
@keyframes loading-radar-pulse {
  0% {
    width: 50%;
    height: 50%;
    opacity: 0.8;
  }

  50% {
    width: 90%;
    height: 90%;
    opacity: 0.4;
  }

  100% {
    width: 130%;
    height: 130%;
    opacity: 0;
  }
}

/* 图标悬浮动画 */
/* [修改] 改为放大缩小动画 */
@keyframes loading-icon-pulse {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes loading-icon-float {

  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-3px) scale(1.05);
  }
}

/* =========================================
   萤火虫飘动动画 - 从粗到细向上飘
   ========================================= */
@keyframes firefly-float-1 {
  0% {
    transform: translateY(0);
    filter: blur(0px);
  }

  30% {
    filter: blur(0.3px);
  }

  60% {
    transform: translateY(-40%);
    filter: blur(0.8px);
  }

  80% {
    transform: translateY(-70%);
    filter: blur(1.5px);
    opacity: 0.5;
  }

  100% {
    transform: translateY(-100%);
    filter: blur(2px);
    opacity: 0;
  }
}

@keyframes firefly-float-2 {
  0% {
    transform: translateY(0);
    filter: blur(0px);
  }

  25% {
    filter: blur(0.2px);
  }

  55% {
    transform: translateY(-35%);
    filter: blur(0.7px);
  }

  75% {
    transform: translateY(-65%);
    filter: blur(1.3px);
    opacity: 0.6;
  }

  100% {
    transform: translateY(-100%);
    filter: blur(2px);
    opacity: 0;
  }
}

/* [废弃] 旧的外部星星动画 */
@keyframes stars-twinkle-old {
  0% {
    opacity: 0.5;
    transform: scale(1) rotate(0deg);
  }

  25% {
    opacity: 0.8;
    transform: scale(1.1) rotate(90deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
    box-shadow:
      -40px -26px 6px 2.5px var(--particle-color),
      40px -30px 5px 2px var(--particle-color),
      -42px 20px 5px 2.5px var(--particle-color),
      43px 22px 6px 2px var(--particle-color),
      -20px -41px 5px 2px var(--particle-color),
      22px 40px 5px 2.5px var(--particle-color),
      0px -45px 5px 2px var(--particle-color),
      0px 44px 6px 2.5px var(--particle-color),
      -32px 32px 4px 2px var(--particle-color),
      32px -32px 4px 2px var(--particle-color);
  }

  75% {
    box-shadow:
      -38px -24px 5px 2px var(--particle-color),
      38px -28px 4px 1.5px var(--particle-color),
      -40px 18px 4px 2px var(--particle-color),
      41px 20px 5px 1.5px var(--particle-color),
      -18px -39px 4px 1.5px var(--particle-color),
      20px 38px 4px 2px var(--particle-color),
      0px -43px 4px 1.5px var(--particle-color),
      0px 42px 5px 2px var(--particle-color),
      -30px 30px 3px 1.5px var(--particle-color),
      30px -30px 3px 1.5px var(--particle-color);
  }

  100% {
    box-shadow:
      -36px -22px 4px 1.5px var(--particle-color),
      36px -26px 3px 1px var(--particle-color),
      -38px 16px 3px 1.5px var(--particle-color),
      39px 18px 4px 1px var(--particle-color),
      -16px -37px 3px 1px var(--particle-color),
      18px 36px 3px 1.5px var(--particle-color),
      0px -41px 3px 1px var(--particle-color),
      0px 40px 4px 1.5px var(--particle-color),
      -28px 28px 2px 1px var(--particle-color),
      28px -28px 2px 1px var(--particle-color);
  }

  75% {
    opacity: 0.8;
    transform: scale(1.1) rotate(270deg);
  }

  100% {
    opacity: 0.5;
    transform: scale(1) rotate(360deg);
  }
}

.action-btn-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 40px;
}

.action-btn-small {
  flex: 1;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  max-height: 35px;
}

.voice-button-container,
.input-buttons {
  display: none !important;
}

/* ================================================================= */
/* [需求优化] 深色模式 & 个性风格按钮交互样式 (线框/实心区分) */
/* ================================================================= */

/* [新增] 深色模式下主菜单按钮增加内边距 */
[data-theme="dark"] .settings-menu-item {
  padding: 22px 25px 22px 10px !important;
  /* 上下增加10px，右边增加15px */
}

/* [新增] 深色模式下顶部主菜单按钮增加内边距 */
[data-theme="dark"] .tab-link {
  padding: 10px 35px 10px 20px !important;
  /* 上下增加10px，右边增加15px */
}

/* 2. 未选中悬停状态：文字和边框变亮 */
[data-theme="dark"] button:not(.active):hover,
[data-theme="dark"] .tab-link:not(.active):hover,
[data-theme="dark"] .theme-toggle-btn:not(.active):hover,
[data-theme="personal"] button:not(.active):hover,
[data-theme="personal"] .tab-link:not(.active):hover,
[data-theme="personal"] .theme-toggle-btn:not(.active):hover {
  background-color: rgba(0, 0, 0, 0.4) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border-color: var(--accent-color) !important;
  color: var(--text-primary) !important;
}

/* 3. 选中状态：保持实心主色 (不需要额外写，之前的 .active 样式已经覆盖，但为了保险可以加固) */
[data-theme="dark"] button.active,
[data-theme="dark"] .tab-link.active,
[data-theme="personal"] button.active,
[data-theme="personal"] .tab-link.active {
  /* background-color: var(--accent-color) !important; */
  /* border-color: var(--accent-color) !important; */
  color: #fff !important;
  box-shadow: 0 0 10px var(--accent-glow) !important;
}

/* ================================================================= */
/* [需求优化] 数据管理按钮特定颜色 */
/* ================================================================= */

/* 1. 导出全部数据 (主色) */
#btn-export-data {
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
  /* 浅色模式下背景透明，深色模式下半透明或透明均可，这里统一透明 */
  background-color: transparent !important;
}

#btn-export-data:hover {
  background-color: var(--accent-glow) !important;
  color: #fff !important;
  box-shadow: 0 0 10px var(--accent-glow) !important;
}

/* 2. 清除应用数据 (红色) */
#btn-clear-data {
  border-color: var(--danger-color) !important;
  color: var(--danger-color) !important;
  background-color: transparent !important;
  opacity: 1 !important;
  /* 防止被 .dim-button 降低不透明度 */
}

#btn-clear-data:hover {
  background-color: rgba(245, 108, 108, 0.1) !important;
  /* 淡淡的红色背景 */
  color: #fff !important;
  box-shadow: 0 0 10px rgba(245, 108, 108, 0.4) !important;
}

/* 3. 导入数据 (橙色) */
/* 注意：导入按钮是一个 label 包裹 input，可能有 .button-like-label 类 */
.data-management-buttons .button-like-label,
#import-data-input+span {
  /* 如果选择器不够准，可以用层级 */
  /* 实际上您的 HTML 结构是 <label class="button-like-label warning-button"> */
}

/* [新增] 数据管理按钮区域的lib-action-btn样式 */
.data-management-buttons .lib-action-btn {
  padding: 8px 16px;
  border: 1px solid;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.data-management-buttons .lib-action-btn.orange {
  border-color: #e6a23c !important;
  color: #e6a23c !important;
  opacity: 0.8;
}

.data-management-buttons .lib-action-btn.orange:hover {
  background-color: rgba(230, 162, 60, 0.15) !important;
  color: #fff !important;
  opacity: 1;
  box-shadow: 0 0 10px rgba(230, 162, 60, 0.4) !important;
}

/* [新增] 确保label标签的lib-action-btn样式正确 */
.data-management-buttons label.lib-action-btn {
  margin: 0;
}

.data-management-buttons label.lib-action-btn input[type="file"] {
  display: none;
}

/* 直接针对该区域内的 .warning-button 修改 */
.data-management-buttons .warning-button {
  border-color: var(--warning-color) !important;
  color: var(--warning-color) !important;
  background-color: transparent !important;
}

.data-management-buttons .warning-button:hover {
  background-color: rgba(230, 162, 60, 0.1) !important;
  /* 淡淡的橙色 */
  color: #fff !important;
  box-shadow: 0 0 10px rgba(230, 162, 60, 0.4) !important;
}

/* 浅色模式下的微调 (确保文字颜色够深可见) */
[data-theme="light"] #btn-export-data {
  color: var(--accent-color) !important;
}

[data-theme="light"] #btn-clear-data {
  color: var(--danger-color) !important;
}

[data-theme="light"] .data-management-buttons .warning-button {
  color: var(--warning-color) !important;
}

/* ================================================================= */
/* [修复] 数据管理 - 导入按钮强制橙色 */
/* ================================================================= */

/* 使用 [data-theme] 前缀增加权重，强制覆盖掉通用的线框样式 */
[data-theme] .data-management-buttons .lib-action-btn.orange {
  border-color: #e6a23c !important;
  color: #e6a23c !important;
  background-color: transparent !important;
  opacity: 0.8 !important;
}

/* 悬停状态：橙色发光 */
[data-theme] .data-management-buttons .lib-action-btn.orange:hover {
  background-color: rgba(230, 162, 60, 0.15) !important;
  border-color: #e6a23c !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(230, 162, 60, 0.5) !important;
  opacity: 1 !important;
}

/* 兼容旧的warning-button类名 */
[data-theme] .data-management-buttons .warning-button {
  border-color: var(--warning-color) !important;
  color: var(--warning-color) !important;
  background-color: transparent !important;
  opacity: 0.8 !important;
  /* 保持一点通透感，但要有颜色 */
}

/* 悬停状态：橙色发光 */
[data-theme] .data-management-buttons .warning-button:hover {
  background-color: rgba(230, 162, 60, 0.15) !important;
  /* 淡淡的橙色背景 */
  border-color: var(--warning-color) !important;
  color: #fff !important;
  /* 文字变白 */
  box-shadow: 0 0 10px rgba(230, 162, 60, 0.5) !important;
  /* 橙色光晕 */
  opacity: 1 !important;
}

/* ================================================================= */
/* [新增] 数据管理 - 服务器状态检测卡片 */
/* ================================================================= */

.server-status-card {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 50%;
}

.server-status-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.server-status-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.server-status-title {
  font-weight: 600;
  color: var(--text-primary);
}

.server-status-desc {
  font-size: 0.9em;
  color: var(--text-secondary);
}

.server-status-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 0;
  margin-top: auto;
  font-size: 0.8em;
  padding: 2px 4px;
}

.server-status-text {
  min-width: auto;
  white-space: nowrap;
  font-size: 1.2em;
  font-weight: 600;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color);
  box-shadow: 0 0 0 1px var(--border-color);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.status-dot.online {
  background: #67c23a;
  box-shadow: 0 0 8px rgba(103, 194, 58, 0.6);
}

.status-dot.offline {
  background: #f56c6c;
  box-shadow: 0 0 8px rgba(245, 108, 108, 0.6);
}

.status-dot.unknown {
  background: var(--border-color);
  box-shadow: 0 0 0 1px var(--border-color);
}

/* [新增] 顶部导航栏服务器状态样式 */
.top-server-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.top-server-status:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.top-server-status-text {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color 0.2s;
}

.icon-btn-small {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.icon-btn-small:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: rgba(64, 158, 255, 0.1);
}

.server-status-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--text-secondary);
  font-size: 0.9em;
}

.server-status-hint {
  color: var(--text-secondary);
}

.purchase-content {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
  align-items: start;
}

.purchase-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-surface);
}

.purchase-image {
  width: 220px;
  height: 220px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: #0b121b;
}

.purchase-right .full-width {
  width: 100%;
}

.api-top-test-panel {
  margin: 0 auto 16px;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-surface);
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.api-top-test-panel .api-top-row {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.api-top-test-panel .api-top-row label {
  font-weight: 600;
  margin-bottom: 0;
}

.api-top-test-panel #platform-checkboxes {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.placeholder-card {
  padding: 16px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  background: var(--bg-surface);
}

.notice-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.notice-filters,
.notice-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.notice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notice-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-surface);
  align-items: center;
}

.notice-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
}

.notice-status {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: #fff;
}

.notice-status.unread {
  background: #f56c6c;
}

.notice-status.read {
  background: #67c23a;
}

.notice-title {
  font-weight: 600;
  color: var(--text-primary);
}

.notice-content {
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ================================================================= */
/* [修复] 内容库功能按钮颜色恢复 */
/* ================================================================= */

/* 1. 绿色按钮 (添加分类/笔记) */
[data-theme] .lib-action-btn.green {
  border-color: #67c23a !important;
  color: #67c23a !important;
  background-color: transparent !important;
  opacity: 0.8;
}

[data-theme] .lib-action-btn.green:hover {
  background-color: rgba(103, 194, 58, 0.15) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(103, 194, 58, 0.5) !important;
  opacity: 1;
}

/* 2. 橙色按钮 (编辑选中) */
[data-theme] .lib-action-btn.orange {
  border-color: #e6a23c !important;
  color: #e6a23c !important;
  background-color: transparent !important;
  opacity: 0.8;
}

[data-theme] .lib-action-btn.orange:hover {
  background-color: rgba(230, 162, 60, 0.15) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(230, 162, 60, 0.5) !important;
  opacity: 1;
}

/* 3. 红色按钮 (删除选中) */
[data-theme] .lib-action-btn.red {
  border-color: #f56c6c !important;
  color: #f56c6c !important;
  background-color: transparent !important;
  opacity: 0.8;
}

[data-theme] .lib-action-btn.red:hover {
  background-color: rgba(245, 108, 108, 0.15) !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(245, 108, 108, 0.5) !important;
  opacity: 1;
}

/* 4. 蓝色/青色按钮 (导入.txt - 取消选中) */
/* 深色/个性模式下显示为蓝色 */
[data-theme="dark"] .lib-action-btn.blue,
[data-theme="personal"] .lib-action-btn.blue {
  border-color: #409eff !important;
  color: #409eff !important;
  background-color: transparent !important;
  opacity: 0.8;
}

[data-theme="dark"] .lib-action-btn.blue:hover,
[data-theme="personal"] .lib-action-btn.blue:hover {
  background-color: transparent !important;
  background: transparent !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.5) !important;
  opacity: 1;
}

/* [保留] 浅色模式下，蓝色按钮变为深灰色 (您之前的需求) */
[data-theme="light"] .lib-action-btn.blue {
  border-color: #666 !important;
  color: #333 !important;
}

/* ================================================================= */
/* [修复] 智能体控制栏按钮颜色恢复 */
/* ================================================================= */

/* 1. 添加智能体 (蓝色) */
[data-theme] #btn-add-agent {
  border-color: #409eff !important;
  color: #409eff !important;
  background-color: transparent !important;
  opacity: 0.9 !important;
}

[data-theme] #btn-add-agent:hover {
  background-color: rgba(64, 158, 255, 0.15) !important;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.5) !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* 2. 编辑名称 (橙色 - 对应“编辑”) */
[data-theme] #btn-edit-agent-name {
  border-color: #e6a23c !important;
  color: #e6a23c !important;
  background-color: transparent !important;
  opacity: 0.9 !important;
}

[data-theme] #btn-edit-agent-name:hover {
  background-color: rgba(230, 162, 60, 0.15) !important;
  box-shadow: 0 0 10px rgba(230, 162, 60, 0.5) !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* 3. 个性化 (绿色) */
[data-theme] #btn-personalize-agent {
  border-color: #67c23a !important;
  color: #67c23a !important;
  background-color: transparent !important;
  opacity: 0.9 !important;
}

[data-theme] #btn-personalize-agent:hover {
  background-color: rgba(103, 194, 58, 0.15) !important;
  box-shadow: 0 0 10px rgba(103, 194, 58, 0.5) !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* 4. 删除智能体 (红色 - 强化 danger-button) */
[data-theme] .danger-button {
  border-color: #f56c6c !important;
  color: #f56c6c !important;
  background-color: transparent !important;
  opacity: 0.9 !important;
}

[data-theme] .danger-button:hover {
  background-color: rgba(245, 108, 108, 0.15) !important;
  box-shadow: 0 0 10px rgba(245, 108, 108, 0.5) !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* ================================================================= */
/* [需求优化] 聊天输入区域 & 思考框 */
/* ================================================================= */

/* --- 1. 思考框样式调整 --- */
.thinking-header {
  /* 强制两端对齐，让标题在左，箭头在右 */
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-right: 15px !important;
  /* 右侧留点空隙 */
}

.thinking-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 旋转箭头动画 */
.thinking-toggle-icon,
.toggle-icon {
  font-size: 12px;
  transition: transform 0.3s ease, color 0.3s ease;
  opacity: 0.7;
}

/* [修改] 个体模式下展开时箭头为蓝色 */
.thinking-process-container.expanded .thinking-toggle-icon,
.thinking-process-container.expanded .toggle-icon {
  transform: rotate(180deg);
  color: var(--accent-color) !important;
  /* 蓝色 */
}

/* [新增] 集群模式下展开时箭头为橙色 */
body.group-mode-active .thinking-process-container.expanded .thinking-toggle-icon,
body.group-mode-active .thinking-process-container.expanded .toggle-icon {
  color: #e6a23c !important;
  /* 橙色 */
}

/* 思考中的转圈圈 */
.thinking-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  vertical-align: middle;
  position: relative;
  top: 2px;
}

.thinking-spinner-icon {
  width: 15px;
  height: 15px;
  display: block;
  animation: gemini-loading 1.1s ease-in-out infinite;
  transform-origin: center;
  border: none;
  outline: none;
}

@keyframes gemini-loading {
  0% {
    transform: rotate(0deg) scale(0.92);
    opacity: 0.85;
  }

  50% {
    transform: rotate(180deg) scale(1.06);
    opacity: 1;
  }

  100% {
    transform: rotate(360deg) scale(0.92);
    opacity: 0.85;
  }
}


/* --- 2. 输入框样式 (主色边框 + 个性光效) --- */
#user-input-area {
  border: 1px solid var(--border-color) !important;
  transition: all 0.2s ease;
  box-shadow: none;
}

/* 聚焦时 */
#user-input-area:focus {
  border: 1px solid var(--accent-color) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* [个性风格] 特有光效：点点光 */
[data-theme="personal"] #user-input-area:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: transparent !important;
}

/* 个性化主题下，默认状态也保持相同的尺寸 */
[data-theme="personal"] .chat-input-pill {
  border: 3px solid #223857 !important;
  border-radius: 999px;
  padding: 5px 15px !important;
  display: flex;
  align-items: center;
  /* [修复] 个性化主题下也使用内容自适应宽度 */
  width: auto !important;
  flex: 0 0 auto !important;
  transition: all 0.3s ease;
}

/* 个性化主题下，内部输入框去掉边框和多余内边距 */
[data-theme="personal"] .chat-input-pill #user-input-area {
  border: none !important;
  padding: 8px 10px !important;
  background-color: transparent !important;
  margin: 0 !important;
  /* [修复] 输入框宽度基础上再增加200像素宽度 */
  flex: 1;
  min-width: 200px;
  /* [修复] 最小宽度增加200px */
  max-width: none !important;
  box-sizing: border-box !important;
}

/* [修复] 个性化主题下，确保input-text-wrapper使用flex布局 */
[data-theme="personal"] .input-text-wrapper {
  flex-grow: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* [修复] 个性化主题下，确保input-mode-icon使用relative定位 */
[data-theme="personal"] .input-mode-icon {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 5 !important;
}

/* 个性化主题下，当鼠标悬停在输入框模块上时，显示颜色边框 */
[data-theme="personal"] .input-area:hover .chat-input-pill,
[data-theme="personal"] .chat-input-pill:hover {
  border: 3px solid var(--accent-color) !important;
  box-shadow: 0 0 15px rgba(64, 158, 255, 0.2) !important;
}

/* 个性化主题下，当输入框聚焦时，外层容器显示3px主题色边框 */
[data-theme="personal"] .chat-input-pill:has(#user-input-area:focus) {
  border: 3px solid var(--accent-color) !important;
  background-color: #0a0f1b !important;
  box-shadow: 0 0 20px rgba(64, 158, 255, 0.3) !important;
}

/* 确保所有输入框的 focus 状态也使用新背景色 */
[data-theme="personal"] input:focus,
[data-theme="personal"] textarea:focus,
[data-theme="personal"] select:focus,
[data-theme="personal"] [contenteditable="true"]:focus {
  background-color: #0a0f1b !important;
}


/* --- 3. 图片按钮放大 & 居中 --- */
.input-area {
  display: flex;
  align-items: center;
  /* 垂直居中对齐 */
  position: relative;
}

.attach-btn {
  /* 尺寸调整：高度设为输入框(约80px)的2/3，即约50px */
  width: 50px !important;
  height: 50px !important;
  font-size: 28px !important;
  /* 图标放大 */

  /* [修复] 居中显示 - 确保图标和边框都居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  /* 样式美化 */
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  margin-right: 12px;
  /* 与输入框的距离 */
  flex-shrink: 0;
  /* 防止被压缩 */

  /* [修复] 确保边框居中 */
  box-sizing: border-box;
  border: none !important;
  /* [修改] 个体模式下没有边框 */
}

.attach-btn input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.attach-btn:hover {
  background-color: var(--bg-input);
  transform: scale(1.05);
}

/* ================================================================= */
/* [新增] 图片上传预览与样式控制 */
/* ================================================================= */

/* ================================================================= */
/* [修复] 图片上传预览与滚动条 */
/* ================================================================= */

/* 1. 预览区域容器 - 显示在输入框上方 */
#attachment-preview-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin: 0 15px 10px 15px;
  /* [修复] 下方留间距，与输入框分开 */
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px dashed var(--border-color);

  /* [关键修复] 确保横向滚动条只出现在这里 */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: calc(100% - 30px);
  /* 防止撑开父容器 */
  height: 110px;
  /* 稍微增加高度以容纳滚动条 */
  white-space: nowrap;
  flex-wrap: nowrap !important;
  /* 禁止换行，强制横向排布 */
  flex-shrink: 0;
  /* [修复] 防止被压缩 */
  order: -1;
  /* [修复] 确保显示在输入框上方 */
}

/* 美化滚动条 */
#attachment-preview-area::-webkit-scrollbar {
  height: 8px;
}

#attachment-preview-area::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

#attachment-preview-area::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* 2. 缩略图项 */
.preview-item {
  position: relative;
  height: 80px;
  /* 固定图片高度 */
  width: auto;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  transition: all 0.2s;
  background-color: #000;
  /* 防止透明图片看不清背景 */
}

.preview-item img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

.preview-item:hover {
  border-color: var(--accent-color);
}

/* 3. [修复] 删除按钮样式 (确保可见且易点击，正圆形) - 智能体对话页面 */
.preview-item .preview-delete-btn {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  background-color: rgba(200, 0, 0, 0.9) !important;
  color: white !important;
  border-radius: 50% !important;
  /* 确保正圆形 */
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  /* 防止被压缩 */
  min-height: 24px !important;
  /* 防止被压缩 */
  display: none !important;
  /* 默认隐藏 */
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-weight: bold !important;
  font-size: 16px !important;
  line-height: 1 !important;
  z-index: 10 !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  border: none !important;
  /* 去掉边框 */
  padding: 0 !important;
  /* 去掉内边距 */
  margin: 0 !important;
  /* 去掉外边距 */
  opacity: 1 !important;
  /* 当显示时完全不透明 */
}

/* 鼠标悬停在图片上时显示删除按钮 */
.preview-item:hover .preview-delete-btn {
  display: flex !important;
  /* 悬停时显示 */
}

.preview-delete-btn:hover {
  background-color: red !important;
  transform: scale(1.1) !important;
}

/* 3. 悬停放大预览 (弹窗) */
/* 这个元素会通过 JS 动态插入到 body 中 */
#large-preview-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
  /* 让鼠标事件穿透，防止闪烁 */
  opacity: 0;
  transition: opacity 0.2s ease;
  background: rgba(0, 0, 0, 0.8);
  padding: 5px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: none;
  /* 默认不显示 */
}

#large-preview-overlay.visible {
  opacity: 1;
  display: block;
}

#large-preview-overlay img {
  max-width: 80vw;
  /* 最大宽度屏幕的80% */
  max-height: 80vh;
  /* 最大高度屏幕的80% */
  display: block;
  border-radius: 4px;
}

/* 4. 聊天记录中的图片限制 */
.chat-content-wrapper img,
.chat-image {
  max-width: 100%;
  /* 宽度不超过容器 */
  max-height: 300px;
  /* [需求] 高度限制，太高则缩小 */
  width: auto;
  border-radius: 6px;
  margin: 6px auto;
  border: 1px solid var(--border-color);
  cursor: pointer;
  /* 可点击打开 */
  transition: transform 0.2s, border-color 0.2s;
  display: block;
}

.chat-image {
  position: relative;
  z-index: 10;
}

.chat-content-wrapper video,
.chat-video {
  max-width: 100%;
  max-height: 360px;
  border-radius: 6px;
  margin: 6px auto;
  border: 1px solid var(--border-color);
  display: block;
}

.chat-content-wrapper audio,
.chat-audio {
  width: min(520px, 100%);
  margin: 6px auto;
  display: block;
}

.media-shell {
  width: 100%;
  margin: 6px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.media-shell.media-audio-shell {
  min-height: 56px;
}

.media-shell.media-video-shell {
  min-height: 240px;
}

.media-shell.media-pdf-shell {
  min-height: 480px;
}

.media-shell .media-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}

.media-shell:not(.loaded) .media-loading {
  animation: mediaLoadingAppear 0ms linear 160ms forwards;
}

.media-shell .media-loading-bar {
  width: min(320px, 70%);
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border-color) 70%, transparent);
  overflow: hidden;
  position: relative;
}

.media-shell .media-loading-bar .media-loading-bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-color) 70%, transparent), var(--accent-color));
  transition: width 0.18s linear;
}

.media-shell:not(.loaded) audio,
.media-shell:not(.loaded) video,
.media-shell:not(.loaded) iframe {
  opacity: 0;
}

.media-shell.loaded .media-loading {
  display: none;
}

@keyframes mediaLoadingAppear {
  to {
    opacity: 1;
  }
}

.chat-content-wrapper iframe,
.chat-content-wrapper embed,
.chat-pdf {
  width: 100%;
  height: 420px;
  border-radius: 6px;
  margin: 6px auto;
  border: 1px solid var(--border-color);
  display: block;
  background: var(--bg-surface);
}

/* 聊天记录图片悬停微调 */
.chat-content-wrapper img:hover,
.chat-image:hover {
  border-color: var(--accent-color);
  filter: brightness(1.05);
  transform: scale(1.02);
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
}

/* [新增] 聊天媒体容器 */
.chat-media-container {
  margin: 6px 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* [新增] 图片加载失败时显示的可点击链接 */
.chat-media-link {
  display: block;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px dashed var(--accent-color);
  border-radius: 6px;
  color: var(--accent-color);
  text-decoration: none;
  word-break: break-all;
  transition: all 0.2s;
  margin: 6px auto;
}

.chat-media-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.chat-media-actions .secondary-button {
  padding: 4px 10px;
  line-height: 1.1;
  border-radius: 999px;
}

.chat-media-link:hover {
  background: rgba(64, 158, 255, 0.1);
  border-color: var(--accent-hover);
  color: var(--accent-hover);
  text-decoration: underline;
}

/* [新增] Markdown内容样式 */
.markdown-content {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* AI回复内容容器 */
.ai-response-content {
  line-height: 1.6;
  font-size: 14px;
  color: var(--agent-text-color, var(--text-primary));
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ai-response-content h1,
.ai-response-content h2,
.ai-response-content h3,
.ai-response-content h4,
.ai-response-content h5,
.ai-response-content h6 {
  margin: 4px 0 1px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--agent-title-color, var(--text-primary));
}

.ai-response-content p {
  margin: 2px 0;
}

.ai-response-content h1 {
  font-size: 18px;
}

.ai-response-content h2 {
  font-size: 16px;
}

.ai-response-content h3 {
  font-size: 15px;
}

.ai-response-content h4 {
  font-size: 14px;
}

.ai-response-content h5 {
  font-size: 13px;
}

.ai-response-content h6 {
  font-size: 12px;
}

/* AI回复中的列表项 */
.ai-response-content ul,
.ai-response-content ol {
  margin: 4px 0;
  padding-left: 25px;
}

.ai-response-content li {
  margin: 2px 0;
  line-height: 1.6;
}

/* AI回复中的加粗标题（列表项中的strong标签）使用小标题颜色 */
.ai-response-content strong,
.chat-content-wrapper strong,
.ai-response-content li strong,
.chat-message.assistant .chat-content-wrapper strong {
  color: var(--agent-title-color, var(--text-secondary));
  font-weight: 600;
}

/* [新增] 重点内容：加粗墨绿色 */
.highlight-text,
.highlight-key {
  font-weight: bold;
  color: #2ecc71;
  /* [修改] 更鲜艳的墨绿色 */
  text-shadow: 0 0 2px rgba(46, 204, 113, 0.4);
}

[data-theme="light"] .highlight-text,
[data-theme="light"] .highlight-key {
  color: #27ae60;
  /* 浅色模式下的墨绿色 */
  text-shadow: none;
}

/* 思考内容中的重点样式 */
.thinking-content .highlight-key {
  color: #2ecc71;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(46, 204, 113, 0.3);
}

/* [新增] 聊天链接样式 */
.chat-link {
  color: var(--accent-color);
  text-decoration: underline;
  transition: color 0.2s;
}

.chat-link:hover {
  color: var(--accent-hover);
  text-shadow: 0 0 5px var(--accent-glow);
}

/* [新增] 横线分隔符样式 */
.markdown-content hr.solid-divider,
.thinking-content hr.solid-divider {
  border: none;
  height: 2px;
  background: linear-gradient(to right,
      transparent,
      rgba(77, 208, 225, 0.6) 20%,
      rgba(77, 208, 225, 0.8) 50%,
      rgba(77, 208, 225, 0.6) 80%,
      transparent);
  margin: 15px 0;
}

.markdown-content hr.dashed-divider,
.thinking-content hr.dashed-divider {
  border: none;
  height: 1px;
  background-image: linear-gradient(to right,
      rgba(77, 208, 225, 0.4) 50%,
      transparent 50%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  margin: 12px 0;
}

/* ================================================================= */
/* [修复 & 优化] 记事本编辑器样式与动画 */
/* ================================================================= */

/* 1. 编辑器容器布局 */
#library-note-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0;
  /* 默认透明，等待动画触发 */
}

/* 动画类：当添加这个类时触发动画 */
.editor-fade-in {
  animation: fadeInEditor 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeInEditor {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 2. 第一行：标题栏 */
.editor-header {
  flex-shrink: 0;
  /* 不允许压缩 */
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.editor-header label {
  font-weight: bold;
  font-size: 16px;
  white-space: nowrap;
  color: var(--text-secondary);
}

.editor-header input#note-editor-title {
  flex-grow: 1;
  height: 40px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0 15px;
  font-size: 16px;
  color: var(--text-primary);
  transition: all 0.3s;
}

.library-font-upload-input {
  display: none;
}

.editor-header input#note-editor-title:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* 3. 第二行：工具栏 */
#note-editor-toolbar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background-color: var(--bg-input);
  border-radius: 8px 8px 0 0;
  /* 上方圆角 */
  border: 1px solid var(--border-color);
  border-bottom: none;
  /* 与内容区连接 */
}

/* 内容库工具栏布局 */
.library-toolbar-left,
.library-toolbar-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

.library-toolbar-separator {
  width: 1px;
  height: 24px;
  background: var(--border-color);
  margin: 0 5px;
}

.library-toolbar-toggle-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.library-toolbar-toggle-btn:hover {
  background: var(--bg-surface);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.library-toolbar-toggle-btn.active {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.library-toolbar-select {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  height: 32px;
  cursor: pointer;
  outline: none;
}

.library-toolbar-select:hover {
  border-color: var(--accent-color);
}

.library-toolbar-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

/* [修复] 确保FontAwesome图标可见 */
.library-toolbar-btn i,
.library-toolbar-toggle-btn i {
  font-size: 14px;
  color: inherit;
  display: inline-block;
  opacity: 1;
}

.library-toolbar-btn:hover {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.library-toolbar-btn:hover i {
  color: var(--text-primary);
}

.library-toolbar-btn.active {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.library-toolbar-btn.active i {
  color: white;
}

.library-toolbar-color {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-color);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
}

.library-toolbar-color:hover {
  border-color: var(--accent-color);
}

.voice-read-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.voice-read-btn {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.voice-read-btn:hover {
  filter: brightness(1.05);
}

#library-voice-read-btn svg {
  transform: scale(2);
  transform-origin: center;
}

.voice-read-menu {
  position: absolute;
  bottom: calc(100% + 0px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 99999;
}

.voice-read-wrapper:hover .voice-read-menu {
  opacity: 1;
  pointer-events: auto;
}

#library-header-voice-wrapper:hover .voice-read-menu {
  opacity: 0;
  pointer-events: none;
}

#library-header-voice-wrapper.open .voice-read-menu {
  opacity: 1;
  pointer-events: auto;
}

.voice-menu-btn {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border-radius: 6px !important;
  background: var(--bg-input) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.voice-menu-btn:hover {
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
}

.voice-menu-btn svg {
  display: block;
}

.library-toolbar-voice-group {
  display: inline-flex;
  align-items: center;
}

#library-voice-read-menu .voice-menu-btn {
  width: 44px;
  height: 44px;
}

#library-voice-read-menu .voice-menu-btn svg {
  width: 32px;
  height: 32px;
}

/* Library header voice menu icon sizing and focus cleanup */
#library-header-voice-menu .voice-menu-btn svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

/* 强制语音菜单图标为白色，避免主题/过滤影响不可见 */
.voice-read-menu .voice-menu-btn svg,
.voice-read-menu .voice-menu-btn svg path,
.voice-read-menu .voice-menu-btn svg circle,
.voice-read-menu .voice-menu-btn svg rect {
  fill: #fff !important;
  stroke: none !important;
}

.voice-read-menu .voice-menu-btn {
  color: #fff !important;
}

#library-header-voice-menu .voice-menu-btn img {
  width: 20px;
  height: 20px;
  display: block;
}

.voice-menu-btn:focus,
.voice-menu-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* 内容库浮动工具栏 */
.library-floating-toolbar {
  position: fixed;
  display: none;
  align-items: center;
  gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  flex-wrap: wrap;
}

.library-floating-toolbar .floating-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.library-floating-toolbar .floating-btn:hover {
  background: var(--bg-input);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.library-floating-toolbar .floating-separator {
  width: 1px;
  height: 20px;
  background: var(--border-color);
  margin: 0 4px;
}

/* 工具栏按钮统一样式 */
#note-editor-toolbar button {
  padding: 4px 12px !important;
  height: 30px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

#note-editor-toolbar button:hover {
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
}

#note-editor-toolbar select,
#note-editor-toolbar input {
  height: 38px;
  font-size: 12px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

#note-editor-toolbar .library-toolbar-select {
  height: 44px !important;
  line-height: 44px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#note-editor-toolbar #library-toolbar-font-family {
  max-width: 180px !important;
  min-width: 160px !important;
  width: 180px !important;
}

/* 4. 第三部分：内容编辑区 */
#note-editor-content {
  flex-grow: 1;
  /* 占据剩余所有高度 */
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 0 0 8px 8px;
  /* 下方圆角 */
  padding: 20px;
  overflow-y: auto;
  outline: none;
  line-height: 1.6;
  font-size: 14px;
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

#note-editor-content:focus {
  border-color: var(--accent-color);
}

/* 确保隐藏类优先级最高 */
.hidden {
  display: none !important;
}

/* ================================================================= */
/* [新增/修复] 图片上传预览与样式控制 (独立模块) */
/* ================================================================= */

/* 1. 预览区域容器 (横向滚动 + 固定高度) - 显示在输入框上方 */
#attachment-preview-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin: 0 15px 10px 15px;
  /* [修复] 与输入框对齐，下方留间距 */
  background-color: rgba(0, 0, 0, 0.2);
  /* 深色背景 */
  border-radius: 8px;
  border: 1px dashed var(--border-color);

  /* 关键：横向滚动 */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  height: 110px;
  /* 固定高度，容纳缩略图和滚动条 */
  white-space: nowrap;
  /* 防止换行 */
  max-width: calc(100% - 30px);
  /* 防止撑开父容器 */
  flex-shrink: 0;
  /* [修复] 防止被压缩 */
  order: -1;
  /* [修复] 确保显示在输入框上方 */
}

/* 2. 滚动条样式 (按要求调亮颜色) */
#attachment-preview-area::-webkit-scrollbar {
  height: 8px;
  /* 滚动条高度 */
}

#attachment-preview-area::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  /* 轨道颜色 */
  border-radius: 4px;
}

#attachment-preview-area::-webkit-scrollbar-thumb {
  /* 滚动条滑块：使用较亮的半透明白色，适应深色模式 */
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

#attachment-preview-area::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
  /* 悬停更亮 */
}

/* 3. 缩略图项 */
.preview-item {
  position: relative;
  height: 80px;
  /* 图片固定高度 */
  width: auto;
  /* 宽度自适应 */
  flex-shrink: 0;
  /* 防止被压缩 */
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  /* 裁剪圆角 */
  transition: all 0.2s;
}

.preview-item img {
  height: 100%;
  width: auto;
  object-fit: cover;
  display: block;
}

.preview-item:hover {
  border-color: var(--accent-color);
}

/* 4. 删除按钮 (红底、圆角正方形、居中显示) */
.preview-delete-btn {
  position: absolute;
  /* 居中定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);

  width: 24px;
  height: 24px;

  /* 样式：红底、白字、圆角正方形 */
  background-color: #f56c6c;
  /* 红色 */
  color: white;
  border-radius: 4px;
  /* 圆角正方形 */

  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  opacity: 0;
  /* 默认隐藏 */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* 鼠标悬停在图片上时，显示删除按钮并放大 */
.preview-item:hover .preview-delete-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.preview-delete-btn:hover {
  background-color: #ff4d4f;
  /* 悬停更红 */
}

/* 5. 悬停大图预览 (覆盖层) */
#large-preview-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  pointer-events: none;
  /* 允许鼠标穿透 */
  opacity: 0;
  transition: opacity 0.2s ease;

  background: rgba(0, 0, 0, 0.8);
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);

  display: none;
  /* JS控制显示 */
}

#large-preview-overlay.visible {
  display: block;
  opacity: 1;
}

#large-preview-overlay img {
  max-width: 80vw;
  /* 不超过屏幕宽度的80% */
  max-height: 80vh;
  /* 不超过屏幕高度的80% */
  display: block;
  border-radius: 4px;
}

/* 6. 对话框中的图片尺寸控制 */
.chat-content-wrapper img {
  max-width: 100%;
  /* 宽度不超过气泡 */
  max-height: 300px;
  /* 高度限制，防止刷屏 */
  width: auto;
  border-radius: 8px;
  margin: 8px auto;
  border: 1px solid var(--border-color);
  cursor: zoom-in;
  transition: transform 0.2s;
  display: block;
}

.chat-content-wrapper img.chat-image,
.chat-content-wrapper .chat-media-container img.chat-image {
  margin: 6px auto;
}

.chat-content-wrapper img:hover {
  filter: brightness(1.05);
  border-color: var(--accent-color);
}

/* ================================================================= */
/* [修复 & 优化] 内容库布局与编辑器动画 (填满右侧) */
/* ================================================================= */

/* 1. 内容库整体容器：左右布局，占满高度 */
.library-pane {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  overflow: hidden;
  gap: 0;
}

/* 2. 左侧：管理栏 (保持原样) */
.library-management-pane {
  width: 280px;
  min-width: 280px;
  /* 固定宽度，不压缩 */
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color);
  background-color: var(--bg-sidebar);
  /* 左侧背景 */
  z-index: 2;
}

/* 3. 右侧：内容显示区 (填满剩余空间) */
.library-content-pane {
  flex: 1;
  /* 关键：占据剩余宽度 */
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* 防止 flex 子元素溢出 */
  overflow: hidden;
  position: relative;
  padding: 15px;
  /* 给内部编辑器留一点边距，更有层次感 */
}

/* 4. 编辑器容器 (卡片式设计 + 动画) */
#library-note-editor {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  /* 卡片外观 */
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  /* 圆角大一点 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);

  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;

  /* 初始状态隐藏 */
  opacity: 0;
  transform: translateY(20px);
}

/* 动画激活类 */
.editor-fade-in {
  animation: cardFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cardFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 5. 占位符 (机器人) */
#library-note-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 0;
  pointer-events: none;
  /* 让点击穿透 */
}

/* 确保隐藏类优先级 */
.hidden {
  display: none !important;
}

/* (可选) 内部元素微调，防止溢出 */
#note-editor-content {
  border: none !important;
  /* 移除内部边框，因为外部容器已经有边框了 */
  background-color: var(--bg-input) !important;
  padding: 10px 0;
}

/* ================================================================= */
/* [需求优化] 深色模式 & 个性风格按钮交互样式 (线框/实心区分) */
/* ================================================================= */



/* 2. 未选中悬停状态：加一点背景光晕，文字变亮 */
[data-theme="dark"] button:not(.active):not(.danger-button):not(.lib-action-btn):hover,
[data-theme="dark"] .tab-link:not(.active):hover,
[data-theme="dark"] .theme-toggle-btn:not(.active):hover,
[data-theme="personal"] button:not(.active):not(.danger-button):not(.lib-action-btn):hover,
[data-theme="personal"] .tab-link:not(.active):hover,
[data-theme="personal"] .theme-toggle-btn:not(.active):hover {
  background-color: rgba(0, 0, 0, 0.4) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border-color: var(--accent-color) !important;
  color: var(--text-primary) !important;
  opacity: 1;
}

/* 3. 选中状态：实心主色背景 */
[data-theme="dark"] button.active,
[data-theme="dark"] .tab-link.active,
[data-theme="personal"] button.active,
[data-theme="personal"] .tab-link.active {
  color: #fff !important;
}

/* =========================================
         [新增] Prompt 编辑区样式优化
         ========================================= */

/* 1. 按钮容器：居中显示，增加间距 */
#prompt-edit-buttons {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  gap: 15px;
  /* 按钮之间的间距 */
  margin-top: 12px;
  /* 距离上方输入框的距离 */
  width: 100%;
}

/* 2. 确保 hidden 类优先级最高 (保持默认隐藏) */
#prompt-edit-buttons.hidden {
  display: none !important;
}

/* 3. 输入框光标逻辑 */
/* 只读状态(默认)：显示手型，暗示可点击进入编辑 */
#prompt-display-area[readonly] {
  cursor: pointer;
  opacity: 0.8;
  /* 稍微淡一点表示只读 */
}

/* 编辑状态：显示文本输入光标 (I-beam) */
#prompt-display-area:not([readonly]) {
  cursor: text;
  background-color: rgba(0, 0, 0, 0.3);
  /* 编辑时背景稍微加深一点 */
  border-color: #409eff;
  /* 编辑时边框高亮 */
}

/* =========================================
   旧的 #btn-send-message 样式已废弃
   现在使用 .action-btn-large 类控制样式
   ========================================= */

.workflow-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.9em;
  color: var(--text-secondary);
}

.workflow-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 60px;
  align-items: center;
}

.agent-module {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 5px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
  user-select: none;
  transition: all 0.2s;
  position: relative;
}

/* 选中某个模块时，高亮显示 */
.agent-module.active {
  border-color: #e6a23c;
  box-shadow: 0 0 5px rgba(230, 162, 60, 0.5);
}

.agent-module:active {
  cursor: grabbing;
  transform: scale(1.02);
}

.agent-module-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--agent-title-color, var(--text-secondary));
}

.module-controls {
  display: flex;
  gap: 4px;
  opacity: 0.6;
}

.agent-module:hover .module-controls {
  opacity: 1;
}

.btn-module-remove {
  cursor: pointer;
  color: #ff4d4f;
  font-weight: bold;
}

.btn-module-remove:hover {
  transform: scale(1.2);
}

/* 拖拽时的占位符 */
.sortable-ghost {
  opacity: 0.4;
  background: #e6a23c;
}

/* 添加按钮模块 */
.add-module-btn {
  border: 1px dashed var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
}

.add-module-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

/* [新增] 群组模式下的特殊样式：橙色粗边框 */
/* 应用于 input-area (包含发送框和按钮的那一行) */
.group-mode-active {
  border: 2px solid #e6a23c !important;
  /* 橙色粗边框 */
  box-shadow: 0 0 10px rgba(230, 162, 60, 0.2);
  position: relative;
}

/* [删除] 去掉群组模式标签 */

.workflow-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 0.9em;
  color: var(--text-secondary);
}

/* [修改] 链条区域：增加 Gap 以容纳箭头 */
.workflow-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 60px;
  align-items: center;
}

/* [修改] 智能体模块：增加相对定位用于放箭头 */
.agent-module {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
  user-select: none;
  transition: all 0.2s;

  /* 关键属性：允许箭头溢出显示，并给右侧留出箭头位置 */
  position: relative;
  overflow: visible;
  margin-right: 25px;
}

/* [新增] 模块之间的箭头 (➔) */
.agent-module::after {
  content: "➔";
  position: absolute;
  right: -24px;
  /* 定位到右侧空隙中 */
  top: 50%;
  transform: translateY(-54%);
  /* 垂直居中微调 */
  color: #e6a23c;
  /* 橙色箭头 */
  font-size: 18px;
  font-weight: bold;
  pointer-events: none;
}

/* [新增] 最后一个智能体模块不要显示箭头 */
/* 逻辑：DOM结构是 [Agent] [Agent] [AddBtn]，所以最后一个Agent是倒数第2个元素 */
.agent-module:nth-last-child(2)::after {
  display: none;
}

.agent-module:nth-last-child(2) {
  margin-right: 0;
  /* 最后一个不需要右边距 */
}

.agent-module.active {
  border-color: #e6a23c;
  box-shadow: 0 0 5px rgba(230, 162, 60, 0.5);
}

/* ... (Add Button 样式保持不变) ... */
.add-module-btn {
  border: 1px dashed var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  align-items: center;
  height: 36px;
  /* 保持高度一致 */
}

.add-module-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

/* [修改] 群组模式：橙色粗边框 */
.group-mode-active {
  border: 3px solid #e6a23c !important;
  /* 加粗橙色边框 */
  border-radius: 12px !important;
  box-shadow: 0 0 15px rgba(230, 162, 60, 0.15);
  position: relative;
  transition: all 0.3s ease;
}

/* [修复] 聊天区域的群组模式样式 - 不影响滚动条 */
.chat-main-area.group-mode-active {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  position: relative;
  transition: all 0.3s ease;
  /* [修复] 移除 pointer-events: none，确保滚动条可用 */
  pointer-events: auto !important;
  z-index: 1;
  /* 降低 z-index，避免遮挡滚动条 */
}

/* [修改] 链条区域：增加 Gap */
.workflow-chain {
  display: flex;
  flex-wrap: wrap;
  /* 允许自动换行 */
  gap: 15px 10px;
  /* 行间距15px，列间距10px */
  min-height: 60px;
  align-items: center;
  padding-left: 5px;
}

/* [修改] 智能体模块：自适应宽度 + 相对定位 */
.agent-module {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  /* [修改] 默认鼠标样式，只有grip区域才是grab */
  user-select: none;
  transition: all 0.2s;
  position: relative;
  /* 用于放箭头 */

  /* 宽度自适应内容 - [修改] 增加最大宽度 */
  width: auto;
  max-width: 250px;
  /* 防止太长 */
}

.agent-module-name {
  font-size: 13px;
  font-weight: 500;
  /* 文字过长省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================
   [核心] 动态箭头样式系统
   ========================== */

/* 1. 默认向右箭头 (➔) */
.agent-module::after {
  content: "➔";
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-54%);
  color: #e6a23c;
  font-size: 18px;
  font-weight: bold;
  pointer-events: none;
}

/* 2. [特殊] 行尾转弯箭头 (⤵) */
/* 当JS检测到它是行尾元素时，会添加 .wrap-end 类 */
.agent-module.wrap-end::after {
  content: "⤵";
  /* 转弯箭头 */
  right: -10px;
  /* 稍微靠里一点，避免太突兀 */
  top: auto;
  /* 取消垂直居中 */
  bottom: -20px;
  /* 移到右下角指向下一行 */
  transform: rotate(0deg);
  /* 不需要微调 */
  font-size: 20px;
}

/* 3. [特殊] 最后一个模块不显示箭头 */
.agent-module:last-of-type::after {
  display: none !important;
}

/* 选中高亮 */
.agent-module.active {
  border-color: #e6a23c;
  box-shadow: 0 0 5px rgba(230, 162, 60, 0.5);
}

/* [新增] 顶部浮动提示层样式 */
/* [修复] 顶部浮动提示层样式 */
#toast-overlay {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: rgba(0, 0, 0, 0.9);
  /* 加深背景 */
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  overflow: hidden;
  /* 确保边框线不溢出圆角 */
}

#toast-overlay.show {
  transform: translateX(-50%) translateY(0);
}

/* 使用伪元素实现左侧彩色线条，确保不会跑偏 */
#toast-overlay::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
}

#toast-overlay.success::before {
  background-color: #67c23a;
}

#toast-overlay.error::before {
  background-color: #f56c6c;
}

/* 图标样式 */
#toast-icon {
  font-size: 18px;
}

/* =========================================
           [重构] 顶部自定义选择器
           ========================================= */
.custom-agent-select {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  min-width: 150px;
  justify-content: space-between;
  margin-right: 10px;
  position: relative;
}

.custom-agent-select:hover {
  border-color: var(--accent-color);
}

/* [修复] 确保文字在上层，不被遮挡 */
#current-agent-name-display {
  position: relative;
  z-index: 10;
  /* 文字在上层，确保不被遮挡 */
  pointer-events: auto;
  /* 确保可以点击 */
  flex: 1;
  /* 占据可用空间 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-arrow-icon {
  font-size: 12px;
  margin-left: 8px;
  transition: transform 0.2s;
  position: relative;
  z-index: 2;
  /* 箭头也在上层 */
  pointer-events: none;
  /* 箭头不拦截点击 */
}

.custom-agent-select.active .select-arrow-icon {
  transform: rotate(180deg);
}

/* [新增] 橙色模式下智能体集群名字样式 */
#current-agent-name-display.group-name {
  color: #e6a23c !important;
  /* 橙色 */
  font-weight: 500;
}

#current-agent-name-display.solo-name {
  color: var(--text-primary);
  /* 单体模式使用默认文字颜色 */
}

.workflow-container.visible {
  display: flex !important;
  /* 强制显示 */
  flex-direction: column;
}

/* 每一行容器 */
.workflow-row {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 50px;
  /* 行间距 */
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  /* 两侧留白给转弯箭头 */
}

/* [关键] 偶数行反向排列 (右->左) */
.workflow-row.reverse {
  flex-direction: row-reverse;
}

/* 智能体模块 */
.agent-module {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  position: relative;
  width: auto;
  /* 宽度自适应文字 */
  max-width: 200px;
  min-height: 36px;
  flex-shrink: 0;
  /* 防止挤压 */
}

.agent-module.active {
  border-color: #e6a23c;
  box-shadow: 0 0 5px rgba(230, 162, 60, 0.5);
}


.agent-module-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

/* [新增] 个性化图标样式 */
.agent-personalize-icon {
  font-size: 14px;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.2s;
  padding: 2px 4px;
  border-radius: 3px;
  margin-left: 5px;
  position: relative;
  z-index: 10;
  /* 确保齿轮图标在最上层，可点击 */
  display: inline-block;
  user-select: none;
  /* 防止文本选择 */
}

.agent-personalize-icon:hover {
  opacity: 1;
  background: rgba(64, 158, 255, 0.15);
  transform: scale(1.1);
}

/* [新增] 橙色模式下齿轮图标样式 */
.group-mode-active .agent-personalize-icon {
  opacity: 0.8;
  /* 橙色模式下稍微提高可见度 */
}

.group-mode-active .agent-personalize-icon:hover {
  background: rgba(230, 162, 60, 0.2);
  /* 橙色悬停效果 */
  opacity: 1;
}

/* [修改] 占位符文字框：橙色透明底和橙色虚线边框 */
.add-module-placeholder {
  border: 2px dashed #e6a23c;
  /* 橙色虚线边框 */
  color: #e6a23c;
  /* 橙色文字 */
  border-radius: 8px;
  padding: 12px 20px;
  cursor: pointer !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  /* [新增] 加粗文字，更明显 */
  min-height: 40px;
  background: rgba(230, 162, 60, 0.12);
  /* [修改] 橙色透明底，稍微加深 */
  transition: all 0.2s;
  position: absolute;
  /* 绝对定位，居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 精确居中 */
  z-index: 10;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(230, 162, 60, 0.2);
  /* [新增] 橙色阴影，更明显 */
  user-select: none;
  /* 防止文字被选中 */
}

.add-module-placeholder:hover {
  color: #f0a040;
  /* 悬停时稍亮的橙色 */
  background: rgba(230, 162, 60, 0.2);
  border-color: #f0a040;
  transform: translate(-50%, -50%) scale(1.05);
  /* 保持居中的同时放大 */
  box-shadow: 0 0 15px rgba(230, 162, 60, 0.4);
}

.add-module-placeholder:active {
  transform: translate(-50%, -50%) scale(0.98);
  background: rgba(230, 162, 60, 0.25);
}

/* =========================================
         [修复] 智能体仓库样式
         ========================================= */
/* [修复] 红色圆形关闭按钮 */
#btn-close-repo {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 77, 79, 0.1) !important;
  color: #ff4d4f !important;
  border: 1px solid rgba(255, 77, 79, 0.2) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: all 0.2s;
  flex-shrink: 0;
}

#btn-close-repo:hover {
  background-color: #ff4d4f !important;
  color: white !important;
}

/* [修复] 仓库列表项：防止文字溢出 */
.repo-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 10px;
  border-radius: 6px;
  cursor: grab;
  user-select: none;
  transition: all 0.2s;
  /* 溢出省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 13px;
}

.agent-module {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  position: relative;
  width: auto;
  max-width: 180px;
  height: 36px;
  flex-shrink: 0;
}

.agent-module.active {
  border-color: #e6a23c;
  box-shadow: 0 0 5px rgba(230, 162, 60, 0.5);
}

/* =========================================
           [修复] 群组模式橙色边框 (范围扩大到 Chat Area)
           ========================================= */
.group-mode-active {
  border: 3px solid #e6a23c !important;
  border-radius: 12px !important;
  box-shadow: 0 0 15px rgba(230, 162, 60, 0.15);
  position: relative;
}

/* [删除] 去掉群组模式标签 */

/* [修复] 工作流容器：固定宽度居中，防止被拉伸 */
.workflow-container {
  display: none;
  margin-top: 0;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  /* 移除max-height限制，让内容完整显示 */
  overflow: visible;
  /* 改为visible，确保所有内容可见 */
  flex-direction: column;
  align-items: center;
  /* 内容居中 */
}


/* 每一行：固定宽度，确保能放下6个模块+间距 */
/* 模块宽160 + gap 35 = 195 * 6 ≈ 1170px */
.workflow-row {
  display: flex;
  align-items: center;
  gap: 35px;
  margin-bottom: 45px;
  position: relative;
  /* 固定宽度，锁定每行6个 */
  width: 1170px;
  flex-shrink: 0;
  /* 防止被父容器挤压 */
  padding: 0 10px;
  box-sizing: border-box;
  /* [重要] 移除 row-reverse，统一从左到右 (Z型) */
  flex-direction: row !important;
  justify-content: flex-start;
}

/* 智能体模块 */
.agent-module {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 0 10px;
  /* 上下padding由height控制垂直居中 */
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
  user-select: none;
  position: relative;

  /* 固定尺寸 - [修改] 宽度增加50px */
  width: 270px;
  height: 40px;
  flex-shrink: 0;
  transition: all 0.2s;
}

/* [修复] 选中状态：橙色边框 */
.agent-module.active {
  border: 2px solid #e6a23c !important;
  box-shadow: 0 0 8px rgba(230, 162, 60, 0.4);
  background-color: rgba(230, 162, 60, 0.05);
}

/* [新增] 相同节点高亮（暗橙色） */
.agent-module.same-agent {
  border: 2px solid rgba(230, 162, 60, 0.5) !important;
  /* 暗橙色边框 */
  background-color: rgba(230, 162, 60, 0.1) !important;
  /* 暗橙色背景 */
  opacity: 0.8;
  /* 稍微透明 */
}

.agent-module:active {
  cursor: grabbing;
}

/* [新增] 橙色模式下节点悬停时的橙色边框 */
.group-mode-active .agent-module:hover {
  border: 2px solid #e6a23c !important;
  box-shadow: 0 0 8px rgba(230, 162, 60, 0.3);
}

/* [新增] 六点抓取图标 (Grip Icon) */
.agent-grip {
  display: grid;
  grid-template-columns: repeat(2, 2px);
  gap: 2px;
  width: 6px;
  height: 10px;
  flex-shrink: 0;
  cursor: grab;
  opacity: 0.5;
}

.agent-grip span {
  width: 2px;
  height: 2px;
  background-color: var(--text-secondary);
  border-radius: 50%;
}

.agent-module:hover .agent-grip {
  opacity: 1;
}

/* --- 箭头系统 (Z型布局：统一向右，行尾折返) --- */

/* --- 箭头系统 (Z型布局：统一向右，行尾折返) --- */

/* 直线箭头 (指向右) */
.arrow-connector {
  position: absolute;
  right: -38px;
  /* 位于模块右侧间隙 */
  top: 50%;
  width: 35px;
  height: 2px;
  background: #e6a23c;
  pointer-events: none;
  z-index: 100;
  /* 提高层级，不被遮挡 */
}

.arrow-connector::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -5px;
  /* 箭头头在右端 */
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #e6a23c;
  /* 向右指 */
}

/* 转弯箭头 (行尾向下折返) */
/* 形状：从行尾模块右侧出来 -> 向下 -> 向左长横线 -> 向下接到下一行 (简化为：右侧出来向下指) */
/* 实际上 Z型布局行尾只需指示“向下到下一行开头”，视觉上用一个向下弯的箭头即可 */
.turn-connector {
  position: absolute;
  right: -30px;
  /* 在模块右侧 */
  top: 50%;
  width: 40px;
  height: 65px;
  /* 跨越行高 */
  border: 2px solid #e6a23c;
  border-top: none;
  border-left: none;
  /* 只保留右边和底边? 不，Z型通常是 ⤵ 样式 */
  /* 这里设计为：从右侧出，向下弯，再向左指回下一行开头 (视觉暗示) */
  /* 实际实现：简单的向下转弯箭头 */
  border-radius: 0 0 10px 0;
  pointer-events: none;
  z-index: 100;
  /* 提高层级，不被遮挡 */
  border-right: 2px solid #e6a23c;
  /* 右竖线 */
  border-bottom: 2px solid #e6a23c;
  /* 底横线 */
  width: 20px;
  /* 宽度不要太大 */
}

/* 箭头头部 (向左指，暗示回到下一行左侧) */
.turn-connector::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: -5px;
  /* 在底横线左端 */
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #e6a23c;
  /* 向左指 */
}

/* 隐藏特定箭头 */
/* 行尾模块：隐藏直线箭头 */
.agent-module.wrap-end .arrow-connector {
  display: none;
}

/* 全局最后一个：隐藏所有箭头 */
.agent-module:last-child .arrow-connector,
.agent-module:last-child .turn-connector {
  display: none !important;
}

/* [修复] 工作流容器：固定宽度居中，防止被拉伸 */
.workflow-container {
  margin-top: 0;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  display: none;
  max-height: 260px;
  /* 约3行高度 */
  overflow-y: auto;
  overflow-x: auto;
  /* 允许横向滚动，但我们将通过固定宽度尽量避免 */

  /* 居中布局关键 */
  display: none;
  /* 默认隐藏，JS控制显示flex/block */
  flex-direction: column;
  align-items: center;
  /* 内容居中 */
}

/* 每一行：固定宽度，确保能放下6个模块+间距 */
/* 模块宽160 + gap 35 = 195 * 6 ≈ 1170px */
.workflow-row {
  display: flex;
  align-items: center;
  gap: 35px;
  margin-bottom: 45px;
  position: relative;
  /* 固定宽度，锁定每行6个 */
  width: 1170px;
  flex-shrink: 0;
  /* 防止被父容器挤压 */
  padding: 0 10px;
  box-sizing: border-box;
  /* [重要] 移除 row-reverse，统一从左到右 (Z型) */
  flex-direction: row !important;
  justify-content: flex-start;
}

/* 智能体模块 */
.agent-module {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 0 10px;
  /* 上下padding由height控制垂直居中 */
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: grab;
  user-select: none;
  position: relative;

  /* 固定尺寸 - [修改] 宽度增加50px */
  width: 270px;
  height: 40px;
  flex-shrink: 0;
  transition: all 0.2s;
}

/* [修复] 选中状态：橙色边框 */
.agent-module.active {
  border: 2px solid #e6a23c !important;
  box-shadow: 0 0 8px rgba(230, 162, 60, 0.4);
  background-color: rgba(230, 162, 60, 0.05);
}

/* [新增] 相同节点高亮（暗橙色） */
.agent-module.same-agent {
  border: 2px solid rgba(230, 162, 60, 0.5) !important;
  /* 暗橙色边框 */
  background-color: rgba(230, 162, 60, 0.1) !important;
  /* 暗橙色背景 */
  opacity: 0.8;
  /* 稍微透明 */
}

.agent-module:active {
  cursor: grabbing;
}

/* [新增] 橙色模式下节点悬停时的橙色边框 */
.group-mode-active .agent-module:hover {
  border: 2px solid #e6a23c !important;
  box-shadow: 0 0 8px rgba(230, 162, 60, 0.3);
}

/* [新增] 六点抓取图标 (Grip Icon) */
.agent-grip {
  display: grid;
  grid-template-columns: repeat(2, 2px);
  gap: 2px;
  width: 6px;
  height: 10px;
  flex-shrink: 0;
  cursor: grab;
  opacity: 0.5;
}

.agent-grip span {
  width: 2px;
  height: 2px;
  background-color: var(--text-secondary);
  border-radius: 50%;
}

.agent-module:hover .agent-grip {
  opacity: 1;
}

/* --- 箭头系统 (Z型布局：统一向右，行尾折返) --- */

/* 直线箭头 (指向右) */
.arrow-connector {
  position: absolute;
  right: -38px;
  /* 位于模块右侧间隙 */
  top: 50%;
  width: 35px;
  height: 2px;
  background: #e6a23c;
  pointer-events: none;
  z-index: 100;
  /* 提高层级，不被遮挡 */
}

.arrow-connector::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -5px;
  /* 箭头头在右端 */
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #e6a23c;
  /* 向右指 */
}

/* 转弯箭头 (行尾向下折返) */
/* 形状：从行尾模块右侧出来 -> 向下 -> 向左长横线 -> 向下接到下一行 (简化为：右侧出来向下指) */
/* 实际上 Z型布局行尾只需指示“向下到下一行开头”，视觉上用一个向下弯的箭头即可 */
.turn-connector {
  position: absolute;
  right: -30px;
  /* 在模块右侧 */
  top: 50%;
  width: 40px;
  height: 65px;
  /* 跨越行高 */
  border: 2px solid #e6a23c;
  border-top: none;
  border-left: none;
  /* 只保留右边和底边? 不，Z型通常是 ⤵ 样式 */
  /* 这里设计为：从右侧出，向下弯，再向左指回下一行开头 (视觉暗示) */
  /* 实际实现：简单的向下转弯箭头 */
  border-radius: 0 0 10px 0;
  pointer-events: none;
  z-index: 100;
  /* 提高层级，不被遮挡 */
  border-right: 2px solid #e6a23c;
  /* 右竖线 */
  border-bottom: 2px solid #e6a23c;
  /* 底横线 */
  width: 20px;
  /* 宽度不要太大 */
}

/* 箭头头部 (向左指，暗示回到下一行左侧) */
.turn-connector::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: -5px;
  /* 在底横线左端 */
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #e6a23c;
  /* 向左指 */
}

/* 隐藏特定箭头 */
/* 行尾模块：隐藏直线箭头 */
.agent-module.wrap-end .arrow-connector {
  display: none;
}

/* 全局最后一个：隐藏所有箭头 */
.agent-module:last-child .arrow-connector,
.agent-module:last-child .turn-connector {
  display: none !important;
}

/* [修复] 群组模式橙色框 (包裹 Chat Display + Input Area) */
/* 注意：我们需要给 .main-pane 或 .chat-main-area 加这个类，而不是 input-area */
.chat-main-area.group-mode-active {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  position: relative;

  /* 布局调整：确保边框包住所有内容 */
  box-sizing: border-box;
  margin: 0 !important;
  /* 外边距，与周围留空隙 */

  /* 高度计算：占据父容器剩余空间 */
  height: 100% !important;

  /* 内部布局 */
  display: flex;
  flex-direction: column;
}

/* 确保输入框区域在边框底部 */
.chat-main-area.group-mode-active .input-area,
.input-area.group-mode-active {
  /* [修改] 群组模式下显示橙色边框 */
  border: none !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  /* 增强光效 */
  margin-bottom: 0 !important;
}

/* [新增] 群组模式下输入框和发送按钮的橙色样式 */
.input-area.group-mode-active #user-input-area {
  border: 2px solid #e6a23c !important;
  box-shadow: 0 0 10px rgba(230, 162, 60, 0.2) !important;
  /* Ensure pointer events are not blocked */
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Ensure input area wrapper is visible */
.input-area.group-mode-active {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 群组模式下，默认状态也保持相同的尺寸 */
.input-area.group-mode-active .chat-input-pill {
  border: 3px solid transparent !important;
  border-radius: 999px;
  padding: 10px !important;
}

/* 群组模式下，当鼠标悬停在输入框模块上时，显示橙色边框 */
.input-area.group-mode-active:hover .chat-input-pill,
.input-area.group-mode-active .chat-input-pill:hover {
  border: 3px solid #e6a23c !important;
}

/* 群组模式下，当输入框聚焦时，外层容器显示3px橙色边框，尺寸保持不变 */
.input-area.group-mode-active .chat-input-pill:has(#user-input-area:focus) {
  border: 3px solid #e6a23c !important;
}

.input-area.group-mode-active #user-input-area:focus {
  border: 1px solid #e6a23c !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 群组模式发送按钮 - 橙色版本 */
.input-area.group-mode-active #btn-send-message {
  /* [修改] 透明背景 */
  background: transparent !important;

  /* 橙色边框 */
  border: 3px solid rgba(230, 162, 60, 0.8) !important;

  /* 橙色发光效果 */
  box-shadow: none !important;
}

/* 群组模式萤火虫 - 橙色系 */
.input-area.group-mode-active #btn-send-message::before {
  box-shadow: none;
  animation: firefly-float-1 4s ease-in infinite;
}

.input-area.group-mode-active #btn-send-message::after {
  box-shadow: none;
  animation: firefly-float-2 5s ease-in infinite;
  animation-delay: 1s;
}

.input-area.group-mode-active #btn-send-message:hover {
  border-color: rgba(230, 162, 60, 1) !important;
  box-shadow:
    0 0 30px rgba(230, 162, 60, 0.7),
    0 0 60px rgba(230, 162, 60, 0.5),
    0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 -2px 10px rgba(0, 0, 0, 0.2),
    inset 0 2px 10px rgba(255, 255, 255, 0.2) !important;
}

.input-area.group-mode-active #btn-send-message:hover::before {
  animation: firefly-float-1 2s ease-in infinite;
}

.input-area.group-mode-active #btn-send-message:hover::after {
  animation: firefly-float-2 2.5s ease-in infinite;
  animation-delay: 0.5s;
}

/* [新增] 群组模式下的收起按钮 - 橙色主题 */
.input-area.group-mode-active+.collapse-chat-btn,
.group-mode-active .collapse-chat-btn {
  border: none !important;
  /* [修复] 去掉边框 */
  background: rgba(230, 162, 60, 0.1) !important;
  box-shadow: 0 0 10px rgba(230, 162, 60, 0.3) !important;
}

.input-area.group-mode-active+.collapse-chat-btn:hover,
.group-mode-active .collapse-chat-btn:hover {
  background: rgba(230, 162, 60, 0.2) !important;
  border: none !important;
  /* [修复] 悬停时也不显示边框 */
  box-shadow: 0 0 15px rgba(230, 162, 60, 0.5) !important;
}

.input-area.group-mode-active+.collapse-chat-btn span,
.group-mode-active .collapse-chat-btn span {
  color: #e6a23c;
}

.input-area.group-mode-active+.collapse-chat-btn:hover span,
.group-mode-active .collapse-chat-btn:hover span {
  color: white;
}

/* [新增] 群组模式下的附件按钮 - 橙色主题 */
.input-area.group-mode-active .attach-btn {
  color: #e6a23c !important;
  border: none !important;
  /* [修复] 去掉边框 */
  background: transparent !important;
  /* 改为透明背景 */
  box-shadow: none !important;
  /* [修改] 去掉影子效果 */
  transition: all 0.3s ease;
}

.input-area.group-mode-active .attach-btn:hover {
  background: rgba(230, 162, 60, 0.1) !important;
  /* 悬停时加一点背景色 */
  border: none !important;
  /* [修复] 悬停时也不显示边框 */
  box-shadow: none !important;
  /* [修改] 去掉影子效果 */
}

/* [新增] 群组模式下的其他按钮 - 橙色主题 */
.input-area.group-mode-active .action-btn-small {
  border: 2px solid #e6a23c !important;
  color: #e6a23c !important;
  background-color: transparent !important;
  box-shadow: 0 0 8px rgba(230, 162, 60, 0.3) !important;
}

.input-area.group-mode-active .action-btn-small:hover {
  border-color: #f0a040 !important;
  color: #f0a040 !important;
  background-color: rgba(230, 162, 60, 0.1) !important;
  box-shadow: 0 0 12px rgba(230, 162, 60, 0.5) !important;
}

/* [修改] 提示词优化和清除按钮 - 去掉边框，只保留图标（两种模式都适用） */
#btn-optimize-prompt,
#btn-clear-history {
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

#btn-optimize-prompt:hover,
#btn-clear-history:hover {
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* [修复] 橙色模式下提示词优化和清除按钮悬停 - 确保显示橙色 */
.input-area.group-mode-active #btn-optimize-prompt:hover,
.input-area.group-mode-active #btn-clear-history:hover {
  border: none !important;
  color: #f0a040 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* [修复] 橙色模式下按钮内图标的悬停效果 - 使用橙色阴影 */
.input-area.group-mode-active #btn-optimize-prompt:hover .icon-hover-animate,
.input-area.group-mode-active #btn-clear-history:hover .icon-hover-animate {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(230, 162, 60, 0.6)) !important;
}

/* [新增] 个体模式下的提示词优化和清除按钮 - 蓝色主题 */
.input-area:not(.group-mode-active) #btn-optimize-prompt:hover,
.input-area:not(.group-mode-active) #btn-clear-history:hover {
  border: none !important;
  color: #409eff !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* [新增] 个体模式下按钮内图标的悬停效果 - 使用蓝色阴影 */
.input-area:not(.group-mode-active) #btn-optimize-prompt:hover .icon-hover-animate,
.input-area:not(.group-mode-active) #btn-clear-history:hover .icon-hover-animate {
  filter: brightness(1.2) drop-shadow(0 0 8px rgba(64, 158, 255, 0.6)) !important;
}

/* [新增] 橙色模式下发送按钮的loading动画 - 加快速度并改为橙色 */
.input-area.group-mode-active #btn-send-message.loading {
  background: rgba(230, 162, 60, 0.1) !important;
  /* 橙色底色 */
}

/* 橙色模式下的雷达扩散动画 - 加快速度并改为橙色 */
.input-area.group-mode-active #btn-send-message.loading::before {
  background: radial-gradient(circle, rgba(230, 162, 60, 0.6) 0%, transparent 70%) !important;
  animation: loading-radar-pulse 1.2s ease-out infinite !important;
  /* 从2s加快到1.2s */
}

/* 橙色模式下的旋转流光背景层 - 加快速度并改为橙色 */
.input-area.group-mode-active #btn-send-message.loading::after {
  background: conic-gradient(from 0deg,
      transparent 0%,
      rgba(230, 162, 60, 0.2) 25%,
      rgba(230, 162, 60, 0.5) 50%,
      rgba(230, 162, 60, 0.9) 75%,
      rgba(230, 162, 60, 1) 85%,
      rgba(230, 162, 60, 0.4) 95%,
      transparent 100%) !important;
  animation: loading-glow-spin 0.5s linear infinite !important;
  /* 从0.8s加快到0.5s */
}

/* 橙色模式下的loading图标 - 改为橙色发光 */
.input-area.group-mode-active #btn-send-message.loading .loading-icon-wrapper img {
  filter: drop-shadow(0 0 10px rgba(230, 162, 60, 0.9)) !important;
}

/* 橙色模式下的图标脉冲动画 - 加快速度 */
.input-area.group-mode-active #btn-send-message.loading .loading-icon-wrapper {
  animation: loading-icon-pulse 0.7s ease-in-out infinite !important;
  /* 从1s加快到0.7s */
}

/* [删除] 去掉群组模式标签 */

/* [修改] 工作流容器：去除上边距，实现贴合 */
.workflow-container {
  margin-top: -20px !important;
  /* 强制上移 */
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  /* 移除外层边框 */
  border-radius: 8px;

  /* 布局调整 */
  display: none;
  flex-direction: column;
  /* align-items: center;  不要居中对齐，因为蛇形布局需要两端对齐的 flex-start/end */

  max-height: none;
  /* 移除最大高度限制 */
  overflow-y: visible;
  /* 改为visible，确保按钮可见 */

  padding-bottom: 0 !important;
  /* 不需要底部空间了，因为按钮在内部 */
  position: relative;
  /* 关键 */
}

.workflow-header {
  display: flex;
  justify-content: center;
  /* 标题居中 */
  align-items: center;
  margin-bottom: 15px;
  font-size: 0.9em;
  color: var(--text-secondary);
  width: 100%;
}

/* [修改] 每一行：蛇形布局基础 */
.workflow-row {
  display: flex;
  align-items: center;
  gap: 35px;
  margin-bottom: 10px;
  /* 行间距 */
  position: relative;
  width: auto;
  /* 自动宽度 */
  flex-shrink: 0;
  padding: 5px 10px;
  box-sizing: border-box;
  justify-content: flex-start;
  /* 左对齐 */
  margin-right: auto;
}

/* [关键] 偶数行 (第二行) 反向排列：从右往左 */
.workflow-row.reverse {
  flex-direction: row-reverse !important;
  /* 在 row-reverse 下，justify-content: flex-start 意味着内容靠右对齐，这是对的 */
}

/* --- 箭头系统 (蛇形逻辑恢复) --- */

/* 直线箭头 */
.arrow-connector {
  position: absolute;
  top: 50%;
  width: 35px;
  height: 2px;
  background: #e6a23c;
  pointer-events: none;
  z-index: 100;
  /* 提高层级，不被遮挡 */
}

.arrow-connector::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* LTR (左->右) 行：箭头在右侧，指向右 */
.workflow-row:not(.reverse) .agent-module .arrow-connector {
  right: -38px;
}

.workflow-row:not(.reverse) .agent-module .arrow-connector::after {
  right: -5px;
  border-left: 8px solid #e6a23c;
}

/* RTL (右->左) 行：箭头在左侧，指向左 */
.workflow-row.reverse .agent-module .arrow-connector {
  left: -38px;
}

.workflow-row.reverse .agent-module .arrow-connector::after {
  left: -5px;
  border-right: 8px solid #e6a23c;
  /* 向左指 */
}

/* 转弯箭头 (蛇形布局 - 加长版) */
.turn-connector {
  position: absolute;
  width: 30px;
  /* 加宽横向部分 */
  height: 40px;
  /* 加长纵向部分 */
  border: 3px solid #e6a23c;
  /* 加粗线条 */
  border-top: none;
  pointer-events: none;
  z-index: 100;
  /* 提高层级，不被遮挡 */
}

.turn-connector::after {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* 右侧转弯（左→右行结束，转向右→左行） */
.turn-right-down {
  right: -35px;
  top: calc(50% - 20px);
  /* 垂直对齐节点中心 */
  border-radius: 0 0 12px 0;
  border-left: none;
  border-right: 3px solid #e6a23c;
  border-bottom: 3px solid #e6a23c;
}

.turn-right-down::after {
  left: -10px;
  border-right: 12px solid #e6a23c;
  /* 向左指 */
}

/* 左侧转弯（右→左行结束，转向左→右行） */
.turn-left-down {
  left: -35px;
  top: calc(50% - 20px);
  /* 垂直对齐节点中心 */
  border-radius: 0 0 0 12px;
  border-right: none;
  border-left: 3px solid #e6a23c;
  border-bottom: 3px solid #e6a23c;
}

.turn-left-down::after {
  right: -10px;
  border-left: 12px solid #e6a23c;
  /* 向右指 */
}

/* [新增] 工作流主容器 */
.workflow-main-container {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding-bottom: 60px;
  /* 为底部固定按钮留空间 */
}

/* [修改] 按钮区域：固定在浏览器底部右边，横向排列 */
.workflow-side-actions {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  z-index: 1000;
  /* 确保在最上层 */
}

.workflow-side-actions button {
  min-width: 100px;
  padding: 8px 15px;
  white-space: nowrap;
  font-size: 14px;
}

/* [新增] 工作流底部提示文字样式 */
.workflow-hint-text {
  font-size: 12px;
  color: #93a9c1;
  /* 深蓝色 (Bootstrap Primary Blue 风格，或者你可以用更深的 #0056b3) */
  text-align: center;
  /* 居中 */
  margin: 10px 0;
  opacity: 0.5;
  /* 透明度 50% */
  width: 100%;
}

/* 如果你想让它在深色模式下更明显一点，可以微调颜色，或者保持蓝色 */
[data-theme="light"] .workflow-hint-text {
  color: #0056b3;
  /* 浅色模式下用稍微深一点的蓝 */
}

/* [修复] 仓库列表项：增加间距 */
.repo-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  padding: 12px 15px;
  /* 增加内边距 */
  margin-bottom: 10px;
  /* [修改] 增加下边距 */
  border-radius: 6px;
  cursor: grab;
  user-select: none;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 14px;
  /* 字体稍大一点 */
}

.repo-item:hover {
  border-color: var(--accent-color);
  transform: translateX(5px);
}

.repo-item:active {
  cursor: grabbing;
}

/* 仓库列表项内容区域 */
.repo-item-content {
  flex: 1;
  cursor: pointer;
  min-width: 0;
  /* 允许文字截断 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 仓库列表项删除按钮 - [修复] 统一为正方形，靠右对齐 */
.repo-item-delete {
  flex-shrink: 0 !important;
  width: 24px !important;
  /* [修改] 统一尺寸 */
  height: 24px !important;
  /* [修改] 统一尺寸，确保是正方形 */
  border-radius: 4px !important;
  /* [修改] 正方形圆角 */
  background: transparent;
  color: #ff4d4f;
  border: 1px solid #ff4d4f;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0 !important;
  margin-right: 0 !important;
  /* [修改] 去掉右边距 */
  margin-left: auto !important;
  /* [修改] 确保靠右对齐 */
  transition: all 0.2s;
  position: relative;
  box-sizing: border-box !important;
  /* [新增] 确保尺寸计算正确 */
}

.repo-item-delete::before {
  content: "×";
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  color: #ff4d4f;
}

.repo-item-delete:hover {
  background: #ff4d4f;
  border-color: #ff4d4f;
  transform: scale(1.1);
}

.repo-item-delete:hover::before {
  color: white;
}

/* [修复] 仓库关闭按钮：强制正圆，防止被Flex压缩 */
#btn-close-repo {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  /* 防止压缩 */
  min-height: 24px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 77, 79, 0.1) !important;
  color: #ff4d4f !important;
  border: 1px solid rgba(255, 77, 79, 0.2) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: all 0.2s;
  flex-shrink: 0 !important;
  /* 关键：禁止被 Flex 布局挤压 */
  margin-left: 10px;
}

#btn-close-repo:hover {
  background-color: #ff4d4f !important;
  color: white !important;
}

/* [新增] 工作流窗口图标按钮样式 - 蓝色窗口图标 */
.workflow-window-icon-btn {
  background: rgba(64, 158, 255, 0.1) !important;
  border: 2px solid #409eff !important;
  color: #409eff !important;
  box-shadow: 0 0 10px rgba(64, 158, 255, 0.3) !important;
  transition: all 0.3s ease !important;
}

.workflow-window-icon-btn:hover {
  background: rgba(64, 158, 255, 0.2) !important;
  border-color: #66b1ff !important;
  color: #66b1ff !important;
  box-shadow: 0 0 15px rgba(64, 158, 255, 0.5) !important;
  transform: scale(1.05);
}

.workflow-window-icon-btn:active {
  transform: scale(0.95);
}

.workflow-window-icon-btn svg {
  filter: drop-shadow(0 0 3px rgba(64, 158, 255, 0.6));
}

/* [新增] 橙色模式下的窗口按钮样式 */
.workflow-window-icon-btn.orange-mode {
  background: rgba(230, 162, 60, 0.1) !important;
  border: 2px solid #e6a23c !important;
  color: #e6a23c !important;
  box-shadow: 0 0 10px rgba(230, 162, 60, 0.3) !important;
}

.workflow-window-icon-btn.orange-mode:hover {
  background: rgba(230, 162, 60, 0.2) !important;
  border-color: #f0b85c !important;
  color: #f0b85c !important;
  box-shadow: 0 0 15px rgba(230, 162, 60, 0.5) !important;
  transform: scale(1.05);
}

.workflow-window-icon-btn.orange-mode svg {
  filter: drop-shadow(0 0 3px rgba(230, 162, 60, 0.6));
}

/* [新增] 禁用状态的灰色样式 */
.workflow-window-icon-btn.disabled,
.workflow-window-icon-btn:disabled {
  background: rgba(128, 128, 128, 0.1) !important;
  border: 2px solid #666 !important;
  color: #666 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.workflow-window-icon-btn.disabled:hover,
.workflow-window-icon-btn:disabled:hover {
  background: rgba(128, 128, 128, 0.1) !important;
  border-color: #666 !important;
  color: #666 !important;
  transform: none !important;
  box-shadow: none !important;
}

.workflow-window-icon-btn.disabled svg,
.workflow-window-icon-btn:disabled svg {
  filter: none !important;
  opacity: 0.5 !important;
}

/* [新增] 个性化按钮禁用状态 */
#btn-personalize-agent.disabled,
#btn-personalize-agent:disabled {
  background: rgba(128, 128, 128, 0.1) !important;
  border-color: #666 !important;
  color: #666 !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

#btn-personalize-agent.disabled:hover,
#btn-personalize-agent:disabled:hover {
  background: rgba(128, 128, 128, 0.1) !important;
  border-color: #666 !important;
  color: #666 !important;
}

/* [修改] 仓库侧边栏：增加顶部选项卡的高度适配 */
/* [修复] 智能体仓库 (左侧抽屉) */
.agent-repository-drawer {
  position: fixed;
  top: 0;
  left: -350px;
  width: 350px;
  height: 100%;
  background-color: rgba(5, 5, 5, 0.85);
  /* 加深背景，防止透视太乱 */
  border-right: 1px solid var(--border-color);
  z-index: 25000;
  transition: left 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 0;
  /* 内部元素自己管理 padding */
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

.agent-repository-drawer.open {
  left: 0;
}

/* [修改] 可拖动的工作流浮窗 */
.workflow-floating-window {
  position: fixed;
  /* [修改] 初始位置：水平居中，显示在按钮下方 */
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  /* 固定宽度，可容纳4个节点 */
  max-width: 90vw;
  background-color: rgba(10, 10, 10, 0.98);
  border: 2px solid var(--accent-color);
  /* 使用主题主色 */
  border-radius: 8px;
  z-index: 500;
  /* [修改] 降低层级，确保不会阻止下面输入框的交互 */
  display: none;
  /* 默认隐藏 */
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  /* [修复] 默认禁用交互，避免遮挡其他元素 */
  backdrop-filter: blur(15px);
}

.workflow-floating-window.open {
  display: flex;
  pointer-events: auto;
  /* [修复] 打开时启用交互 */
}

/* 拖动条 - 15px高度 */
.workflow-drag-handle {
  height: 15px;
  background: linear-gradient(to bottom, rgba(64, 158, 255, 0.2), rgba(64, 158, 255, 0.1));
  /* 使用主题主色 */
  border-bottom: 1px solid var(--accent-color);
  cursor: move;
  display: flex;
  justify-content: center;
  /* [修改] 居中对齐 */
  align-items: center;
  padding: 0 10px;
  user-select: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.workflow-drag-handle:hover {
  background: linear-gradient(to bottom, rgba(64, 158, 255, 0.3), rgba(64, 158, 255, 0.15));
}

.close-btn-mini {
  background: transparent;
  border: none;
  color: #ff4d4f;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 15px;
  height: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn-mini:hover {
  color: #ff7875;
}

/* 节点容器 - 三行高度 */
.workflow-window-body {
  padding: 15px;
  overflow-y: auto;
  max-height: 250px;
  /* 约三行节点的高度 */
}

.workflow-nodes-container {
  min-height: 180px;
  /* 确保有足够空间 */
}

/* 底部按钮 - 居中 */
.workflow-window-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 8px 15px;
  /* 高度往上收：从12px减少到8px */
  border-top: 2px solid var(--accent-color);
  /* 使用主题主色，和表框颜色一样 */
  background: rgba(64, 158, 255, 0.05);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.workflow-window-footer button {
  min-width: 90px;
  padding: 6px 12px;
  font-size: 13px;
}

/* 顶部选项卡 */
.repo-tabs {
  display: flex;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  padding-top: 15px;
  /* 防止被压缩 */
}

.repo-tab-btn {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.repo-tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.02);
}

.repo-tab-btn.active {
  color: var(--accent-color);
  font-weight: bold;
  border-bottom: 2px solid var(--accent-color);
  background: rgba(255, 255, 255, 0.05);
}

/* 标题栏 */
.repo-header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.repo-header span {
  font-weight: bold;
  color: var(--accent-color);
}

/* 列表容器 */
.repo-list {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* [新增] 仓库顶部选项卡容器 */
.repo-tabs {
  display: flex;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--border-color);
}

.repo-tab-btn {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.2s;
  background: transparent;
  border: none;
}

.repo-tab-btn.active {
  color: var(--accent-color);
  background: rgba(255, 255, 255, 0.05);
  font-weight: bold;
  border-bottom: 2px solid var(--accent-color);
}

/* [修改] 仓库列表容器 */
.repo-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  /* 内边距移到这里 */
}

/* [新增] 群组列表项样式 (区别于单体) */
.repo-item.group-item {
  border-left: 3px solid #e6a23c;
  /* 橙色左边框区分 */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.group-icon {
  margin-right: 8px;
  font-size: 1.2em;
}

/* [修复] 扩大拖拽感应区域：让 workflow-row 铺满容器 */
.workflow-container {
  /* ... 原有样式 ... */
  /* 确保容器本身就是巨大的感应区 */
  min-height: 150px;
}

#workflow-snake-container {
  padding: 30px;
  /* 增加内边距，为绿色拖拽区域留空间 */
  width: auto;
  max-width: 100%;
  min-height: 200px;
  /* 增加最小高度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  position: relative;
}

/* [修改] 空状态时显示绿色虚线拖拽区域 */
#workflow-snake-container.empty {
  /* 外层橙色边框 - 整个展开区域 */
  border: 2px dashed #e6a23c;
  background: rgba(230, 162, 60, 0.03);
  min-height: 250px;
}

/* [新增] 空状态时的内层拖拽区域（绿色） */
#workflow-snake-container.empty::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 66.67%;
  /* 宽度2/3 */
  height: calc(100% - 40px);
  /* 比外层小一圈 */
  border: 2px dashed #67c23a;
  /* 绿色虚线 */
  background: rgba(103, 194, 58, 0.05);
  /* 淡绿色半透明背景 */
  border-radius: 6px;
  pointer-events: none;
  /* 不阻挡点击事件 */
}

/* 让行容器也有一定的感应高度 */
.workflow-row {
  /* ... 原有样式 ... */
  min-height: 60px;
  /* 增加透明边框作为感应区扩大 */
  border: 1px solid transparent;
}


/* 让行容器也稍微撑大一点 */
.workflow-row {
  /* ... 原有样式 ... */
  padding-top: 10px;
  padding-bottom: 10px;
}

/* 名片上的收起按钮 */
#btn-retract-card {
  position: absolute !important;
  top: 8px;
  right: 8px;
  z-index: 1001;
  cursor: pointer;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  width: auto !important;
  /* 防止被通用 button 样式影响 */
  height: auto !important;
}

#btn-retract-card:hover {
  color: white;
}

/* 页面右上角的恢复按钮 (外星人/箭头) */
/* 注意：此样式已被后面的更具体样式覆盖，保留用于兼容性 */
#restore-card-btn {
  position: absolute;
  top: 10px;
  right: 80px;
  z-index: 900;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border-color);
  color: var(--accent-color);
  display: none;
  /* 默认隐藏，JS控制显示 */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: all 0.3s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#restore-card-btn:hover {
  transform: scale(1.1);
  background: var(--bg-surface);
  box-shadow: 0 0 15px var(--accent-glow);
}

/* =========================================
         [新增] API 高级设置界面样式 (仿 Cherry Studio)
         ========================================= */
.api-split-container {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 400px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--bg-surface);
}

/* 左侧服务商列表 */
.api-sidebar {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  border-right: none;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 260px;
  flex-shrink: 0;
  /* 防止侧边栏被压缩 */
}

.api-provider-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: flex-start;
  max-height: 92px;
  padding-bottom: 4px;
}

.api-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  margin: 0;
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.api-sidebar-header-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
}

.provider-collapse-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.provider-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-primary);
}

.api-sidebar:not(.show-disabled) .provider-item[data-provider-enabled="0"]:not(.active) {
  display: none;
}

.api-sidebar .provider-item[data-provider-enabled="0"] {
  opacity: 0.75;
}

.provider-item {
  padding: 7px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  transition: all 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  flex: 0 1 auto;
  white-space: nowrap;
}

.api-sidebar .provider-item+.provider-item {
  margin-top: 0;
}

.provider-item:hover {
  background-color: var(--bg-hover-transparent);
  color: var(--text-primary);
}

.provider-item.active {
  background-color: rgba(64, 158, 255, 0.1);
  color: var(--accent-color);
  border-color: rgba(64, 158, 255, 0.5);
  font-weight: bold;
}

.provider-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
}

/* 右侧配置区域 */
.api-config-panel {
  flex: 1;
  width: 100%;
  padding: 24px;
  padding-bottom: 30px;
  /* 底部添加足够的内边距，确保内容不被遮挡 */
  overflow-y: visible;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

.api-config-panel .api-config-card,
.api-config-panel .api-config-placeholder,
.api-config-panel .config-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.api-config-placeholder {
  text-align: center;
  color: var(--text-secondary);
  padding: 40px 10px;
  font-size: 14px;
}

.api-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.model-mode-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.model-mode-row>.api-form-group {
  flex: 1 1 0;
  min-width: 0;
}

.api-form-group label {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-primary);
}

/* 检测支持的模型按钮 - 统一绿色样式 */
#btn-detect-models {
  background-color: #67c23a !important;
  color: #fff !important;
  border: 1px solid #67c23a !important;
  transition: all 0.2s ease;
}

#btn-detect-models:hover {
  background-color: #85ce61 !important;
  border-color: #85ce61 !important;
  box-shadow: 0 0 12px rgba(103, 194, 58, 0.5) !important;
  filter: brightness(1.05);
  transform: translateY(-1px);
  opacity: 1;
}

.api-form-group input[type="text"],
.api-form-group input[type="password"] {
  width: 100%;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-input);
  color: var(--text-primary);
}

/* 模型检测区域 */
.model-detect-section {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  margin-top: 10px;
}

.detect-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.model-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 150px;
  overflow-y: auto;
}

.model-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  color: var(--text-primary);
  font-weight: 500;
}

.model-chip:hover {
  border-color: var(--accent-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.model-chip.selected {
  background-color: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
}

.model-chip.selected:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* 底部开关 */
.provider-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed var(--border-color);
  margin-top: auto;
  /* 推到底部 */
}

.switch-toggle {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 28px;
}

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

.switch-toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(108, 117, 125, 0.38), rgba(108, 117, 125, 0.26));
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.switch-toggle .slider::after {
  content: "启用";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.95);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.switch-toggle .slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: linear-gradient(180deg, #ffffff, #f2f4f8);
  transition: transform 0.28s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.25s ease, background 0.25s ease;
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.switch-toggle input:checked+.slider {
  background-color: var(--accent-color);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  border-color: var(--accent-color);
  box-shadow: 0 8px 22px rgba(64, 158, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.switch-toggle input:checked+.slider::after {
  opacity: 1;
}

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

/* =================================================================
   [最终修复] 布局/名片/按钮样式补丁 (追加到 style.css 底部)
   ================================================================= */

/* 1. 聊天窗口布局修复：撑满高度，消除底部黑边 */
.main-pane {
  display: flex !important;
  flex-direction: row !important;
  height: calc(100vh - 60px) !important;
  /* 减去顶部导航高度 */
  overflow: hidden !important;
  /* 禁止整体页面滚动 */
  width: 100% !important;
  /* 确保占满整行 */
  max-height: calc(100vh - 60px) !important;
  /* 最大高度限制 */
  gap: 0;
  /* 移除间隙 */
}

.chat-main-area {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 50%;
  /* [修改] 默认宽度50% (5/10)，使用flex-grow */
  height: 100% !important;
  /* 占据父容器高度 */
  min-width: 300px !important;
  /* 最小宽度限制 */
  overflow: hidden !important;
  position: relative !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 聊天记录区域：占据剩余空间，独立滚动 */
#chat-display-area {
  flex: 1 !important;
  overflow-y: auto !important;
  /* [修改] 底部内边距 = 输入框高度(约85px) + 5px = 90px */
  padding-bottom: 90px !important;
  height: auto !important;
  position: relative !important;
  z-index: 1 !important;
  /* 确保滚动条在上层，不被遮挡 */
}

/* [修复] 确保滚动条可见且可用 */
#chat-display-area::-webkit-scrollbar {
  width: 10px;
  z-index: 100 !important;
  /* 滚动条在上层 */
}

#chat-display-area::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

#chat-display-area::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 5px;
}

#chat-display-area::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
  opacity: 0.8;
}

/* [新增] 橙色模式下滚动条颜色 */
body.group-mode-active #chat-display-area::-webkit-scrollbar-thumb {
  background: #e6a23c !important;
  /* 橙色滚动条 */
}

body.group-mode-active #chat-display-area::-webkit-scrollbar-thumb:hover {
  background: #f0a040 !important;
  /* 悬停时稍亮的橙色 */
}

/* 输入框区域：固定在底部，不随页面滚动 */
.input-area {
  position: fixed !important;
  /* 固定定位，浮动在底部 */
  bottom: 70px !important;
  /* 距离浏览器底部70px（往上移动50px） */
  left: 50% !important;
  /* 从50%位置开始 */
  transform: translateX(-50%) !important;
  /* 向左移动自身宽度的50%，实现水平居中 */
  width: auto;
  /* 自动宽度，适应内容 */
  /* [新增] 默认蓝色边框 - 个体智能体模式 */
  border-radius: 12px !important;
  box-shadow: 0 0 15px rgba(64, 158, 255, 0.2) !important;
  max-width: calc(100% - 440px);
  /* 最大宽度限制 */
  z-index: 10001 !important;
  /* [修改] 确保在弹框之上(弹框z-index: 9999)，始终可用 */
  background-color: var(--bg-surface) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
  /* 添加阴影，突出显示 */
  margin: 0 !important;
  transition: bottom 0.4s ease, transform 0.4s ease !important;
}

#tab-agent .input-area.welcome-mode {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: 28px !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 40px) !important;
  max-width: 900px !important;
  margin: 0 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  z-index: 1000 !important;
}

#tab-agent .input-area {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* [新增] 添加平滑过渡动画 */
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#tab-agent .input-area:not(.welcome-mode) {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 20px !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 40px) !important;
  max-width: 900px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 1000 !important;
}

#tab-agent .input-area.collapsed {
  display: none !important;
}

#tab-agent[data-agent-mode]:not([data-agent-mode="native"]) .agent-controls,
#tab-agent[data-agent-mode]:not([data-agent-mode="native"]) .main-pane,
#tab-agent[data-agent-mode]:not([data-agent-mode="native"]) .input-area {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* [修改] 灵感内容从输入框下方展开，不需要移动输入框 */

/* [新增] 当输入框在上面时，隐藏收起按钮 */
.input-area.welcome-mode+.collapse-chat-btn,
.collapse-chat-btn.hidden-when-top {
  display: none !important;
}

/* 当输入框在底部时，显示收起按钮 */
.collapse-chat-btn:not(.hidden-when-top) {
  display: flex !important;
}

/* [新增] 欢迎模式下灵感容器样式 - 从顶部开始展开 */
.input-area.welcome-mode .inspiration-container {
  width: 100%;
  max-width: 600px;
  align-items: flex-start;
}

/* 2. [蓝色3D按钮] 切换智能体集群 */
#btn-toggle-workflow {
  background: linear-gradient(145deg, #409eff, #337ecc) !important;
  border: 1px solid #2d70b3 !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 0 #1f558a,
    /* 3D 厚度 */
    0 5px 10px rgba(0, 0, 0, 0.3)
    /* 投影 */
     !important;
  border-radius: 6px !important;
  font-weight: bold !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-2px);
  /* 默认稍微上浮 */
  transition: all 0.1s !important;
  margin-left: 15px !important;
  padding: 0 5px !important;
  /* [修改] 减少间距，最大5像素 */
  height: 34px !important;
}

#btn-toggle-workflow:active {
  transform: translateY(2px) !important;
  /* 按下效果 */
  box-shadow:
    0 0 0 #1f558a,
    /* 厚度消失 */
    inset 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

/* [新增] 橙色模式下切换按钮样式 */
body.group-mode-active #btn-toggle-workflow,
.group-mode-active #btn-toggle-workflow {
  background: linear-gradient(145deg, #e6a23c, #d4941f) !important;
  border: 1px solid #c0851a !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 0 #a06d15,
    /* 3D 厚度 - 橙色 */
    0 5px 10px rgba(230, 162, 60, 0.4)
    /* 投影 - 橙色 */
     !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important;
}

body.group-mode-active #btn-toggle-workflow:active,
.group-mode-active #btn-toggle-workflow:active {
  transform: translateY(2px) !important;
  /* 按下效果 */
  box-shadow:
    0 0 0 #a06d15,
    /* 厚度消失 */
    inset 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

body.group-mode-active #btn-toggle-workflow:hover,
.group-mode-active #btn-toggle-workflow:hover {
  background: linear-gradient(145deg, #f0a040, #e6a23c) !important;
  box-shadow:
    0 4px 0 #c0851a,
    0 6px 15px rgba(230, 162, 60, 0.5) !important;
}

/* 3. 个人名片样式修复 */
#user-profile-card {
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  border-radius: 0 0 12px 12px !important;
}

/* 简介区域动画修复 */
#profile-bio-content {
  overflow: hidden !important;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

/* 收起状态 */
#profile-bio-content.bio-collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  padding: 0 !important;
  border-top: none !important;
}

/* 展开状态 */
#profile-bio-content:not(.bio-collapsed) {
  max-height: 500px !important;
  opacity: 1 !important;
  padding: 5px 5px !important;
  /* [修改] 减少间距，最大5像素 */
}

/* 右侧展开箭头 (▼) 修复 */

#btn-toggle-bio:hover {
  background: var(--accent-color) !important;
  color: white !important;
  border-color: var(--accent-color) !important;
}

/* 底部收起按钮 (▲) 修复：悬挂在名片下方 */
#btn-retract-card {
  position: absolute !important;
  top: auto !important;
  bottom: -32px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 60px !important;
  height: 24px !important;
  border-radius: 0 0 12px 12px !important;
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
  color: var(--text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 0 !important;
  font-size: 12px !important;
  transition: all 0.2s !important;
}

#btn-retract-card:hover {
  background-color: var(--bg-input) !important;
  color: var(--accent-color) !important;
  height: 28px !important;
  bottom: -28px !important;
}


/* 右侧展开箭头 (▼) 修复 */
#btn-toggle-bio {
  width: 28px !important;
  height: 28px !important;
  /* border-radius: 50% !important; */
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  /* 移除边框 */
  color: var(--text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin-left: 0 !important;
  /* 强制靠右 */
  transition: all 0.3s ease !important;
}

#btn-toggle-bio:hover {
  background: var(--accent-color) !important;
  color: white !important;
  border-color: var(--accent-color) !important;
}

/* 底部收起按钮 (▲) 修复：半圆 Tab 样式 */
#btn-retract-card {
  position: absolute !important;
  top: auto !important;
  /* 覆盖掉 index.html 里的 top:8px */
  /* 悬挂在名片下方 */
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 60px !important;
  height: 24px !important;
  border-radius: 0 0 12px 12px !important;
  /* 下半圆角 */

  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
  /* 去掉上边框，与名片融合 */
  color: var(--text-secondary) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 0 !important;
  /* 在名片图层之下，看起来像一体 */

  font-size: 12px !important;
  line-height: 1 !important;
  transition: all 0.2s !important;
}

#btn-retract-card:hover {
  background-color: var(--bg-input) !important;
  color: var(--accent-color) !important;
  height: 28px !important;
  /* 悬停稍微变长 */
  bottom: -28px !important;
}

/* 简介区域动画修复 */
#profile-bio-content {
  overflow: hidden !important;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}

/* 收起状态 */
#profile-bio-content.bio-collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  padding: 0 !important;
  border-top: none !important;
}

/* 展开状态 */
#profile-bio-content:not(.bio-collapsed) {
  max-height: 500px !important;
  /* 足够的高度 */
  opacity: 1 !important;
  padding: 10px 15px !important;
}

/* =================================================================
   [新增] 辅助工具 - 运行视图样式 (导航模式)
   ================================================================= */

/* 1. 运行容器：占满 Tab 内容区 */
.tool-runner-container {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  background-color: var(--bg-surface);
  border-radius: 0 !important;
  /* 移除圆角，占满整个容器 */
  overflow: hidden !important;
  border: none !important;
  /* 移除边框 */
  animation: fadeIn 0.3s ease-out;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

/* 2. 顶部导航条 */
.tool-runner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 按钮左，标题中 */
  padding: 10px 20px;
  background-color: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-color);
  height: 50px;
  flex-shrink: 0;
}

/* 3. 内容区域 (Iframe 容器) */
.tool-runner-body {
  flex: 1 1 auto !important;
  position: relative !important;
  background-color: #0c0c0c;
  /* 深色底，防止 iframe 加载白屏刺眼 */
  overflow: hidden !important;
  min-height: 0 !important;
  height: calc(100% - 50px) !important;
  /* 减去header(50px)的高度 */
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

/* 4. Iframe 全屏填充 */
#tool-runner-frame {
  width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border: none !important;
  display: block !important;
  background: transparent;
  /* 确保iframe可以显示完整内容 */
  position: relative !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

/* 5. 针对外部网站的特殊样式 - 确保菜单可见 */
.tool-runner-body iframe[src*="ps.pic.net"] {
  min-height: 100vh;
  height: 100vh;
  /* 给足够的高度显示完整页面 */
}

/* 6. 当iframe加载外部网站时，确保容器不会裁剪内容 */
.tool-runner-body:has(iframe[src*="ps.pic.net"]) {
  overflow: visible;
}

/* 7. 隐藏图片pro外援的滚动条 */
.tool-runner-body iframe[src*="ps.pic.net"] {
  overflow: hidden !important;
}

/* 隐藏图片pro外援容器的滚动条 */
.tool-runner-body:has(iframe[src*="ps.pic.net"]) {
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.tool-runner-body:has(iframe[src*="ps.pic.net"])::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* 兼容性：如果浏览器不支持:has()，使用类名 */
.tool-runner-body.allow-overflow {
  overflow: visible;
}

iframe {
  background-color: var(--bg-surface);
}

/* =================================================================
   [强制修复] 辅助工具页面高度问题 - 最高优先级
   ================================================================= */
/* 强制让工具运行器占满整个可用高度 */
body #tab-tools.tab-content.active .tool-runner-container:not(.hidden) {
  height: calc(100vh - 60px) !important;
  min-height: calc(100vh - 60px) !important;
  max-height: calc(100vh - 60px) !important;
}

body #tab-tools.tab-content.active .tool-runner-body {
  height: calc(100vh - 60px - 50px) !important;
  min-height: calc(100vh - 60px - 50px) !important;
  max-height: calc(100vh - 60px - 50px) !important;
  flex: 1 1 auto !important;
  padding-bottom: 20px !important;
  box-sizing: border-box !important;
}

body #tab-tools.tab-content.active #tool-runner-frame {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}

/* =================================================================
   图片pro外援加载进度条样式
   ================================================================= */
.pro-tool-progress-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pro-tool-progress-container.hidden {
  display: none;
}

.pro-tool-progress-wrapper {
  width: 200px;
  position: relative;
}

.pro-tool-progress-bar {
  width: 200px;
  height: 8px;
  background: linear-gradient(145deg, #1a1a2e, #0f0f1e);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.2);
}

.pro-tool-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
      #1e3a8a 0%,
      #2563eb 25%,
      #3b82f6 50%,
      #2563eb 75%,
      #1e3a8a 100%);
  border-radius: 10px;
  position: relative;
  animation: progressShine 2s ease-in-out infinite;
  box-shadow:
    0 0 10px rgba(37, 99, 235, 0.6),
    0 0 20px rgba(37, 99, 235, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: width 0.3s ease;
}

.pro-tool-progress-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 100%);
  animation: progressSweep 1.5s ease-in-out infinite;
}

@keyframes progressShine {

  0%,
  100% {
    box-shadow:
      0 0 10px rgba(37, 99, 235, 0.6),
      0 0 20px rgba(37, 99, 235, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  50% {
    box-shadow:
      0 0 15px rgba(37, 99, 235, 0.8),
      0 0 30px rgba(37, 99, 235, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

@keyframes progressSweep {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(200%);
  }
}

/* =================================================================
   [修复] 右上角按钮变形问题 (被全局样式干扰)
   ================================================================= */

/* 问题原因：全局 button 设置了 padding: 0 24px !important;
   导致原本设计为圆形/方形的小图标按钮被强行撑宽成椭圆。
   修复方案：针对这些图标按钮，强制移除 padding 并锁定宽度。
*/

.toggle-bio-btn,
/* 名片展开箭头 */
.close-btn,
/* 弹窗关闭叉号 */
.nav-tool-btn,
/* 工具左右切换 */
#btn-close-repo,
/* 仓库关闭按钮 */
.control-btn-overlay,
/* 游戏控制按钮 */
.preview-delete-btn

/* 图片删除按钮 */
  {
  padding: 0 !important;
  /* 核心修复：移除内边距 */
  width: var(--btn-size, 32px) !important;
  /* 恢复默认宽度 */
  border-radius: 50% !important;
  /* 强制圆形 */
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
  /* 防止被挤压 */
}

/* API配置区域按钮统一方形样式 */
.icon-btn {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
}

.small-btn {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 缩小API配置红框区域整体宽度 */
.api-split-container {
  /* max-width: 720px !important; */
  margin: 0 auto !important;
}

/* 特别指定名片箭头的大小 */
.toggle-bio-btn {
  --btn-size: 24px;
  width: 24px !important;
  height: 24px !important;
}

/* 确保关闭按钮是圆的 */
.close-btn {
  --btn-size: 32px;
  width: 32px !important;
  height: 32px !important;
}

[data-theme="personal"] button {
  padding: 10px 15px 10px 15px !important;
}

/* =================================================================
   [修复] 个人名片与外星人按钮交互动画 (最终版)
   ================================================================= */

/* 1. 名片主体：固定宽度，便于计算中心点 */
#user-profile-card {
  width: 320px !important;
  /* 固定宽度 */
  right: 20px !important;
  /* 固定右边距 */
  top: 0 !important;
  position: fixed !important;
  z-index: 2000 !important;

  display: flex !important;
  flex-direction: column !important;

  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;

  /* 整体位移动画 */
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  transform: translateY(0) !important;
  /* 默认显示 */
}

/* 收起状态：向上移出屏幕 */
#user-profile-card.retracted {
  transform: translateY(-110%) !important;
}

/* 2. 简介区域：高度动画 */
#profile-bio-content {
  overflow: hidden !important;
  /* 默认收起 */
  max-height: 0 !important;
  opacity: 0 !important;
  padding: 0 5px !important;
  /* [修改] 减少间距，最大5像素 */
  /* 左右保留padding，上下由height控制 */
  border-bottom: 1px solid transparent !important;
  /* 改为底部边框，因为内容在 header 上方 */
  order: -1 !important;
  /* 确保在 header 上方显示 */
  transform-origin: top !important;
  /* 从上方展开 */
  background-color: rgba(0, 0, 0, 0.2) !important;

  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease, border-color 0.3s ease !important;
}

/* 展开状态 (通过 bio-visible 类控制) */
#user-profile-card.bio-visible #profile-bio-content {
  max-height: 500px !important;
  /* 足够大的高度 */
  opacity: 1 !important;
  padding: 5px 5px !important;
  /* [修改] 减少间距，最大5像素 */
  border-bottom-color: var(--border-color) !important;
  /* 改为底部边框 */
}

/* 3. 头部右侧箭头 (▼ / ▲) */
.toggle-bio-btn {
  transition: transform 0.3s ease !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.toggle-bio-btn:hover {
  background-color: var(--bg-input) !important;
  color: var(--accent-color) !important;
}

/* 展开时箭头旋转 */
#user-profile-card.bio-visible .toggle-bio-btn {
  transform: rotate(180deg) !important;
}

/* 4. 底部收起按钮 (▲) */
#btn-retract-card {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 60px !important;
  height: 24px !important;

  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  color: var(--text-secondary) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: -1 !important;
  /* 在名片下方 */

  transition: bottom 0.3s ease, color 0.2s !important;
}

/* 悬停名片时，按钮伸出来 */
#user-profile-card:hover #btn-retract-card {
  bottom: -24px !important;
}

#btn-retract-card:hover {
  color: var(--accent-color) !important;
  background-color: var(--bg-input) !important;
}

/* 5. 恢复按钮 (外星人) */
/* 位置计算：Card宽320, Right 20 -> 中心点离右边 180px */
/* Button宽60 -> Right应该设为 180 - 30 = 150px */
#restore-card-btn {
  position: fixed !important;
  /* 允许通过内联样式设置 top 或 bottom，不强制 top: 0 */
  z-index: 1999 !important;

  width: 60px !important;
  height: 30px !important;

  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  color: var(--accent-color) !important;
  font-size: 18px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: grab !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  touch-action: none !important;

  /* 默认隐藏 */
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

/* 激活状态：显示并允许拖动 */
#restore-card-btn.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: grab !important;
}

#restore-card-btn:active {
  cursor: grabbing !important;
}

#restore-card-btn:hover {
  background-color: var(--accent-color) !important;
  color: #fff !important;
  box-shadow: 0 0 15px var(--accent-glow) !important;
}

/* =================================================================
   [修复] 个人名片与外星人按钮交互动画 (最终版)
   ================================================================= */

/* 1. 名片主体：固定宽度，便于计算中心点 */
#user-profile-card {
  width: 320px !important;
  /* 固定宽度 */
  right: 20px !important;
  /* 固定右边距 */
  top: 0 !important;
  position: fixed !important;
  z-index: 2000 !important;

  display: flex !important;
  flex-direction: column !important;

  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;

  /* 整体位移动画 */
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  transform: translateY(0) !important;
  /* 默认显示 */
}

/* 收起状态：向上移出屏幕 */
#user-profile-card.retracted {
  transform: translateY(-110%) !important;
}

/* 2. 简介区域：高度动画 */
#profile-bio-content {
  overflow: hidden !important;
  /* 默认收起 */
  max-height: 0 !important;
  opacity: 0 !important;
  padding: 0 5px !important;
  /* [修改] 减少间距，最大5像素 */
  /* 左右保留padding，上下由height控制 */
  border-bottom: 1px solid transparent !important;
  /* 改为底部边框，因为内容在 header 上方 */
  order: -1 !important;
  /* 确保在 header 上方显示 */
  transform-origin: top !important;
  /* 从上方展开 */
  background-color: rgba(0, 0, 0, 0.2) !important;

  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease, border-color 0.3s ease !important;
}

/* 展开状态 (通过 bio-visible 类控制) */
#user-profile-card.bio-visible #profile-bio-content {
  max-height: 500px !important;
  /* 足够大的高度 */
  opacity: 1 !important;
  padding: 5px 5px !important;
  /* [修改] 减少间距，最大5像素 */
  border-bottom-color: var(--border-color) !important;
  /* 改为底部边框 */
}

/* 3. 头部右侧箭头 (▼ / ▲) */
.toggle-bio-btn {
  transition: transform 0.3s ease !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.toggle-bio-btn:hover {
  background-color: var(--bg-input) !important;
  color: var(--accent-color) !important;
}

/* 展开时箭头旋转 */
#user-profile-card.bio-visible .toggle-bio-btn {
  transform: rotate(180deg) !important;
}

/* 4. 底部收起按钮 (▲) */
#btn-retract-card {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 60px !important;
  height: 24px !important;

  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  color: var(--text-secondary) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: -1 !important;
  /* 在名片下方 */

  transition: bottom 0.3s ease, color 0.2s !important;
}

/* 悬停名片时，按钮伸出来 */
#user-profile-card:hover #btn-retract-card {
  bottom: -32px !important;
}

#btn-retract-card:hover {
  color: var(--accent-color) !important;
  background-color: var(--bg-input) !important;
}

/* 5. 恢复按钮 (外星人) */
/* 位置计算：Card宽320, Right 20 -> 中心点离右边 180px */
/* Button宽60 -> Right应该设为 180 - 30 = 150px */
/* 注意：此样式已被上面的样式覆盖，保留用于兼容性 */
#restore-card-btn {
  position: fixed !important;
  /* 允许通过内联样式设置 top 或 bottom，不强制 top: 0 */
  z-index: 1999 !important;

  width: 60px !important;
  height: 30px !important;

  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  color: var(--accent-color) !important;
  font-size: 18px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: grab !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
  touch-action: none !important;

  /* 默认隐藏 */
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

/* 激活状态：显示并允许拖动 */
#restore-card-btn.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: grab !important;
}

#restore-card-btn:active {
  cursor: grabbing !important;
}

#restore-card-btn:hover {
  background-color: var(--accent-color) !important;
  color: #fff !important;
  box-shadow: 0 0 15px var(--accent-glow) !important;
}

/* 增加一点拖拽条的宽度，方便长按 */
.pane-resizer {
  width: 8px !important;
  /* 原来可能是 5px */
  background: transparent;
  cursor: col-resize;
  transition: background-color 0.2s;
  z-index: 10;
  /* 确保低于输入框(z-index: 1000) */
}

/* 鼠标悬停时显示一点颜色提示 */
.pane-resizer:hover {
  background-color: rgba(64, 158, 255, 0.3);
}

/* --- 【修改开始】API 开关按钮样式 (灰/绿切换) --- */
.toggle-switch-button {
  position: relative;
  width: 44px;
  /* 稍微宽一点 */
  height: 24px;
  border-radius: 12px;
  background-color: #6c757d !important;
  /* 【关键】默认背景：灰色 */
  transition: background-color 0.3s ease, transform 0.2s;
  cursor: pointer;
  flex-shrink: 0;
  /* 防止被压缩 */
}

/* 启用状态：绿色背景 */
.toggle-switch-button.enabled {
  background-color: #67c23a !important;
  /* 【关键】启用背景：绿色 */
}

/* 开关圆点 */
.toggle-switch-button::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 启用状态：圆点移动 */
.toggle-switch-button.enabled::after {
  transform: translateX(20px);
}

/* 整个包装器的悬停效果 */
.real-api-toggle-wrapper:hover .toggle-switch-button {
  opacity: 0.9;
}

/* --- 【修改结束】 --- */
/* =================================================================
   [修复] API 设置页 - 保存预设按钮样式
   ================================================================= */
.preset-save-btn {
  width: auto !important;
  /* 允许宽度随文字自适应 */
  padding: 0 5px !important;
  /* [修改] 减少间距，最大5像素 */
  /* 左右留出内边距 */
  display: inline-flex !important;
  /* 弹性布局对齐图标和文字 */
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 图标和文字的间距 */
  font-size: 12px !important;
  height: 28px !important;
  /* 与左边的输入框等高 */
  white-space: nowrap;
  /* 防止文字换行 */
  border-radius: 4px !important;
}

/* 调整预设输入框的高度，使其与按钮对齐 */
.preset-input {
  height: 28px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
}

.preset-manager .preset-row #preset-name-input {
  width: 80px;
  min-width: 80px;
  height: 36px !important;
  line-height: 36px !important;
}

/* =================================================================
   [UI 修复] API 设置页 - 保存预设区域样式修正
   ================================================================= */

/* 1. 预设管理行的容器布局 */
.preset-manager .preset-row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 元素间隔 */
  width: 100%;
}

/* 2. 下拉框自适应剩余空间 */
.preset-manager .preset-select {
  flex: 1;
  min-width: 0;
}

/* 3. [核心修改] 预设名称输入框 - 宽度缩小 */
/* 原来可能较宽，现在强制设为固定小宽度 */
.preset-manager .preset-input {
  width: 100px !important;
  /* 强制缩小宽度 */
  flex: 0 0 100px !important;
  /* 禁止伸缩 */
  height: 28px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  margin: 0 !important;
}

/* 4. 保存按钮样式优化 */
.preset-save-btn {
  width: auto !important;
  padding: 0 12px !important;
  height: 28px !important;
  font-size: 12px !important;
  white-space: nowrap;
  /* 防止文字换行 */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* 5. 小图标按钮 (加载/删除) 的尺寸统一 */
.preset-manager .small-btn {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* [����] �������������������Ϊ240���� */
#user-profile-card .profile-info {
  /* [修改] 移除max-width限制，让文本区域自适应 */
}

/* =================================================================
   可拖拽浮动框 - 新版本样式（覆盖旧样式）
   ================================================================= */

/* 1. 名片主体：定位到右下角 */
#user-profile-card {
  width: 230px !important;
  /* 设置为230像素 */
  right: 20px !important;
  bottom: 20px !important;
  top: auto !important;
  position: fixed !important;
  z-index: 2000 !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  transform: translateX(0) translateY(0) !important;
}

/* 收起状态：根据方向移出屏幕 */
#user-profile-card.retracted.retract-right {
  transform: translateX(calc(100% + 20px)) translateY(0) !important;
}

#user-profile-card.retracted.retract-left {
  transform: translateX(calc(-100% - 20px)) translateY(0) !important;
}

#user-profile-card.retracted.retract-top {
  transform: translateX(0) translateY(calc(-100% - 20px)) !important;
}

#user-profile-card.retracted.retract-bottom {
  transform: translateX(0) translateY(calc(100% + 20px)) !important;
}

/* 2. 收起按钮（箭头图标）- 紧贴名片卡片上方，鼠标悬停时显示 */
#btn-retract-card {
  position: absolute !important;
  /* 相对于名片卡片定位 */
  width: 60px !important;
  height: 24px !important;
  border-radius: 4px !important;
  /* 长方形圆角4像素 */
  background: rgba(0, 0, 0, 0.6) !important;
  border: none !important;
  /* 移除边框 */
  border: none !important;
  /* 无边框 */
  color: rgba(255, 255, 255, 0.8) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  /* 箭头图标大小 */
  opacity: 0 !important;
  /* 默认隐藏 */
  pointer-events: none !important;
  /* 默认不可点击 */
  z-index: 2001 !important;
  /* 位置：紧贴名片卡片上方，没有间距 */
  left: 50% !important;
  right: auto !important;
  top: -24px !important;
  /* 紧贴上方，没有间距（高度24px） */
  bottom: auto !important;
  transform: translateX(-50%) !important;
  /* 水平居中 */
  /* 无动画 */
  transition: none !important;
}

/* 鼠标悬停在名片卡片上时，显示收起按钮（无动画） */
#user-profile-card:hover #btn-retract-card {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 收起按钮悬停效果（无动画） */
#btn-retract-card:hover {
  background: rgba(0, 0, 0, 0.9) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* 名片卡片收起时，收起按钮也隐藏 */
#user-profile-card.retracted #btn-retract-card {
  opacity: 0 !important;
  pointer-events: none !important;
}


/* 3. 展开按钮（外星人）- 强制贴底边右侧 */
#restore-card-btn {
  position: fixed !important;
  bottom: 50px !important;
  right: 20px !important;
  top: auto !important;
  left: auto !important;
  z-index: 999999 !important;

  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  border-radius: 50% !important;

  background-color: rgba(30, 30, 30, 0.95) !important;
  border: 2px solid #67c23a !important;
  color: #67c23a !important;
  font-size: 24px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;

  text-align: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;

  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(0.8) !important;

  animation: pulseAlien 2s infinite;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#restore-card-btn.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: scale(1) !important;
  display: flex !important;
}

#restore-card-btn:hover {
  background-color: #67c23a !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(103, 194, 58, 0.6) !important;
  transform: scale(1.1) !important;
}

/* 浮动窗口开关样式 - 美化版 */
.floating-window-control {
  transition: all 0.2s ease;
}

.floating-window-control:hover {
  border-color: var(--accent-color) !important;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}

/* 浮动名片隐藏状态，允许开关真正控制显示 */
#user-profile-card.profile-card-hidden {
  display: none !important;
}

#restore-card-btn.profile-card-hidden {
  display: none !important;
}

/* =========================================
   从tomwebapp.html提取的内联CSS样式
   ========================================= */


/* =========================================
         [新增] 全局主题变量定义
         ========================================= */
:root {
  /* 默认深色变量 - Obfuscator.io 风格 */
  --bg-app: #0a0a0a;
  --bg-sidebar: rgba(20, 20, 20, 0.8);
  /* 顶部菜单默认背景 */
  --bg-nav: rgba(10, 10, 10, 0.95);
  /* 统一的深色，95%透明度 */
  --bg-surface: #1a1a1a;
  --bg-input: #141414;
  --text-primary: #e5e5e5;
  --text-secondary: #999999;
  --border-color: #2a2a2a;
  --accent-color: #3b82f6;
  /* Obfuscator.io 蓝色 */
  --accent-hover: #2563eb;
  --accent-glow: rgba(59, 130, 246, 0.2);
  --tab-nav-height: 60px;
}

/* [浅色模式] 完整配色方案 */
[data-theme="light"] {
  --bg-app: #ffffff;
  /* 整体背景：浅灰 */
  --bg-sidebar: #ffffff;
  /* 侧边/顶栏：纯白 */
  --bg-nav: rgba(5, 8, 15, 0.5);
  /* 统一的深蓝色，50%透明度 */
  --bg-surface: #ffffff;
  /* 卡片/容器：纯白 */
  --bg-input: #ffffff;
  /* 输入框：极浅灰 */
  --text-primary: #1f1f1f;
  /* 主文字：近黑 */
  --text-secondary: #000000;
  --border-color: #bfbfbf;
  /* 边框：浅灰 */

  /* [修改] 主色改为黑色/深灰，去除默认蓝 */
  --accent-color: #000000;
  --accent-hover: #000000;
  --accent-glow: rgba(0, 0, 0, 0.1);
  /* 光晕改为淡淡的黑色阴影 */

  color: #1f1f1f;
}

/* [浅色模式] 针对 Body 背景图的覆盖 */
[data-theme="light"] body {
  background-image: none !important;
  /* 去掉深色的星空背景 */
  background-color: var(--bg-app) !important;
}

/* [个性风格] 基础变量 */
[data-theme="personal"] {
  --bg-app: #0b0f19;
  --bg-sidebar: rgba(11, 15, 25, 0.8);
  --bg-nav: rgba(5, 8, 15, 0.5);
  /* 统一的深蓝色，50%透明度 */
  --bg-surface: rgba(20, 25, 40, 0.6);
  --border-color: rgba(64, 158, 255, 0.2);
}

/* [Tom的浪漫] Obfuscator.io 风格 - 完整配色方案（基于图2、图3、图4） */
[data-theme="romantic"] {
  /* 深蓝紫色背景 - 图2渐变风格，根据图3调整更深 */
  --bg-app: #0A0D1A;
  /* 最外层深色 - 更深，接近图3 */
  --bg-sidebar: transparent;
  /* 顶部菜单背景透明 */
  --bg-nav: transparent;
  /* 导航栏背景透明 */
  --bg-surface: transparent;
  /* 卡片/容器背景透明 - 移除内容背景 */
  --bg-input: rgba(8, 10, 15, 0.9);
  /* 输入框背景 - 更深，图3风格 */
  --text-primary: #ffffff;
  /* 主文字：纯白 */
  --text-secondary: rgba(255, 255, 255, 0.4);
  /* 次要文字：更暗的半透明白，图3风格 */
  --border-color: rgba(50, 65, 85, 0.4);
  /* 边框：更深蓝灰色半透明，图3风格 */

  /* 强调色 - 图3和图4的深色调（更深的蓝色） */
  --accent-color: #2d5a7a;
  /* 主强调色：更深的蓝色，图3风格 */
  --accent-hover: #3d6a8a;
  /* 悬停色：稍亮的深蓝色 */
  --accent-glow: rgba(45, 90, 122, 0.5);
  /* 光晕效果 */
  --accent-gradient-start: #1f4560;
  /* 渐变起始：更深的蓝色 */
  --accent-gradient-end: #3d6a8a;
  /* 渐变结束：深蓝色 */
}

/* [Tom的浪漫] Body 背景 - 图2的深蓝紫色径向渐变，根据图3调整更深 */
[data-theme="romantic"] body {
  background: radial-gradient(ellipse at center,
      rgba(10, 15, 28, 0.95) 0%,
      rgba(8, 12, 25, 0.98) 40%,
      #0A0D1A 100%);
  background-attachment: fixed;
  background-size: 100% 100%;
}

.hidden {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

/* 确保所有 VIP 功能元素始终可见（覆盖可能的隐藏规则） */
[data-vip-only="true"] {
  display: block !important;
  visibility: visible !important;
}

/* 确保所有标签页按钮始终可见（但不影响标签页内容的正常切换） */
.tab-link {
  display: inline-block !important;
  visibility: visible !important;
}

/* [新增] 未登录时禁用菜单项的样式 */
.tab-link.disabled-by-auth {
  opacity: 0.4;
  position: relative;
  user-select: none;
}

.tab-link.disabled-by-auth::before {
  content: "🔒";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
}

.tab-link.disabled-by-auth:hover {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* 确保标签页内容区域在 DOM 中存在（但允许通过 JavaScript 控制显示/隐藏） */
/* 注意：标签页内容的显示/隐藏由标签页切换逻辑控制，这里不强制显示 */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in-active {
  animation: fadeIn 1s ease-in-out forwards;
}

/* --- 菜单按钮风格 --- */
.tab-nav {
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.3s, border-color 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: var(--tab-nav-height);
  flex-shrink: 0;
  z-index: 100;
  padding: 0 15px;
}

/* 主菜单按钮容器 - 居中显示 */
.tab-nav-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.tab-link {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  margin: 0 10px;
  padding: 12px 5px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
  display: inline-block;
}

.tab-link:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* 只对图标进行动画 */
.tab-link .icon-emoji {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: scale(0.85);
  /* [修改] 未选中时图标较小 */
}

/* [修改] 选中状态：图标放大2倍，向左4px，向上5px */
.tab-link.active .icon-emoji {
  transform: scale(2) translateX(-4px) translateY(-5px) !important;
}

/* [修改] 悬停时：图标放大2倍，向左4px，向上5px */
.tab-link:hover:not(.active) .icon-emoji {
  transform: scale(2) translateX(-4px) translateY(-5px);
}

/* [这里是修改后的代码] */
.tab-link.active {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.8),
    0 0 20px rgba(0, 229, 255, 0.4);
  opacity: 1;
  background: transparent !important;
}

/* 底部光线：中间亮两边淡 (保持不变) */
.tab-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: radial-gradient(circle, #00e5ff 0%, transparent 100%);
  box-shadow: 0 -1px 5px #00e5ff;
}

/* [新增] 左侧用户名显示区域 */
.nav-left-controls {
  position: absolute;
  left: 20px;
  display: flex;
  align-items: center;
  height: 100%;
}

#username-display {
  color: #e6e6e6;
  font-weight: bold;
  font-size: 16px;
}

/* [新增] 右侧登录/注册按钮区域 */
.nav-right-controls {
  position: absolute;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
}

.auth-button {
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.2s;
  flex-shrink: 0;
}

.auth-button:hover {
  background-color: #66b1ff;
  transform: scale(1.05);
}

.pro-gateway-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: linear-gradient(135deg, #f6e27a, #d99a00);
  color: #1f1f1f;
  font-size: 11px;
  font-weight: 800;
  transform: rotate(40deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.pro-gateway-badge .badge-glyph {
  transform: rotate(-40deg);
  display: inline-block;
}

.version-toggle-btn.pro-active .pro-gateway-badge {
  display: flex;
}

.version-dropdown {
  position: absolute;
  top: 52px;
  left: 0;
  width: 260px;
  background: #2b2b2b;
  border: 1px solid #3a3a3a;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  padding: 8px;
  display: none;
}

.version-dropdown.open {
  display: block;
}

.version-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  border: 1px solid transparent;
}

.version-option:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #4a4a4a;
}

.version-option.active {
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.06);
}

.version-option-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.version-title {
  font-weight: 700;
  color: var(--text-primary);
}

.version-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

.version-upgrade {
  background: rgba(255, 208, 134, 0.18);
  color: #f8c364;
  border: 1px solid rgba(248, 195, 100, 0.5);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.version-check {
  width: 20px;
  text-align: right;
  color: var(--accent-color);
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.version-option.active .version-check {
  opacity: 1;
}

[data-theme="light"] .version-toggle-btn {
  background: #e8e8e8;
  border: 1px solid #d3d3d3;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  color: #1f1f1f;
}

[data-theme="light"] .version-dropdown {
  background: #f7f7f7;
  border: 1px solid #dcdcdc;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .version-option:hover {
  background: rgba(0, 0, 0, 0.04);
}

.session-action {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1500;
}

.session-action-btn {
  min-width: 110px;
  padding: 8px 14px;
  background: #2f2f2f;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  color: #f5f5f5;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s,
    color 0.2s;
}

.session-action-btn:hover {
  border-color: var(--accent-color);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.session-action-btn.join {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
}

[data-theme="light"] .session-action-btn {
  background: #ececec;
  border: 1px solid #d3d3d3;
  color: #1f1f1f;
}

[data-theme="light"] .session-action-btn.join {
  background: #409eff;
  border-color: #409eff;
  color: #ffffff;
}

.role-switcher {
  position: relative;
}

.role-toggle-btn {
  min-width: 80px;
  padding: 6px 10px;
  background: #2f2f2f;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  color: #f5f5f5;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s,
    color 0.2s;
}

.role-toggle-btn:hover {
  border-color: var(--accent-color);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.role-dropdown {
  position: absolute;
  top: 42px;
  left: 0;
  right: auto;
  width: max-content;
  min-width: 160px;
  max-width: 240px;
  background: #2b2b2b;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  padding: 8px;
  display: none;
  z-index: 2000;
}

.role-dropdown.open {
  display: block;
}

.role-option {
  padding: 8px 10px;
  border-radius: 8px;
  color: #f5f5f5;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.4;
}

.role-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #4a4a4a;
}

.role-option.active {
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.06);
}

.pro-bubble {
  background: rgba(255, 193, 7, 0.15);
  color: #ffdd75;
  border: 1px solid rgba(255, 193, 7, 0.4);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.pro-bubble.hidden {
  display: none;
}

.bubble-close {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}

/* 未登录时禁用的元素样式 - 全部页面统一灰色且不可点击 */
.disabled-by-auth {
  opacity: 0.5 !important;
  user-select: none !important;
  filter: grayscale(100%) !important;
  position: relative !important;
  color: #999999 !important;
}

/* 未登录时禁用的元素显示锁图标 */
.disabled-by-auth::before {
  content: "🔒";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  z-index: 10;
  pointer-events: none;
  opacity: 0.8;
}

/* 对于按钮类型的禁用元素，锁图标显示在右上角 */
.disabled-by-auth.button,
button.disabled-by-auth,
.secondary-button.disabled-by-auth,
.chat-icon-btn.disabled-by-auth,
.chat-send-btn.disabled-by-auth {
  position: relative;
}

button.disabled-by-auth::before,
.secondary-button.disabled-by-auth::before,
.chat-icon-btn.disabled-by-auth::before,
.chat-send-btn.disabled-by-auth::before,
select.disabled-by-auth::before,
textarea.disabled-by-auth::before,
input.disabled-by-auth::before {
  content: "🔒";
  position: absolute;
  top: 4px;
  right: 4px;
  transform: none;
  font-size: 12px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.9;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* 对于输入框和文本域，锁图标显示在右上角 */
textarea.disabled-by-auth::before,
input[type="text"].disabled-by-auth::before,
input[type="password"].disabled-by-auth::before {
  top: 8px;
  right: 8px;
}

.hero-my-button.disabled,
.hero-my-button.disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: #555 !important;
  color: #888 !important;
  background: rgba(0, 0, 0, 0.2) !important;
  box-shadow: none !important;
}

/* VIP 功能禁用样式 - 所有用户可见但非 Pro 用户禁用 */
[data-vip-only="true"].vip-disabled {
  opacity: 0.5 !important;
  cursor: pointer !important;
  filter: grayscale(100%) !important;
  color: #888 !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-color: #555 !important;
  box-shadow: none !important;
  /* 允许点击以便跳转到购买页面 */
  pointer-events: auto !important;
  position: relative !important;
}

/* VIP 禁用元素显示锁图标 */
[data-vip-only="true"].vip-disabled::after {
  content: "🔒";
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 12px;
  z-index: 10;
  pointer-events: none;
  opacity: 0.9;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

[data-vip-only="true"].vip-disabled:hover {
  opacity: 0.6 !important;
  cursor: pointer !important;
  filter: grayscale(100%) !important;
  background: rgba(0, 0, 0, 0.3) !important;
}

[data-vip-only="true"].vip-disabled * {
  opacity: 0.5 !important;
  /* 子元素也允许点击事件冒泡 */
  pointer-events: none !important;
}

.tool-card:not(.permission-locked),
.game-card:not(.permission-locked) {
  cursor: pointer;
}

.permission-locked[data-permission-allow-clickthrough="true"] {
  cursor: pointer !important;
}

/* --- 隐藏空状态文字 --- */
.empty-text {
  display: none !important;
}

/* --- 树状结构虚线 (左侧对齐) --- */
.tree-view ul {
  margin-left: 18px;
  padding-left: 0;
  position: relative;
}

.tree-view ul::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  border-left: 1px dashed #666;
  width: 1px;
}

.tree-view li {
  position: relative;
  list-style: none;
  line-height: 28px;
}

.tree-view li::before {
  content: "";
  position: absolute;
  top: 14px;
}

/* =========================================
   [修复] 按钮文字垂直居中与对齐
   ========================================= */

/* 1. 全部按钮文字垂直居中 */
button,
.button-like-label,
.btn,
.primary-button,
.secondary-button,
.tab-link,
.repo-tab-btn,
.project-category-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* 2. My 按钮图标和文字一行居中 */
.hero-my-button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  padding: 0 15px !important;
  height: 34px !important;
  background: transparent !important;
  border: 3px solid var(--accent-color) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.hero-my-button img {
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
  display: block !important;
}

/* 4. 禁用状态（灰色样式） */
.feature-disabled-gray {
  opacity: 0.5 !important;
  filter: grayscale(100%) !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* =========================================
   [修复] 智能体菜单项垂直居中
   ========================================= */
.agent-menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.agent-menu-item span:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 10px !important;
}

#library-notes-tree>ul::before,
#notes-tree-select>ul::before {
  display: none;
}

#library-notes-tree>ul>li::before,
#notes-tree-select>ul>li::before {
  display: none;
}

.tree-view li:last-child>ul::before {
  display: none;
}

/* --- 统计信息 --- */
.tree-item-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.tree-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 5px;
  max-width: 160px;
}

.tree-item-stats {
  font-size: 12px;
  color: #aaa;
  flex-shrink: 0;
}

/* --- 名片 --- */
/* 1. 名片主容器 */
.profile-card {
  /* 布局：强制垂直排列 (Column) */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  /* 尺寸与定位 */
  min-width: 230px !important;
  max-width: 230px !important;
  /* 外观：Obfuscator.io 风格 */
  background-color: var(--bg-surface) !important;
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

/* 2. 向上收起按钮 (绝对定位，不占位置) */
#btn-retract-card {
  position: absolute !important;
  right: 8px;
  z-index: 1001;
  cursor: pointer;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

#btn-retract-card:hover {
  color: white;
}

/* 3. 头部区域 (横向排列) */


/* 调整头部内部元素的间距 */
.profile-avatar-bg,
#profile-avatar-bg {
  margin-right: 5px !important;
  /* [修改] 减少间距，最大5像素 */
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  background-image: url("../ui/index/images/tom.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
}

#user-avatar-btn {
  padding: 0;
  margin: 0;
  border: none !important;
  background: transparent;
  outline: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-radius: 20px;
  transition: transform 0.3s ease;
  position: relative;
  font-size: 19.2px;
  /* 缩小0.4倍 (32px * 0.6 = 19.2px) */
  line-height: 1;
  box-shadow: none !important;
}

#user-avatar-btn:hover {
  transform: none;
  /* 鼠标悬停时放大图标 */
}

#user-avatar-btn.logged-in:hover {
  transform: none;
  /* 鼠标悬停时放大图标 */
}

#user-avatar-btn img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  transition: transform 0.3s ease;
}

#user-avatar-btn:hover img {
  transform: none;
}

#user-avatar-btn .login-text {
  color: #e6e6e6;
  font-size: 16px;
  font-weight: normal;
  user-select: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* 登录状态下的文字样式 */
#user-avatar-btn.logged-in .login-text {
  color: #ff6b6b;
}

/* 文字切换动画 */
#user-avatar-btn .login-text::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.3s ease;
}

#user-avatar-btn.logged-in .login-text {
  transform: translateX(20px);
  opacity: 0;
}

#user-avatar-btn.logged-in .login-text::before {
  opacity: 1;
  transform: translateX(0);
}

.user-login-entry {
  border: none !important;
  box-shadow: none !important;
}

.profile-info {
  flex-grow: 1;
  /* 占据中间剩余空间 */
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* [修改] 允许收缩，不设置最小宽度 */
}

/* 展开/收起的小箭头按钮 */
.toggle-bio-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-left: 5px !important;
  /* [修改] 减少间距，最大5像素 */
  flex-shrink: 0;
}

.toggle-bio-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 4. 简介区域 (垂直显示在下方) */
.profile-bio {
  display: block !important;
  width: 100% !important;
  /* 强制占满宽度 */
  overflow: hidden;
  /* 动画必须 */
  box-sizing: border-box;
  /* 字体颜色设置 */
  color: #e0e0e0;
  font-size: 13px;
  line-height: 1.6;
  /* 展开状态 (默认) */
  max-height: 600px;
  opacity: 1;
  margin-top: 0 !important;
  /* [修改] 去掉负边距 */
  padding-top: 5px !important;
  /* [修改] 减少间距，最大5像素 */
  padding-left: 5px !important;
  /* [修改] 减少间距，最大5像素 */
  padding-right: 5px !important;
  /* [修改] 减少间距，最大5像素 */
  padding-bottom: 5px !important;
  /* [修改] 减少间距，最大5像素 */
  border-top: 1px solid rgba(255, 255, 255, 0.1);

  /* 动画过渡 */
  transition: all 0.4s ease;
}

/* 简介收起状态 */
.profile-bio.bio-collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  border-top-color: transparent !important;
  pointer-events: none;
}

/* --- 导入按钮 --- */
label.lib-action-btn.blue {
  background-color: #e6a23c !important;
  border-color: #e6a23c !important;
  color: white !important;
}

/* 1. 消息气泡全宽显示 (与输入框对齐) */
.chat-message {
  display: flex;
  flex-direction: row;
  width: 100% !important;
  /* 强制全宽 */
  max-width: 100% !important;
  margin-bottom: 20px;
  padding-right: 10px;
  box-sizing: border-box;
}

.chat-content-wrapper {
  flex: 1;
  /* 占满剩余空间 */
  min-width: 0;
  /* 允许内部文本换行 */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px 15px;
  margin-left: 10px;
}

/* 确保文本自动换行 */
.chat-content-wrapper pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  margin: 0;
}

/* 2. 思考过程 UI (折叠/展开) */
.thinking-process-container {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid #e6a23c;
  border-left: 3px solid #e6a23c;
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}

.thinking-header {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9em;
  color: #e6a23c;
  user-select: none;
}

.thinking-content {
  padding: 10px 12px;
  font-family: "Consolas", monospace;
  font-size: 0.85em;
  color: #aaa;
  background: rgba(0, 0, 0, 0.1);
  white-space: pre-wrap;
  line-height: 1.8;

  /* 默认折叠状态: 约5行高度 */
  max-height: 9em;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* 展开状态: 约15行高度 + 滚动条 */
.thinking-content.expanded {
  max-height: 18em;
  overflow-y: auto;
}

/* 3. 图片预览区 (高度优化 & 删除按钮) */
#attachment-preview-area {
  padding: 8px;
  max-height: 120px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

#attachment-preview-area::-webkit-scrollbar {
  height: 6px;
}

#attachment-preview-area::-webkit-scrollbar-track {
  background: transparent;
}

#attachment-preview-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

#attachment-preview-area::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.preview-item {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid #444;
  border-radius: 6px;
  overflow: hidden;
  /* [需求] 比图片高 5px (通过 padding 实现) */
  padding-bottom: 5px;
  background-color: #2c2c2c;
  /* 给底部留白一个背景色 */
  transition: transform 0.2s;
}

.preview-item:hover {
  transform: scale(1.05);
}

.preview-item img {
  height: 100px !important;
  /* 固定图片高度 */
  width: auto;
  display: block;
  object-fit: cover;
}

/* 删除按钮样式优化 - 鼠标悬停时显示 */
.preview-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: rgba(200, 0, 0, 0.9) !important;
  color: white !important;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: none;
  /* 默认隐藏 */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
  z-index: 10;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.preview-item:hover .preview-delete-btn {
  display: flex;
  /* 悬停时显示 */
}

.preview-delete-btn:hover {
  background-color: red !important;
  transform: scale(1.1);
}

/* =========================================
         [核心需求] 按钮样式：未选中空心，选中实心
         ========================================= */

/* 1. 通用按钮基础 (默认透明背景，有边框) */
button:not(.chat-add-item),
.theme-toggle-btn,
.tab-link {
  background-color: transparent !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  transition: all 0.3s ease;
}

#btn-agent-my {
  width: auto;
  min-width: 140px;
}

/* 2. 悬停状态 (加深背景颜色，提高可读性) */
button:not(.chat-add-item):hover,
.theme-toggle-btn:hover,
.tab-link:hover {
  border-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
  background-color: rgba(0, 0, 0, 0.4) !important;
}

/* 3. [选中/激活状态] 实心填充 (主色) - Obfuscator.io 风格 */
button.active,
.theme-toggle-btn.active,
.tab-link.active,
.settings-menu-item.active {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
  /* 选中后文字必为白色 */
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.2);
  text-shadow: none;
  opacity: 1;
  transform: translateY(-1px);
}

/* [加强] 薛某不才疯风格选中样式 - Obfuscator.io 风格 */
.theme-toggle-btn[data-value="personal"].active {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4),
    0 0 0 1px rgba(59, 130, 246, 0.3) !important;
  text-shadow: none;
  opacity: 1;
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

.theme-toggle-btn[data-value="personal"].active:hover {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5),
    0 0 0 1px rgba(59, 130, 246, 0.4) !important;
  transform: translateY(-2px);
}

/* [Tom的浪漫] 主题按钮选中样式 - 图3深色调 */
.theme-toggle-btn[data-value="romantic"].active {
  background: linear-gradient(135deg, var(--accent-gradient-start), var(--accent-gradient-end)) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(91, 155, 213, 0.4),
    0 0 0 1px rgba(91, 155, 213, 0.3),
    0 0 25px rgba(91, 155, 213, 0.2) !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.theme-toggle-btn[data-value="romantic"].active:hover {
  box-shadow: 0 6px 20px rgba(91, 155, 213, 0.5),
    0 0 0 1px rgba(91, 155, 213, 0.4),
    0 0 35px rgba(91, 155, 213, 0.3) !important;
  transform: translateY(-2px);
}

/* 5. 特殊按钮：功能性按钮 (添加/删除/保存等) 保持原有颜色逻辑 */
/* 我们可以利用之前定义的 .primary-button 类或者 id 来强制实心 */
/* 这些按钮保持之前的特定样式逻辑，不全局覆盖，以免破坏功能色 */

/* 智能体工具栏的 My 按钮（独立样式，不受全局 button:hover 影响） */
.hero-my-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 3px solid var(--accent-color) !important;
  padding: 8px 12px;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 6px;
  background: transparent !important;
  transition: all 0.2s ease;
  box-shadow: none !important;
  outline: none;
}

.hero-my-button:focus,
.hero-my-button:active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 3px solid var(--accent-color) !important;
  padding: 8px 12px;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 6px;
  background: transparent !important;
  transition: all 0.2s ease;
  box-shadow: none !important;
  outline: none;
}

.hero-my-button img {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

.hero-my-button:hover {
  background: #ffcc00 !important;
  border-color: #d62828 !important;
  border-width: 4px !important;
  color: #d62828 !important;
  box-shadow: 0 8px 20px rgba(214, 40, 40, 0.6);
}

.hero-my-button.my-active {
  background: #ffcc00 !important;
  border-color: #d62828 !important;
  border-width: 4px !important;
  color: #d62828 !important;
  box-shadow: 0 8px 20px rgba(214, 40, 40, 0.6);
}

.hero-my-button:disabled img,
.hero-my-button[aria-disabled="true"] img,
.hero-my-button[data-lock-indicator="true"] img {
  filter: grayscale(100%) brightness(1.05);
  opacity: 0.6;
}

[data-theme="light"] .hero-my-button {
  color: #000000 !important;
  box-shadow: none !important;
}

/* ========================================= */
/* 软件确认对话框样式 */
/* ========================================= */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 150px;
  /* [修改] 限制弹框范围，不遮挡底部输入框 */
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 9999;
  /* [修改] 降低层级，确保输入框(z-index: 10001)在上方 */
  backdrop-filter: blur(3px);
  padding-top: 15vh;
  /* 中间偏上的位置 */
  pointer-events: auto;
  /* 确保可以点击遮罩层关闭 */
}

.confirm-dialog-box {
  background: var(--bg-surface);
  border: 2px solid var(--accent-color);
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: dialogSlideIn 0.2s ease-out;
  pointer-events: auto;
  /* 确保弹框本身可点击 */
}

@keyframes dialogSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }

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

.confirm-dialog-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(64, 158, 255, 0.1);
}

.confirm-dialog-icon {
  font-size: 24px;
}

.confirm-dialog-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
}

.confirm-dialog-body {
  padding: 20px;
}

.confirm-dialog-body p {
  margin: 0;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.6;
}

.confirm-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 20px;
  border-top: 1px solid var(--border-color);
}

.confirm-dialog-footer button {
  min-width: 80px;
}

#prompt-dialog[data-layout="library-compact"] .confirm-dialog-box {
  width: 360px;
}

#prompt-dialog[data-layout="library-compact"] .confirm-dialog-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

#prompt-dialog[data-layout="library-compact"] #prompt-dialog-message {
  width: 320px;
}

#prompt-dialog[data-layout="library-compact"] #prompt-dialog-input {
  width: 320px;
  box-sizing: border-box;
}

#prompt-dialog[data-layout="library-compact"] .confirm-dialog-footer {
  justify-content: center;
}

#prompt-dialog[data-layout="library-compact"] .confirm-dialog-footer button {
  width: 155px;
}

/* 确认按钮绿色样式 - 所有确认/确定按钮 */
.confirm-button-green,
.confirm-dialog-ok,
#confirm-dialog-ok,
#alert-dialog-ok,
#prompt-dialog-ok,
button.confirm-button-green,
#data-select-confirm-btn,
#modal-options-ok,
#modal-askstring-ok,
#modal-category-ok,
button[id*="confirm"]:not(.secondary-button):not(.danger-button),
button[id*="ok"]:not(.secondary-button):not(.danger-button) {
  background-color: #67c23a !important;
  border-color: #67c23a !important;
  color: #fff !important;
}

.confirm-button-green:hover,
.confirm-dialog-ok:hover,
#confirm-dialog-ok:hover,
#alert-dialog-ok:hover,
#prompt-dialog-ok:hover,
button.confirm-button-green:hover,
#data-select-confirm-btn:hover,
#modal-options-ok:hover,
#modal-askstring-ok:hover,
#modal-category-ok:hover,
button[id*="confirm"]:not(.secondary-button):not(.danger-button):hover,
button[id*="ok"]:not(.secondary-button):not(.danger-button):hover {
  background-color: #5daf34 !important;
  border-color: #5daf34 !important;
  box-shadow: 0 0 12px rgba(103, 194, 58, 0.5) !important;
}

/* ========================================= */
/* 数据管理多选对话框样式 */
/* ========================================= */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.data-select-modal-content {
  background-color: var(--bg-surface);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

.data-select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}

.data-select-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text-primary);
}

.modal-close-btn {
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.modal-close-btn:hover {
  background-color: var(--bg-input);
  color: var(--text-primary);
}

.data-select-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.data-select-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.data-option-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background-color: var(--bg-input);
}

.data-option-item:hover {
  border-color: var(--accent-color);
  background-color: rgba(64, 158, 255, 0.05);
}

.data-option-item input[type="checkbox"] {
  margin-right: 12px;
  cursor: pointer;
  width: 18px;
  height: 18px;
}

.data-option-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.data-option-icon {
  font-size: 20px;
}

.data-option-text {
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 500;
}

.data-select-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid var(--border-color);
}

/* 6. 浅色模式下的微调 */
[data-theme="light"] .tab-nav {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e4e7ed;
}

[data-theme="light"] .tab-link {
  color: #606266 !important;
}

[data-theme="light"] .tab-link:hover {
  background-color: #f2f6fc !important;
  color: var(--accent-color) !important;
}

[data-theme="light"] .tab-link.active {
  color: #fff !important;
}

/* =========================================
         [新增] 名片卡片 - 浅色模式适配 (黑白灰)
         ========================================= */

/* 1. 卡片容器变白 */
[data-theme="light"] .profile-card {
  background-color: #ffffff !important;
  /* 纯白背景 */
  border-color: #e5e6eb !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  /* 柔和阴影 */
  backdrop-filter: none !important;
}

/* 2. 文字颜色调整 */
[data-theme="light"] .profile-info .wechat-row {
  color: #333 !important;
}

[data-theme="light"] .profile-info .profile-tagline {
  color: #666 !important;
}

[data-theme="light"] .wechat-label {
  color: #000 !important;
  /* "AlworldX" 变黑 */
}

/* 3. 按钮颜色适配 (收起/展开) */
[data-theme="light"] #btn-retract-card,
[data-theme="light"] .toggle-bio-btn {
  color: #999 !important;
}

[data-theme="light"] #btn-retract-card:hover,
[data-theme="light"] .toggle-bio-btn:hover {
  color: #000 !important;
  background-color: #f0f0f0 !important;
}

/* 4. 简介区域适配 */
[data-theme="light"] .profile-bio {
  border-top-color: #f0f0f0 !important;
  color: #555 !important;
}

/* =========================================
         [新增] 动态配色适配 (跟随 settings.js 计算)
         ========================================= */

/* 1. 列表项悬停颜色 -> 使用 JS 计算的 20% 透明次色 */
.tree-item-label:hover,
.dropdown-menu button:hover,
.keyword-list li:hover {
  background-color: var(--bg-hover-transparent) !important;
  color: var(--text-primary);
  /* 确保文字高亮 */
  border-color: transparent;
  /* 移除可能的边框干扰 */
  transition: background-color 0.2s ease;
}

/* 浅色模式下菜单项悬停样式单独处理 */
[data-theme="light"] .settings-menu-item:hover {
  background-color: #ccc !important;
  color: #666 !important;
  border-color: #000 !important;
}

/* 非浅色模式下菜单项悬停样式 */
[data-theme]:not([data-theme="light"]) .settings-menu-item:hover {
  background-color: var(--bg-hover-transparent) !important;
  color: var(--text-primary);
  border-color: transparent;
  transition: background-color 0.2s ease;
}

/* 2. 确保下拉菜单和模态框使用动态背景变量 */
.dropdown-menu,
.modal-dialog,
.profile-card,
.prompt-display.editing {
  background-color: var(--bg-surface) !important;
  /* 增加一点模糊，增强玻璃感 */
  backdrop-filter: blur(10px);
}

/* 3. 输入框背景适配 */
/* 默认深色模式下的输入框样式 - Obfuscator.io 风格 */
input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* 4. 浅色模式下的特殊修正 (防止变黑) */
[data-theme="light"] .tree-item-label:hover {
  /* 浅色模式下悬停不用透明色，用浅灰更自然，或者保持 JS 设置的淡灰 */
  color: #000;
}

[data-theme="light"] .settings-menu-item:hover {
  /* 浅色模式下菜单项悬停：灰色背景，灰色文字 */
  background-color: #ccc !important;
  color: #666 !important;
  border-color: #000 !important;
}

/* =========================================
         [新增] 终极 UI 优化 (浅色黑白灰 / 弹窗 / 游戏)
         ========================================= */

/* 1. 浅色模式：顶部菜单与文字修复 (去蓝化) */
[data-theme="light"] .tab-nav {
  background-color: #ffffff !important;
  border-bottom: 1px solid #dcdfe6;
}

[data-theme="light"] .tab-link {
  color: #606266 !important;
}

[data-theme="light"] .tab-link.active {
  background-color: #333333 !important;
  /* 选中变黑 */
  color: #fff !important;
  border-color: #333333 !important;
}

/* 智能体侧边栏文字修复 */
[data-theme="light"] .tree-item-name {
  color: #333 !important;
}

[data-theme="light"] .tree-item-label:hover {
  color: #000 !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* 上面是 checkbox 的样式 */
[data-theme="light"] input[type="checkbox"] {
  accent-color: #000000 !important;
}

/* [新增] 浅色模式下，强制所有输入框和文本域文字变黑 */
[data-theme="light"] textarea,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] select {
  color: #000000 !important;
  /* 纯黑字体 */
  background-color: #ffffff !important;
  /* 纯白背景 */
  border: 1px solid #dcdfe6 !important;
}

/* 3. 弹窗按钮组：居中显示 + 间距 */
.modal-buttons {
  display: flex !important;
  justify-content: center !important;
  /* 居中 */
  gap: 30px !important;
  /* 按钮间距 */
  margin-top: 20px;
  padding-top: 20px;
}

/* 让保存/取消按钮保持默认大小，不要被拉伸 */
.modal-buttons button {
  min-width: 100px;
}

/* 4. 全局关闭按钮 (弹窗右上角)：红色 */
/* 覆盖所有关闭按钮样式 */
.close-btn,
#btn-close-tool,
.close-btn-overlay {
  color: #ff4d4f !important;
  /* 红色图标 */
  border-color: transparent !important;
  background: rgba(255, 77, 79, 0.1) !important;
  /* 浅红背景 */
}

.close-btn:hover,
#btn-close-tool:hover,
.close-btn-overlay:hover {
  background-color: #ff4d4f !important;
  /* 悬停深红背景 */
  color: #fff !important;
}

/* 5. 游戏弹窗控制按钮 (放大/关闭) - 可视性修复 */
#modal-game-runner .control-btn-overlay {
  background-color: rgba(0, 0, 0, 0.6) !important;
  /* 强制半透明黑底 */
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 浅色模式下也要能看清，所以强制深色底 */
[data-theme="light"] #modal-game-runner .control-btn-overlay {
  background-color: rgba(50, 50, 50, 0.8) !important;
  color: #fff !important;
}

/* 关闭按钮特殊样式 - 红色 */
#modal-game-runner .close-btn-overlay {
  background-color: rgba(255, 77, 79, 0.15) !important;
  color: #ff4d4f !important;
  border-color: rgba(255, 77, 79, 0.4) !important;
}

#modal-game-runner .close-btn-overlay:hover {
  background-color: #ff4d4f !important;
  border-color: #ff4d4f !important;
  color: #fff !important;
}

[data-theme="light"] #modal-game-runner .close-btn-overlay {
  background-color: rgba(255, 77, 79, 0.2) !important;
  color: #ff4d4f !important;
  border-color: rgba(255, 77, 79, 0.5) !important;
}

/* 6. 个性化风格：游戏菜单样式 - Obfuscator.io 风格 */
[data-theme="personal"] .game-card,
[data-theme="personal"] .tool-card {
  /* 默认：深色背景 (混合了主色的黑) */
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: none !important;
  transition: all 0.2s ease;
  border-radius: 12px;
}

[data-theme="personal"] .game-card:hover,
[data-theme="personal"] .tool-card:hover {
  /* 悬停：半透明主色光晕 + 亮边框 - Obfuscator.io 风格 */
  background-color: var(--bg-light) !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
  transform: translateY(-2px);
}

/* [Tom的浪漫] 游戏菜单和工具卡片样式 - 移除背景，图3深色调 */
[data-theme="romantic"] .game-card,
[data-theme="romantic"] .tool-card {
  background: transparent !important;
  /* 移除内容背景 */
  border: 1px solid var(--border-color) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  transition: all 0.3s ease;
}

[data-theme="romantic"] .game-card:hover,
[data-theme="romantic"] .tool-card:hover {
  background: transparent !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 20px rgba(91, 155, 213, 0.2) !important;
  transform: translateY(-2px);
}

/* [Tom的浪漫] 菜单按钮样式 - 图3深色调 */
[data-theme="romantic"] .tab-link {
  color: rgba(255, 255, 255, 0.6) !important;
  transition: all 0.3s ease;
}

[data-theme="romantic"] .tab-link:hover {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(91, 155, 213, 0.6),
    0 0 24px rgba(91, 155, 213, 0.3);
}

[data-theme="romantic"] .tab-link.active {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(91, 155, 213, 0.6),
    0 0 24px rgba(91, 155, 213, 0.3);
}

/* [Tom的浪漫] 输入框样式 - 图3深色调 */
[data-theme="romantic"] textarea,
[data-theme="romantic"] input[type="text"],
[data-theme="romantic"] input[type="password"],
[data-theme="romantic"] input[type="number"],
[data-theme="romantic"] select {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  backdrop-filter: none !important;
  transition: all 0.3s ease;
}

[data-theme="romantic"] textarea:focus,
[data-theme="romantic"] input[type="text"]:focus,
[data-theme="romantic"] input[type="password"]:focus,
[data-theme="romantic"] input[type="number"]:focus,
[data-theme="romantic"] select:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 2px rgba(91, 155, 213, 0.2),
    0 0 15px rgba(91, 155, 213, 0.1) !important;
  outline: none;
}

/* [Tom的浪漫] 按钮样式 - 图3深色调 */
[data-theme="romantic"] button:not(.theme-toggle-btn):not(.close-btn) {
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  transition: all 0.3s ease;
}

[data-theme="romantic"] button:not(.theme-toggle-btn):not(.close-btn):hover {
  border-color: var(--accent-color) !important;
  background: rgba(91, 155, 213, 0.1) !important;
  box-shadow: 0 0 15px rgba(91, 155, 213, 0.2) !important;
}

[data-theme="romantic"] button.primary,
[data-theme="romantic"] .btn-primary {
  background: linear-gradient(135deg, var(--accent-gradient-start), var(--accent-gradient-end)) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(91, 155, 213, 0.3) !important;
}

[data-theme="romantic"] button.primary:hover,
[data-theme="romantic"] .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(91, 155, 213, 0.4),
    0 0 30px rgba(91, 155, 213, 0.2) !important;
  transform: translateY(-2px);
}

/* [Tom的浪漫] 卡片样式 - 移除背景，图3深色调 */
[data-theme="romantic"] .card,
[data-theme="romantic"] .profile-card,
[data-theme="romantic"] .settings-pane {
  background: transparent !important;
  /* 移除内容背景 */
  border: 1px solid var(--border-color) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* [Tom的浪漫] 导航栏样式 - 透明背景，图3深色调 */
[data-theme="romantic"] .tab-nav {
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
}

/* [Tom的浪漫] 设置菜单容器 - 去掉背景色 */
[data-theme="romantic"] .settings-menu {
  background: transparent !important;
  background-color: transparent !important;
}

/* [Tom的浪漫] 设置菜单项样式 - 图3深色调，去掉框子背景色 */
[data-theme="romantic"] .settings-menu-item {
  color: var(--text-secondary) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  transition: all 0.3s ease;
}

[data-theme="romantic"] .settings-menu-item:hover {
  background: linear-gradient(135deg, var(--accent-gradient-start), var(--accent-gradient-end)) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(91, 155, 213, 0.3) !important;
}

[data-theme="romantic"] .settings-menu-item.active {
  background: linear-gradient(135deg, var(--accent-gradient-start), var(--accent-gradient-end)) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(91, 155, 213, 0.3) !important;
}

/* [Tom的浪漫] 树形菜单项样式 - 图3深色调 */
[data-theme="romantic"] .tree-item-label {
  color: var(--text-secondary) !important;
  transition: all 0.3s ease;
}

[data-theme="romantic"] .tree-item-label:hover {
  color: #ffffff !important;
  background: rgba(91, 155, 213, 0.15) !important;
  border-left: 2px solid var(--accent-color) !important;
}

[data-theme="romantic"] .tree-item.selected>.tree-item-label {
  color: #ffffff !important;
  background: rgba(91, 155, 213, 0.15) !important;
  border-left: 2px solid var(--accent-color) !important;
}

/* [Tom的浪漫] 滚动条样式 - 图3深色调 */
[data-theme="romantic"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="romantic"] ::-webkit-scrollbar-track {
  background: rgba(10, 10, 20, 0.5);
}

[data-theme="romantic"] ::-webkit-scrollbar-thumb {
  background: rgba(91, 155, 213, 0.3);
  border-radius: 4px;
}

[data-theme="romantic"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(91, 155, 213, 0.5);
}

/* [Tom的浪漫] 模态框样式 - 图3深色调 */
[data-theme="romantic"] .modal {
  background: rgba(15, 15, 25, 0.95) !important;
  border: 1px solid var(--border-color) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(91, 155, 213, 0.2) !important;
}

[data-theme="romantic"] .modal-header {
  border-bottom: none !important;
  color: var(--text-primary) !important;
}

/* [Tom的浪漫] 隐藏所有白色箭头和箭头图标 */
[data-theme="romantic"] .register-arrow,
[data-theme="romantic"] .my-chevron,
[data-theme="romantic"] .toggle-arrow,
[data-theme="romantic"] .select-arrow-icon {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* 隐藏包含箭头字符的span元素 */
[data-theme="romantic"] span:contains("→"),
[data-theme="romantic"] span:contains("›"),
[data-theme="romantic"] span:contains("⌃"),
[data-theme="romantic"] span:contains("▼") {
  display: none !important;
}

/* 隐藏所有箭头相关的伪元素 */
[data-theme="romantic"] *::before,
[data-theme="romantic"] *::after {
  content: none !important;
}

/* 确保所有内容容器背景透明 */
[data-theme="romantic"] .content-wrapper,
[data-theme="romantic"] .main-content,
[data-theme="romantic"] .panel-container,
[data-theme="romantic"] .chat-container,
[data-theme="romantic"] .sidebar,
[data-theme="romantic"] .main-panel,
[data-theme="romantic"] .chat-panel,
[data-theme="romantic"] .tool-panel,
[data-theme="romantic"] .settings-container,
[data-theme="romantic"] .chat-main-area,
[data-theme="romantic"] .chat-display,
[data-theme="romantic"] .input-area.section-box,
[data-theme="romantic"] .section-box {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* [Tom的浪漫] 下拉菜单样式 - 图3深色调 */
[data-theme="romantic"] .dropdown-menu,
[data-theme="romantic"] .version-dropdown {
  background: rgba(15, 15, 25, 0.95) !important;
  border: 1px solid var(--border-color) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="romantic"] .dropdown-menu-item,
[data-theme="romantic"] .version-option {
  color: var(--text-primary) !important;
  background: transparent !important;
}

[data-theme="romantic"] .dropdown-menu-item:hover,
[data-theme="romantic"] .version-option:hover {
  background: rgba(91, 155, 213, 0.15) !important;
  color: #ffffff !important;
}

/* [Tom的浪漫] 聊天消息样式 - 图3深色调 */
[data-theme="romantic"] .message,
[data-theme="romantic"] .chat-message {
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
  backdrop-filter: none !important;
}

/* [Tom的浪漫] 代码块样式 - 图3深色调 */
[data-theme="romantic"] pre,
[data-theme="romantic"] code {
  background: rgba(15, 15, 25, 0.6) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

/* [Tom的浪漫] 标签页内容样式 - 透明背景 */
[data-theme="romantic"] .tab-content,
[data-theme="romantic"] .pane-content {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* [Tom的浪漫] 列表项样式 - 图3深色调 */
[data-theme="romantic"] .list-item,
[data-theme="romantic"] .tree-item {
  background: transparent !important;
}

[data-theme="romantic"] .list-item:hover,
[data-theme="romantic"] .tree-item:hover {
  background: rgba(91, 155, 213, 0.1) !important;
}

/* =========================================
         [图文反馈修正] 浅色模式专属样式覆盖
         ========================================= */

/* 1. 顶部菜单：选中状态改为“纯黑底+白字”，去除立体光效 */
[data-theme="light"] .tab-link.active {
  background-color: #000000 !important;
  /* 纯黑平面底 */
  color: #ffffff !important;
  /* 白色文字 */
  border: 1px solid #000000 !important;
  box-shadow: none !important;
  /* 去除光晕立体感 */
  border-radius: 4px !important;
}

/* 2. Prompt 编辑按钮：文字颜色与边框颜色保持一致 */
[data-theme="light"] #btn-save-prompt {
  color: #67c23a !important;
  /* 绿色文字 */
  background: white !important;
}

[data-theme="light"] #btn-reset-prompt {
  color: #e6a23c !important;
  /* 橙色文字 */
  background: white !important;
}

[data-theme="light"] #btn-cancel-prompt {
  color: #999999 !important;
  /* 灰色文字 */
  background: white !important;
}

/* 3. 思考过程：淡灰底、黑字、黑边 */
[data-theme="light"] .thinking-process-container {
  background-color: #f2f2f2 !important;
  /* 淡淡的灰色背景 */
  border-left-color: #000000 !important;
  /* 左边条改为黑色 */
}

[data-theme="light"] .thinking-header {
  color: #000000 !important;
  /* 标题文字黑色 */
  background-color: transparent !important;
}

[data-theme="light"] .thinking-content {
  color: #333333 !important;
  /* 内容文字深灰/黑 */
  background-color: transparent !important;
}

[data-theme="light"] .thinking-toggle-icon {
  color: #000000 !important;
  /* 箭头黑色 */
}

/* 4. 侧边栏/列表：选中状态改为深色底 + 白色文字 */
[data-theme="light"] .tree-item.selected>.tree-item-label,
[data-theme="light"] .settings-menu-item.active {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}

/* =========================================
         [修复] 工具箱与游戏卡片 - 全局通用样式
         此段代码修复布局错乱、鼠标手势及动画效果
         ========================================= */

/* 1. 卡片基础布局：强制左右结构，支持自动换行 */
/* 默认深色模式下的卡片样式 - Obfuscator.io 风格 */
.tool-card,
.game-card {
  display: flex !important;
  flex-direction: row !important;
  /* 图标文字横向排列 */
  flex-wrap: wrap !important;
  /* 允许按钮换行到下一行 */
  align-items: center !important;
  /* 垂直居中 */
  cursor: pointer !important;
  /* 【需求】鼠标变成小手 */

  /* 外观基础设置 - Obfuscator.io 风格 */
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px !important;
  gap: 15px !important;
  /* 图标与文字的间距 */
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.tool-card:hover,
.game-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color) !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2), 0 0 0 1px rgba(59, 130, 246, 0.1);
  background-color: var(--bg-light);
}

[data-theme="dark"] .tool-card:hover,
[data-theme="dark"] .game-card:hover {
  background-color: var(--bg-surface);
}

/* 2. 悬停效果：卡片整体上浮 + 边框高亮 - Obfuscator.io 风格 */
/* 3. 图标样式与【需求】动画 */
.tool-icon,
.game-icon {
  font-size: 2.8em !important;
  line-height: 1 !important;
  flex-shrink: 0;
  /* 禁止图标被压缩 */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 弹性动画曲线 */
}

.tool-icon img,
.game-icon img {
  width: 44px;
  height: 44px;
  display: block;
  border-radius: 10px;
}

/* 【需求】鼠标放上去，图标会有小动画 (放大并微旋转) */
.tool-card:hover .tool-icon,
.game-card:hover .game-icon {
  transform: scale(1.2) rotate(-8deg);
}

.tools-grid .tool-card.dragging {
  opacity: 0.4;
}

.tools-grid .tool-card.over {
  outline: 2px dashed var(--accent-color);
  outline-offset: -6px;
}

/* 4. 文字信息区域 */
.tool-info,
.game-info {
  flex: 1;
  /* 占据剩余横向空间 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  /* 修复文字过长导致布局撑开的问题 */
}

.tool-info h4,
.game-info h4 {
  margin: 0 0 6px 0 !important;
  font-size: 16px !important;
  font-weight: bold;
  color: var(--text-primary);
}

.tool-info p,
.game-info p {
  margin: 0 !important;
  font-size: 12px !important;
  color: var(--text-secondary);
  opacity: 0.9;
  line-height: 1.4;
}

/* 5. 【需求】按钮样式及间距修复 */
.game-play-btn {
  /* 强制按钮占据新的一整行 */
  flex-basis: 100% !important;
  width: 100% !important;

  /* 【需求】按钮和上面的内容需要有10px的距离 */
  margin-top: 10px !important;

  padding: 6px 0 !important;
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 4px;
  text-align: center;
  transition: all 0.2s;
}

/* 按钮悬停效果 */
.game-card:hover .game-play-btn {
  background-color: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

/* 6. 浅色模式 (Light Mode) 专属颜色修复 */
[data-theme="light"] .tool-card,
[data-theme="light"] .game-card {
  background-color: #ffffff !important;
  border-color: #e4e7ed !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .tool-info h4,
[data-theme="light"] .game-info h4 {
  color: #303133 !important;
  /* 深灰近黑 */
}

[data-theme="light"] .tool-info p,
[data-theme="light"] .game-info p {
  color: #909399 !important;
  /* 浅灰 */
}

/* 确保网格布局在不同屏幕下的适应性 */
.tools-grid,
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,
      minmax(280px, 1fr));
  /* 最小宽度280px */
  gap: 20px;
  padding: 10px 0;
}

/* =================================================================
         [新增] 收起对话框功能样式
         ================================================================= */

/* [修改] 收起按钮 - 细条样式，显示在输入框顶部 */
.collapse-chat-btn {
  position: absolute;
  left: 43%;
  top: -5px;
  /* [修改] 向上移动5px，调整位置以适应新高度 */
  width: 40px;
  /* [修改] 默认窄宽度 */
  height: 15px;
  /* [修改] 增加高度到15px */
  border-radius: 8px;
  /* [修改] 稍微增大圆角以适应新高度 */
  background: var(--bg-surface);
  border: 1px solid var(--accent-color) !important;
  /* [修改] 添加蓝色边框 */
  cursor: pointer;
  /* [关键修改] 使用margin-left实现居中，这样宽度变化时会自动从中心扩展 */
  margin-left: -20px;
  /* 宽度的一半：40px / 2 = 20px */
  transition: all 0.3s ease;
  /* [修改] 使用all transition，包括width和margin的变化 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000 !important;
  /* [修复] 提高 z-index，确保可以点击 */
  padding: 0;
  pointer-events: auto !important;
  /* [修复] 确保可以点击 */
}

/* 细条中间的实心小箭头 */
.collapse-chat-btn span {
  font-size: 14px;
  /* [修改] 稍微增大箭头以适应新高度 */
  color: var(--text-secondary);
  transition: color 0.3s ease;
  line-height: 1;
}

.collapse-chat-btn:hover {
  width: 120px;
  /* [修改] 悬停时变宽 */
  margin-left: -60px;
  /* [关键] 悬停时调整margin，保持居中：120px / 2 = 60px */
  background: var(--accent-color);
  border: 1px solid var(--accent-color) !important;
  /* [修改] 悬停时保持蓝色边框 */
}

.collapse-chat-btn:hover span {
  color: white;
}

/* 收起后的图标 - 70px圆形，显示在页面底部 */
.collapsed-chat-icon {
  position: fixed;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 70px;
  border-radius: 50% !important;
  /* [修复] 改为圆形 */
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s;
  border: none !important;
  /* [修复] 去掉所有边框 */
  overflow: hidden;
  /* [修复] 确保内容不超出圆形边界 */
}

.collapsed-chat-icon:hover {
  transform: translateX(-50%) scale(1.1);
}

/* 发光圆圈动画 */
.collapsed-chat-icon .glow-circle {
  fill: transparent;
  stroke: rgba(0, 191, 255, 0.6);
  stroke-width: 2;
  animation: glowPulse 2.5s ease-in-out infinite;
}

@keyframes glowPulse {

  0%,
  100% {
    stroke-width: 2;
    opacity: 0.6;
    r: 42;
  }

  50% {
    stroke-width: 3;
    opacity: 1;
    r: 44;
  }
}

/* 粒子动画 */
.collapsed-chat-icon .particle {
  fill: rgba(0, 191, 255, 0.8);
  animation: particleTwinkle 2s ease-in-out infinite;
}

.collapsed-chat-icon .particle.p1 {
  animation-delay: 0s;
}

.collapsed-chat-icon .particle.p2 {
  animation-delay: 0.3s;
}

.collapsed-chat-icon .particle.p3 {
  animation-delay: 0.6s;
}

.collapsed-chat-icon .particle.p4 {
  animation-delay: 0.9s;
}

.collapsed-chat-icon .particle.p5 {
  animation-delay: 1.2s;
}

.collapsed-chat-icon .particle.p6 {
  animation-delay: 1.5s;
}

@keyframes particleTwinkle {

  0%,
  100% {
    opacity: 0.3;
    r: 1.5;
  }

  50% {
    opacity: 1;
    r: 2.5;
  }
}

/* [新增] 智能体集群模式下收起图标的橙色样式 */
body.group-mode-active .collapsed-chat-icon,
.group-mode-active .collapsed-chat-icon {
  border: none !important;
  /* [修复] 去掉边框 */
  border-radius: 50% !important;
  /* [修复] 确保是圆形 */
  box-shadow: 0 0 20px rgba(230, 162, 60, 0.5) !important;
  animation: orangeIconPulse 2s ease-in-out infinite;
  overflow: hidden !important;
  /* [修复] 确保内容不超出圆形边界 */
}

body.group-mode-active .collapsed-chat-icon .glow-circle,
.group-mode-active .collapsed-chat-icon .glow-circle {
  stroke: rgba(230, 162, 60, 0.8) !important;
  animation: orangeGlowPulse 2.5s ease-in-out infinite;
}

body.group-mode-active .collapsed-chat-icon .particle,
.group-mode-active .collapsed-chat-icon .particle {
  fill: rgba(230, 162, 60, 0.9) !important;
  animation: orangeParticleTwinkle 2s ease-in-out infinite;
}

body.group-mode-active .collapsed-chat-icon circle[fill="#00bfff"],
.group-mode-active .collapsed-chat-icon circle[fill="#00bfff"] {
  fill: #e6a23c !important;
}

@keyframes orangeIconPulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(230, 162, 60, 0.5);
    transform: translateX(-50%) scale(1);
  }

  50% {
    box-shadow: 0 0 30px rgba(230, 162, 60, 0.8);
    transform: translateX(-50%) scale(1.05);
  }
}

@keyframes orangeGlowPulse {

  0%,
  100% {
    stroke-width: 2;
    opacity: 0.6;
    r: 42;
  }

  50% {
    stroke-width: 3;
    opacity: 1;
    r: 44;
  }
}

@keyframes orangeParticleTwinkle {

  0%,
  100% {
    opacity: 0.4;
    r: 1.5;
  }

  50% {
    opacity: 1;
    r: 2.5;
  }
}

/* [修改] 只收起输入框区域，保留对话内容显示 */
.input-area.collapsed {
  display: none !important;
}

/* 输入框区域需要相对定位，为收起按钮提供参照 */
.input-area {
  position: relative;
}

/* attach-btn需要相对定位，为收起按钮提供参照 */
.attach-btn {
  position: relative;
  display: inline-block;
}

/* =================================================================
         [新增] API配置图标按钮样式
         ================================================================= */

.icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0;
  flex-shrink: 0;
}

.icon-btn:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
  transform: scale(1.05);
}

.icon-btn:active {
  transform: scale(0.95);
}

/* API Key输入框容器，为按钮留出空间 */
#cfg-apikey {
  padding-right: 45px !important;
}

/* =================================================================
         [新增] Gemini Balance 管理界面样式
         ================================================================= */
.gemini-balance-admin {
  width: 100%;
  min-height: 600px;
  color: var(--text-primary);
}

.admin-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.admin-tabs .tab-btn {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-tabs .tab-btn:hover {
  border-color: var(--accent-color);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.admin-tabs .tab-btn.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
}

.admin-content {
  margin-top: 20px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  color: var(--text-primary);
}

.keys-section,
.config-section,
.logs-section {
  padding: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.keys-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.keys-tab-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.keys-tab-btn.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
}

.keys-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.key-item {
  padding: 15px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.key-item-content {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.key-text {
  flex: 1;
  font-family: monospace;
  color: var(--text-primary);
}

.key-fail-count {
  color: var(--text-secondary);
  font-size: 14px;
}

.key-actions {
  display: flex;
  gap: 8px;
}

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}

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

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-danger {
  background: #f56c6c;
  color: #ffffff;
}

.btn-danger:hover {
  background: #f78989;
}

.config-editor {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.config-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.config-item label {
  min-width: 200px;
  color: var(--text-primary);
  font-weight: 500;
}

.config-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
}

.stats-panel {
  padding: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.stat-card {
  padding: 20px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.stat-card h3 {
  margin: 0 0 10px 0;
  color: var(--text-primary);
}

.error-logs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.error-log-item {
  padding: 15px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.log-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.log-time {
  color: var(--text-secondary);
  font-size: 14px;
}

.log-error-code {
  padding: 2px 8px;
  background: #f56c6c;
  color: #ffffff;
  border-radius: 4px;
  font-size: 12px;
}

.log-content {
  color: var(--text-primary);
}

.log-key {
  font-family: monospace;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.log-error {
  color: var(--text-primary);
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
  margin: 0;
  color: var(--text-primary);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: 20px;
}

.modal-body textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: monospace;
  resize: vertical;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid var(--border-color);
}

.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: none;
}

.notification.success {
  border-color: #67c23a;
  background: rgba(103, 194, 58, 0.1);
}

.notification.error {
  border-color: #f56c6c;
  background: rgba(245, 108, 108, 0.1);
}

/* 浅色模式适配 */
[data-theme="light"] .gemini-balance-admin {
  color: var(--text-primary);
}

[data-theme="light"] .keys-section,
[data-theme="light"] .config-section,
[data-theme="light"] .logs-section,
[data-theme="light"] .stats-panel {
  background: var(--bg-surface);
  border-color: var(--border-color);
}

[data-theme="light"] .key-item,
[data-theme="light"] .error-log-item {
  background: var(--bg-input);
  border-color: var(--border-color);
}

/* 正方形小图标按钮样式 */
.icon-btn-square {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  padding: 0;
  flex-shrink: 0;
}

.icon-btn-square:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
}

.icon-btn-square:active {
  transform: scale(0.95);
}

/* [新增] 为刷新按钮添加旋转动画 - 只旋转图标 */
#btn-refresh-model-data {
  position: relative;
  overflow: visible;
}

#btn-refresh-model-data .refresh-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

#btn-refresh-model-data:hover .refresh-icon {
  animation: rotateIcon 0.6s linear infinite;
}

/* 图标旋转动画 */
@keyframes rotateIcon {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* =================================================================
         [新增] API平台状态指示灯样式
         ================================================================= */

.status-light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  flex-shrink: 0;
}

.status-light.status-gray {
  background-color: #6c757d;
  box-shadow: 0 0 4px rgba(108, 117, 125, 0.5);
}

.status-light.status-green {
  background-color: #67c23a;
  box-shadow: 0 0 8px rgba(103, 194, 58, 0.8);
  animation: pulseGreen 2s ease-in-out infinite;
}

.status-light.status-red {
  background-color: #ff4d4f;
  box-shadow: 0 0 8px rgba(255, 77, 79, 0.8);
  animation: pulseRed 2s ease-in-out infinite;
}

@keyframes pulseGreen {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

@keyframes pulseRed {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

/* 美化"启用真实API"样式 */
.real-api-toggle-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  border-radius: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.3s;
}

.real-api-toggle-wrapper:hover {
  border-color: var(--accent-color);
  background: rgba(64, 158, 255, 0.1);
}

.real-api-toggle-wrapper.enabled {
  background: #67c23a;
  /* 背景色和边框颜色一致 */
  border-color: #67c23a;
}

.real-api-toggle-wrapper.enabled label {
  color: #ffffff !important;
  /* 开启状态时文字为白色，确保在绿色背景上清晰可见 */
}

.real-api-toggle-wrapper.enabled .robot-icon-svg {
  color: #ffffff !important;
  /* 开启状态时图标为白色，确保在绿色背景上清晰可见 */
}

.real-api-toggle-wrapper.enabled:hover {
  background: #67c23a;
  /* 悬停时保持一致的背景色 */
}

.robot-icon-svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* =================================================================
         [新增] API网址列表样式
         ================================================================= */

.api-url-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.2s;
  gap: 15px;
}

.api-url-item:hover {
  border-color: var(--accent-color);
  background: rgba(64, 158, 255, 0.05);
}

.api-url-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.api-url-name {
  flex: 0 0 150px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.api-url-address {
  flex: 1;
  color: var(--accent-color);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

.api-url-address:hover {
  text-decoration: underline;
  color: var(--accent-hover);
}

.btn-delete-url {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0;
}

.btn-delete-url:hover {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: white;
}

/* =================================================================
         [最终修复] 强制控制真实API开关颜色 (使用 ID 选择器)
         ================================================================= */

/* 1. 默认状态：灰色背景 */
#toggle-switch-visual {
  position: relative;
  width: 54px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(108, 117, 125, 0.38), rgba(108, 117, 125, 0.26)) !important;
  border: 1px solid var(--border-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  cursor: pointer;
  flex-shrink: 0;
}

/* 2. 启用状态：绿色背景 (当JS添加了 .enabled 类时) */
#toggle-switch-visual.enabled {
  background-color: var(--accent-color, #409EFF) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  border-color: var(--accent-color, #409EFF);
  box-shadow: 0 8px 22px rgba(64, 158, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* 3. 圆点样式 (绝对定位) */
#toggle-switch-visual::before {
  content: "启用";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.95);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

#toggle-switch-visual.enabled::before {
  opacity: 1;
}

#toggle-switch-visual::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #f2f4f8);
  transition: transform 0.28s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.25s ease, background 0.25s ease;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* 4. 圆点移动 (启用状态) */
#toggle-switch-visual.enabled::after {
  transform: translateX(26px);
}

/* 5. 悬停效果 */
.real-api-toggle-wrapper:hover #toggle-switch-visual {
  opacity: 0.9;
}

/* =================================================================
         [新增] 拆单菜单样式 - 深色主题，无边框按钮
         ================================================================= */

/* 拆单菜单容器 */
.chat-add-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  background: #0E1014 !important;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  min-width: 200px;
  z-index: 1000;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
}

/* 拆单菜单项 - 无边框按钮（高优先级，覆盖全局button样式） */
button.chat-add-item,
.chat-add-item {
  background: transparent !important;
  border: none !important;
  color: #e6e6e6 !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  cursor: pointer;
  text-align: left;
  font-size: 14px !important;
  transition: background-color 0.2s ease !important;
  width: 100%;
  box-shadow: none !important;
  margin: 0 !important;
}

/* 悬停效果 */
button.chat-add-item:hover,
.chat-add-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

/* 激活状态 */
button.chat-add-item:active,
.chat-add-item:active {
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  box-shadow: none !important;
}

/* 确保没有边框和阴影 */
button.chat-add-item:focus,
button.chat-add-item:focus-visible,
.chat-add-item:focus,
.chat-add-item:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* =========================================
         [新增] 智能体菜单样式
         ========================================= */
.agent-menu-item:hover {
  background-color: var(--bg-surface) !important;
}

.project-category-btn:hover {
  background-color: var(--bg-input) !important;
  border-color: var(--accent-color) !important;
}

.project-category-btn.selected {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}

#create-project-submit-btn:hover {
  background-color: var(--accent-color) !important;
  color: #fff !important;
  border-color: var(--accent-color) !important;
}

/* =========================================
         [新增] 全局主题变量定义
         ========================================= */
:root {
  /* 默认深色变量 */
  --bg-app: #050505;
  --bg-sidebar: rgba(0, 0, 0, 0.5);
  /* 顶部菜单默认背景 */
  --bg-nav: rgba(5, 8, 15, 0.5);
  /* 统一的深蓝色，50%透明度 */
  --bg-surface: #141414;
  --bg-input: #0E1014;
  --text-primary: #e6e6e6;
  --text-secondary: #999999;
  --border-color: #333333;
  --accent-color: #409eff;
  /* 默认主色 */
  --accent-hover: #66b1ff;
  --tab-nav-height: 60px;
}

/* [浅色模式] 完整配色方案 */
[data-theme="light"] {
  --bg-app: #f2f3f5;
  /* 整体背景：浅灰 */
  --bg-sidebar: #ffffff;
  /* 侧边/顶栏：纯白 */
  --bg-nav: rgba(5, 8, 15, 0.5);
  /* 统一的深蓝色，50%透明度 */
  --bg-surface: #ffffff;
  /* 卡片/容器：纯白 */
  --bg-input: #f7f8fa;
  /* 输入框：极浅灰 */
  --text-primary: #1f1f1f;
  /* 主文字：近黑 */
  --text-secondary: #5f6368;
  --border-color: #e5e6eb;
  /* 边框：浅灰 */

  /* [修改] 主色改为黑色/深灰，去除默认蓝 */
  --accent-color: #333333;
  --accent-hover: #000000;
  --accent-glow: rgba(0, 0, 0, 0.1);
  /* 光晕改为淡淡的黑色阴影 */

  color: #1f1f1f;
}

/* [浅色模式] 针对 Body 背景图的覆盖 */
[data-theme="light"] body {
  background-image: none !important;
  /* 去掉深色的星空背景 */
  background-color: var(--bg-app) !important;
}

/* [个性风格] 基础变量 */
[data-theme="personal"] {
  --bg-app: #0b0f19;
  --bg-sidebar: rgba(11, 15, 25, 0.8);
  --bg-nav: rgba(5, 8, 15, 0.5);
  /* 统一的深蓝色，50%透明度 */
  --bg-surface: rgba(20, 25, 40, 0.6);
  --border-color: rgba(64, 158, 255, 0.2);
}

.hidden {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in-active {
  animation: fadeIn 1s ease-in-out forwards;
}

/* --- 菜单按钮风格 --- */
.tab-nav {
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.3s, border-color 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 6px 0;
}

/* 主菜单按钮容器 - 居中显示 */
.tab-nav-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.tab-link {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  margin: 0 10px;
  padding: 12px 5px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s ease;
  display: inline-block;
}

.tab-link:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* 只对图标进行动画 */
.tab-link .icon-emoji {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: scale(0.85);
  /* [修改] 未选中时图标较小 */
}

/* [修改] 选中状态：图标放大2倍，向左4px，向上5px */
.tab-link.active .icon-emoji {
  transform: scale(2) translateX(-4px) translateY(-5px) !important;
}

/* [修改] 悬停时：图标放大2倍，向左4px，向上5px */
.tab-link:hover:not(.active) .icon-emoji {
  transform: scale(2) translateX(-4px) translateY(-5px);
}

/* [这里是修改后的代码] */
.tab-link.active {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 229, 255, 0.8),
    0 0 20px rgba(0, 229, 255, 0.4);
  opacity: 1;
  background: transparent !important;
}

/* 底部光线：中间亮两边淡 (保持不变) */
.tab-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: radial-gradient(circle, #00e5ff 0%, transparent 100%);
  box-shadow: 0 -1px 5px #00e5ff;
}

/* [新增] 左侧用户名显示区域 */
.nav-left-controls {
  position: absolute;
  left: 20px;
  display: flex;
  align-items: center;
  height: 100%;
}

#username-display {
  color: #e6e6e6;
  font-weight: bold;
  font-size: 16px;
}

/* [新增] 右侧登录/注册按钮区域 */
.nav-right-controls {
  position: absolute;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
}

.auth-button {
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.2s;
  flex-shrink: 0;
}

.auth-button:hover {
  background-color: #66b1ff;
  transform: scale(1.05);
}

.pro-gateway-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: linear-gradient(135deg, #f6e27a, #d99a00);
  color: #1f1f1f;
  font-size: 11px;
  font-weight: 800;
  transform: rotate(40deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.pro-gateway-badge .badge-glyph {
  transform: rotate(-40deg);
  display: inline-block;
}

.version-toggle-btn.pro-active .pro-gateway-badge {
  display: flex;
}

.version-dropdown {
  position: absolute;
  top: 52px;
  left: 0;
  width: 260px;
  background: #2b2b2b;
  border: 1px solid #3a3a3a;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  padding: 8px;
  display: none;
}

.version-dropdown.open {
  display: block;
}

.version-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
  border: 1px solid transparent;
}

.version-option:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #4a4a4a;
}

.version-option.active {
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.06);
}

.version-option-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.version-title {
  font-weight: 700;
  color: var(--text-primary);
}

.version-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

.version-upgrade {
  background: rgba(255, 208, 134, 0.18);
  color: #f8c364;
  border: 1px solid rgba(248, 195, 100, 0.5);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.version-check {
  width: 20px;
  text-align: right;
  color: var(--accent-color);
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.version-option.active .version-check {
  opacity: 1;
}

[data-theme="light"] .version-toggle-btn {
  background: #e8e8e8;
  border: 1px solid #d3d3d3;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  color: #1f1f1f;
}

[data-theme="light"] .version-dropdown {
  background: #f7f7f7;
  border: 1px solid #dcdcdc;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .version-option:hover {
  background: rgba(0, 0, 0, 0.04);
}

.session-action {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1500;
}

.session-action-btn {
  min-width: 110px;
  padding: 8px 14px;
  background: #2f2f2f;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  color: #f5f5f5;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s,
    color 0.2s;
}

.session-action-btn:hover {
  border-color: var(--accent-color);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.session-action-btn.join {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
}

[data-theme="light"] .session-action-btn {
  background: #ececec;
  border: 1px solid #d3d3d3;
  color: #1f1f1f;
}

[data-theme="light"] .session-action-btn.join {
  background: #409eff;
  border-color: #409eff;
  color: #ffffff;
}

.role-switcher {
  position: relative;
}

.role-toggle-btn {
  min-width: 80px;
  padding: 6px 10px;
  background: #2f2f2f;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  color: #f5f5f5;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s,
    color 0.2s;
}

.role-toggle-btn:hover {
  border-color: var(--accent-color);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

.role-dropdown {
  position: absolute;
  top: 42px;
  left: 0;
  right: auto;
  width: max-content;
  min-width: 160px;
  max-width: 240px;
  background: #2b2b2b;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  padding: 8px;
  display: none;
  z-index: 2000;
}

.role-dropdown.open {
  display: block;
}

.role-option {
  padding: 8px 10px;
  border-radius: 8px;
  color: #f5f5f5;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.4;
}

.role-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #4a4a4a;
}

.role-option.active {
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.06);
}

.pro-bubble {
  background: rgba(255, 193, 7, 0.15);
  color: #ffdd75;
  border: 1px solid rgba(255, 193, 7, 0.4);
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.pro-bubble.hidden {
  display: none;
}

.bubble-close {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}

.hero-my-button.disabled,
.hero-my-button.disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: #555 !important;
  color: #888 !important;
  background: rgba(0, 0, 0, 0.2) !important;
  box-shadow: none !important;
}

/* --- 隐藏空状态文字 --- */
.empty-text {
  display: none !important;
}

/* --- 树状结构虚线 (左侧对齐) --- */
.tree-view ul {
  margin-left: 18px;
  padding-left: 0;
  position: relative;
}

.tree-view ul::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  border-left: 1px dashed #666;
  width: 1px;
}

.tree-view li {
  position: relative;
  list-style: none;
  line-height: 28px;
}

.tree-view li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -12px;
  width: 12px;
  border-top: 1px dashed #666;
}

#library-notes-tree>ul::before,
#notes-tree-select>ul::before {
  display: none;
}

#library-notes-tree>ul>li::before,
#notes-tree-select>ul>li::before {
  display: none;
}

.tree-view li:last-child>ul::before {
  display: none;
}

/* --- 统计信息 --- */
.tree-item-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.tree-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 5px;
  max-width: 160px;
}

.tree-item-stats {
  font-size: 12px;
  color: #aaa;
  flex-shrink: 0;
}

/* --- 名片 --- */
/* 1. 名片主容器 */
.profile-card {
  /* 布局：强制垂直排列 (Column) */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  /* 尺寸与定位 */
  min-width: 230px !important;
  max-width: 230px !important;
  /* 外观：必须有深色背景，否则看不见文字 */
  background-color: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

/* 2. 向上收起按钮 (绝对定位，不占位置) */
#btn-retract-card {
  position: absolute !important;
  right: 8px;
  z-index: 1001;
  cursor: pointer;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

#btn-retract-card:hover {
  color: white;
}

/* 3. 头部区域 (横向排列) */
.profile-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  /* 靠左对齐 */
  width: 101% !important;
  /* 占满一行 */
  flex-shrink: 0;
  /* 禁止被压缩 */
  margin-bottom: 5px !important;
  /* 给下方内容留点空隙 */
  padding: 5px 5px !important;
  /* [修改] 减少间距，最大5像素 */
  gap: 5px !important;
  /* [修改] 减少间距，最大5像素 */
  padding-right: 5px !important;
  /* 移除右边留空，去掉红色区域宽度 */
}



#user-avatar-btn {
  width: 70px;
  height: 40px;
  padding: 0;
  margin: 0;
  border: none !important;
  background: transparent;
  outline: none;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  font-size: 19.2px;
  /* 缩小0.4倍 (32px * 0.6 = 19.2px) */
  line-height: 1;
  box-shadow: none !important;
  transition: transform 0.3s ease;
}

#user-avatar-btn:hover {
  transform: none;
  /* 鼠标悬停时放大图标 */
}

#user-avatar-btn img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.profile-info {
  flex-grow: 1;
  /* 占据中间剩余空间 */
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* [修改] 允许收缩，不设置最小宽度 */
}

/* 展开/收起的小箭头按钮 */
.toggle-bio-btn {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-left: 5px !important;
  /* [修改] 减少间距，最大5像素 */
  flex-shrink: 0;
}

.toggle-bio-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 4. 简介区域 (垂直显示在下方) */
.profile-bio {
  display: block !important;
  width: 100% !important;
  /* 强制占满宽度 */
  overflow: hidden;
  /* 动画必须 */
  box-sizing: border-box;
  /* 字体颜色设置 */
  color: #e0e0e0;
  font-size: 13px;
  line-height: 1.6;
  /* 展开状态 (默认) */
  max-height: 600px;
  opacity: 1;
  margin-top: 0 !important;
  /* [修改] 去掉负边距 */
  padding-top: 5px !important;
  /* [修改] 减少间距，最大5像素 */
  padding-left: 5px !important;
  /* [修改] 减少间距，最大5像素 */
  padding-right: 5px !important;
  /* [修改] 减少间距，最大5像素 */
  padding-bottom: 5px !important;
  /* [修改] 减少间距，最大5像素 */
  border-top: 1px solid rgba(255, 255, 255, 0.1);

  /* 动画过渡 */
  transition: all 0.4s ease;
}

/* 简介收起状态 */
.profile-bio.bio-collapsed {
  max-height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  border-top-color: transparent !important;
  pointer-events: none;
}

/* --- 导入按钮 --- */
label.lib-action-btn.blue {
  background-color: #e6a23c !important;
  border-color: #e6a23c !important;
  color: white !important;
}

/* 1. 消息气泡全宽显示 (与输入框对齐) */
.chat-message {
  display: flex;
  flex-direction: row;
  width: 100% !important;
  /* 强制全宽 */
  max-width: 100% !important;
  margin-bottom: 20px;
  padding-right: 10px;
  box-sizing: border-box;
}

.chat-content-wrapper {
  flex: 1;
  /* 占满剩余空间 */
  min-width: 0;
  /* 允许内部文本换行 */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px 15px;
  margin-left: 10px;
}

/* 确保文本自动换行 */
.chat-content-wrapper pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  margin: 0;
}

/* 2. 思考过程 UI (折叠/展开) */
.thinking-process-container {
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid #e6a23c;
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}

.thinking-header {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9em;
  color: #e6a23c;
  user-select: none;
}

.thinking-content {
  padding: 10px 12px;
  font-family: "Consolas", monospace;
  font-size: 0.85em;
  color: #aaa;
  background: rgba(0, 0, 0, 0.1);
  white-space: pre-wrap;
  line-height: 1.8;

  /* 默认折叠状态: 约5行高度 */
  max-height: 9em;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* 展开状态: 约15行高度 + 滚动条 */
.thinking-content.expanded {
  max-height: 18em;
  overflow-y: auto;
}

/* 3. 图片预览区 (高度优化 & 删除按钮) */
#attachment-preview-area {
  padding: 8px;
  max-height: 120px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

#attachment-preview-area::-webkit-scrollbar {
  height: 6px;
}

#attachment-preview-area::-webkit-scrollbar-track {
  background: transparent;
}

#attachment-preview-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

#attachment-preview-area::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.preview-item {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid #444;
  border-radius: 6px;
  overflow: hidden;
  /* [需求] 比图片高 5px (通过 padding 实现) */
  padding-bottom: 5px;
  background-color: #2c2c2c;
  /* 给底部留白一个背景色 */
  transition: transform 0.2s;
}

.preview-item:hover {
  transform: scale(1.05);
}

.preview-item img {
  height: 100px !important;
  /* 固定图片高度 */
  width: auto;
  display: block;
  object-fit: cover;
}

/* 删除按钮样式优化 - 鼠标悬停时显示 */
.preview-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: rgba(200, 0, 0, 0.9) !important;
  color: white !important;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: none;
  /* 默认隐藏 */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
  z-index: 10;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.preview-item:hover .preview-delete-btn {
  display: flex;
  /* 悬停时显示 */
}

.preview-delete-btn:hover {
  background-color: red !important;
  transform: scale(1.1);
}

/* =========================================
         [核心需求] 按钮样式：未选中空心，选中实心
         ========================================= */

/* 1. 通用按钮基础 (默认透明背景，有边框) */
button:not(.chat-add-item),
.theme-toggle-btn,
.tab-link {
  background-color: transparent !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  transition: all 0.3s ease;
}

/* 2. 悬停状态 (稍微变亮，但还是没有主色填充) */
button:not(.chat-add-item):hover,
.theme-toggle-btn:hover,
.tab-link:hover {
  border-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 3. [选中/激活状态] 实心填充 (主色) */
button.active,
.theme-toggle-btn.active,
.tab-link.active,
.settings-menu-item.active {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
  /* 选中后文字必为白色 */
  box-shadow: 0 0 10px var(--accent-glow, rgba(64, 158, 255, 0.4));
  text-shadow: none;
  opacity: 1;
}

/* [加强] 薛某不才疯风格选中样式 - 和主菜单选中一样明显 */
.theme-toggle-btn[data-value="personal"].active {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px var(--accent-glow, rgba(64, 158, 255, 0.6)),
    0 0 25px rgba(64, 158, 255, 0.3) !important;
  text-shadow: none;
  opacity: 1;
  transform: scale(1.02);
  transition: all 0.3s ease;
}

.theme-toggle-btn[data-value="personal"].active:hover {
  box-shadow: 0 0 20px var(--accent-glow, rgba(64, 158, 255, 0.8)),
    0 0 30px rgba(64, 158, 255, 0.4) !important;
  transform: scale(1.05);
}

/* 5. 特殊按钮：功能性按钮 (添加/删除/保存等) 保持原有颜色逻辑 */
/* 我们可以利用之前定义的 .primary-button 类或者 id 来强制实心 */
/* 这些按钮保持之前的特定样式逻辑，不全局覆盖，以免破坏功能色 */

/* 智能体工具栏的 My 按钮（独立样式，不受全局 button:hover 影响） */
.hero-my-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 3px solid var(--accent-color) !important;
  padding: 8px 12px;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 6px;
  background: transparent !important;
  transition: all 0.2s ease;
  box-shadow: none !important;
  outline: none;
}

.hero-my-button:focus,
.hero-my-button:active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 3px solid var(--accent-color) !important;
  padding: 8px 12px;
  color: #ffffff !important;
  font-weight: 700;
  border-radius: 6px;
  background: transparent !important;
  transition: all 0.2s ease;
  box-shadow: none !important;
  outline: none;
}

.hero-my-button img {
  width: auto !important;
  height: 16px !important;
  max-width: 22px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
}

.hero-my-button:hover {
  background: #ffcc00 !important;
  border-color: #d62828 !important;
  border-width: 4px !important;
  color: #d62828 !important;
  box-shadow: 0 8px 20px rgba(214, 40, 40, 0.6);
}

.hero-my-button.my-active {
  background: #ffcc00 !important;
  border-color: #d62828 !important;
  border-width: 4px !important;
  color: #d62828 !important;
  box-shadow: 0 8px 20px rgba(214, 40, 40, 0.6);
}

[data-theme="light"] .hero-my-button {
  color: #000000 !important;
  box-shadow: none !important;
}

/* ========================================= */
/* 软件确认对话框样式 */
/* ========================================= */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 150px;
  /* [修改] 限制弹框范围，不遮挡底部输入框 */
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 9999;
  /* [修改] 降低层级，确保输入框(z-index: 10001)在上方 */
  backdrop-filter: blur(3px);
  padding-top: 15vh;
  /* 中间偏上的位置 */
  pointer-events: auto;
  /* 确保可以点击遮罩层关闭 */
}

.confirm-dialog-box {
  background: var(--bg-surface);
  border: 2px solid var(--accent-color);
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: dialogSlideIn 0.2s ease-out;
  pointer-events: auto;
  /* 确保弹框本身可点击 */
}

@keyframes dialogSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.95);
  }

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

.confirm-dialog-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(64, 158, 255, 0.1);
}

.confirm-dialog-icon {
  font-size: 24px;
}

.confirm-dialog-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-primary);
}

.confirm-dialog-body {
  padding: 20px;
}

.confirm-dialog-body p {
  margin: 0;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.6;
}

.confirm-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 20px;
  border-top: 1px solid var(--border-color);
}

.confirm-dialog-footer button {
  min-width: 80px;
}

/* 确认按钮绿色样式 - 所有确认/确定按钮 */
.confirm-button-green,
.confirm-dialog-ok,
#confirm-dialog-ok,
#alert-dialog-ok,
#prompt-dialog-ok,
button.confirm-button-green,
#data-select-confirm-btn,
#modal-options-ok,
#modal-askstring-ok,
#modal-category-ok,
button[id*="confirm"]:not(.secondary-button):not(.danger-button),
button[id*="ok"]:not(.secondary-button):not(.danger-button) {
  background-color: #67c23a !important;
  border-color: #67c23a !important;
  color: #fff !important;
}

.confirm-button-green:hover,
.confirm-dialog-ok:hover,
#confirm-dialog-ok:hover,
#alert-dialog-ok:hover,
#prompt-dialog-ok:hover,
button.confirm-button-green:hover,
#data-select-confirm-btn:hover,
#modal-options-ok:hover,
#modal-askstring-ok:hover,
#modal-category-ok:hover,
button[id*="confirm"]:not(.secondary-button):not(.danger-button):hover,
button[id*="ok"]:not(.secondary-button):not(.danger-button):hover {
  background-color: #5daf34 !important;
  border-color: #5daf34 !important;
  box-shadow: 0 0 12px rgba(103, 194, 58, 0.5) !important;
}

/* ========================================= */
/* 数据管理多选对话框样式 */
/* ========================================= */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
}

.data-select-modal-content {
  background-color: var(--bg-surface);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

.data-select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}

.data-select-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text-primary);
}

.modal-close-btn {
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.modal-close-btn:hover {
  background-color: var(--bg-input);
  color: var(--text-primary);
}

.data-select-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.data-select-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.data-option-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background-color: var(--bg-input);
}

.data-option-item:hover {
  border-color: var(--accent-color);
  background-color: rgba(64, 158, 255, 0.05);
}

.data-option-item input[type="checkbox"] {
  margin-right: 12px;
  cursor: pointer;
  width: 18px;
  height: 18px;
}

.data-option-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.data-option-icon {
  font-size: 20px;
}

.data-option-text {
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 500;
}

.data-select-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid var(--border-color);
}

/* 6. 浅色模式下的微调 */
[data-theme="light"] .tab-nav {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e4e7ed;
}

[data-theme="light"] .tab-link {
  color: #606266 !important;
}

[data-theme="light"] .tab-link:hover {
  background-color: #f2f6fc !important;
  color: var(--accent-color) !important;
}

[data-theme="light"] .tab-link.active {
  color: #fff !important;
}

/* =========================================
         [新增] 名片卡片 - 浅色模式适配 (黑白灰)
         ========================================= */

/* 1. 卡片容器变白 */
[data-theme="light"] .profile-card {
  background-color: #ffffff !important;
  /* 纯白背景 */
  border-color: #e5e6eb !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  /* 柔和阴影 */
  backdrop-filter: none !important;
}

/* 2. 文字颜色调整 */
[data-theme="light"] .profile-info .wechat-row {
  color: #333 !important;
}

[data-theme="light"] .profile-info .profile-tagline {
  color: #666 !important;
}

[data-theme="light"] .wechat-label {
  color: #000 !important;
  /* "AlworldX" 变黑 */
}

/* 3. 按钮颜色适配 (收起/展开) */
[data-theme="light"] #btn-retract-card,
[data-theme="light"] .toggle-bio-btn {
  color: #999 !important;
}

[data-theme="light"] #btn-retract-card:hover,
[data-theme="light"] .toggle-bio-btn:hover {
  color: #000 !important;
  background-color: #f0f0f0 !important;
}

/* 4. 简介区域适配 */
[data-theme="light"] .profile-bio {
  border-top-color: #f0f0f0 !important;
  color: #555 !important;
}

/* =========================================
         [新增] 动态配色适配 (跟随 settings.js 计算)
         ========================================= */

/* 1. 列表项悬停颜色 -> 使用 JS 计算的 20% 透明次色 */
.tree-item-label:hover,
.dropdown-menu button:hover,
.keyword-list li:hover {
  background-color: var(--bg-hover-transparent) !important;
  color: var(--text-primary);
  /* 确保文字高亮 */
  border-color: transparent;
  /* 移除可能的边框干扰 */
  transition: background-color 0.2s ease;
}

/* 浅色模式下菜单项悬停样式单独处理 */
[data-theme="light"] .settings-menu-item:hover {
  background-color: #ccc !important;
  color: #666 !important;
  border-color: #000 !important;
}

/* 非浅色模式下菜单项悬停样式 */
[data-theme]:not([data-theme="light"]) .settings-menu-item:hover {
  background-color: var(--bg-hover-transparent) !important;
  color: var(--text-primary);
  border-color: transparent;
  transition: background-color 0.2s ease;
}

/* 2. 确保下拉菜单和模态框使用动态背景变量 */
.dropdown-menu,
.modal-dialog,
.profile-card,
.prompt-display.editing {
  background-color: var(--bg-surface) !important;
  /* 增加一点模糊，增强玻璃感 */
  backdrop-filter: blur(10px);
}

/* 3. 输入框背景适配 */
input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {
  background-color: var(--bg-input) !important;
}

/* 4. 浅色模式下的特殊修正 (防止变黑) */
[data-theme="light"] .tree-item-label:hover {
  /* 浅色模式下悬停不用透明色，用浅灰更自然，或者保持 JS 设置的淡灰 */
  color: #000;
}

[data-theme="light"] .settings-menu-item:hover {
  /* 浅色模式下菜单项悬停：灰色背景，灰色文字 */
  background-color: #ccc !important;
  color: #666 !important;
  border-color: #000 !important;
}

/* =========================================
         [新增] 终极 UI 优化 (浅色黑白灰 / 弹窗 / 游戏)
         ========================================= */

/* 1. 浅色模式：顶部菜单与文字修复 (去蓝化) */
[data-theme="light"] .tab-nav {
  background-color: #ffffff !important;
  border-bottom: 1px solid #dcdfe6;
}

[data-theme="light"] .tab-link {
  color: #606266 !important;
}

[data-theme="light"] .tab-link.active {
  background-color: #333333 !important;
  /* 选中变黑 */
  color: #fff !important;
  border-color: #333333 !important;
}

/* 智能体侧边栏文字修复 */
[data-theme="light"] .tree-item-name {
  color: #333 !important;
}

[data-theme="light"] .tree-item-label:hover {
  color: #000 !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* 上面是 checkbox 的样式 */
[data-theme="light"] input[type="checkbox"] {
  accent-color: #000000 !important;
}

/* [新增] 浅色模式下，强制所有输入框和文本域文字变黑 */
[data-theme="light"] textarea,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] select {
  color: #000000 !important;
  /* 纯黑字体 */
  background-color: #ffffff !important;
  /* 纯白背景 */
  border: 1px solid #dcdfe6 !important;
}

/* 3. 弹窗按钮组：居中显示 + 间距 */
.modal-buttons {
  display: flex !important;
  justify-content: center !important;
  /* 居中 */
  gap: 30px !important;
  /* 按钮间距 */
  margin-top: 20px;
  padding-top: 20px;
}

/* 让保存/取消按钮保持默认大小，不要被拉伸 */
.modal-buttons button {
  min-width: 100px;
}

/* 4. 全局关闭按钮 (弹窗右上角)：红色 */
/* 覆盖所有关闭按钮样式 */
.close-btn,
#btn-close-tool,
.close-btn-overlay {
  color: #ff4d4f !important;
  /* 红色图标 */
  border-color: transparent !important;
  background: rgba(255, 77, 79, 0.1) !important;
  /* 浅红背景 */
}

.close-btn:hover,
#btn-close-tool:hover,
.close-btn-overlay:hover {
  background-color: #ff4d4f !important;
  /* 悬停深红背景 */
  color: #fff !important;
}

/* 5. 游戏弹窗控制按钮 (放大/关闭) - 可视性修复 */
#modal-game-runner .control-btn-overlay {
  background-color: rgba(0, 0, 0, 0.6) !important;
  /* 强制半透明黑底 */
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 浅色模式下也要能看清，所以强制深色底 */
[data-theme="light"] #modal-game-runner .control-btn-overlay {
  background-color: rgba(50, 50, 50, 0.8) !important;
  color: #fff !important;
}

/* 关闭按钮特殊样式 - 红色 */
#modal-game-runner .close-btn-overlay {
  background-color: rgba(255, 77, 79, 0.15) !important;
  color: #ff4d4f !important;
  border-color: rgba(255, 77, 79, 0.4) !important;
}

#modal-game-runner .close-btn-overlay:hover {
  background-color: #ff4d4f !important;
  border-color: #ff4d4f !important;
  color: #fff !important;
}

[data-theme="light"] #modal-game-runner .close-btn-overlay {
  background-color: rgba(255, 77, 79, 0.2) !important;
  color: #ff4d4f !important;
  border-color: rgba(255, 77, 79, 0.5) !important;
}

/* 6. 个性化风格：游戏菜单样式 (逻辑修正：默认深色，悬停发光) */
[data-theme="personal"] .game-card,
[data-theme="personal"] .tool-card {
  /* 默认：深色背景 (混合了主色的黑) */
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: none !important;
  transition: all 0.3s ease;
}

[data-theme="personal"] .game-card:hover,
[data-theme="personal"] .tool-card:hover {
  /* 悬停：半透明主色光晕 + 亮边框 */
  background-color: var(--accent-glow) !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
  transform: translateY(-5px);
}

/* =========================================
         [图文反馈修正] 浅色模式专属样式覆盖
         ========================================= */

/* 1. 顶部菜单：选中状态改为“纯黑底+白字”，去除立体光效 */
[data-theme="light"] .tab-link.active {
  background-color: #000000 !important;
  /* 纯黑平面底 */
  color: #ffffff !important;
  /* 白色文字 */
  border: 1px solid #000000 !important;
  box-shadow: none !important;
  /* 去除光晕立体感 */
  border-radius: 4px !important;
}

/* 2. Prompt 编辑按钮：文字颜色与边框颜色保持一致 */
[data-theme="light"] #btn-save-prompt {
  color: #67c23a !important;
  /* 绿色文字 */
  background: white !important;
}

[data-theme="light"] #btn-reset-prompt {
  color: #e6a23c !important;
  /* 橙色文字 */
  background: white !important;
}

[data-theme="light"] #btn-cancel-prompt {
  color: #999999 !important;
  /* 灰色文字 */
  background: white !important;
}

/* 3. 思考过程：淡灰底、黑字、黑边 */
[data-theme="light"] .thinking-process-container {
  background-color: #f2f2f2 !important;
  /* 淡淡的灰色背景 */
  border-left-color: #000000 !important;
  /* 左边条改为黑色 */
}

[data-theme="light"] .thinking-header {
  color: #000000 !important;
  /* 标题文字黑色 */
  background-color: transparent !important;
}

[data-theme="light"] .thinking-content {
  color: #333333 !important;
  /* 内容文字深灰/黑 */
  background-color: transparent !important;
}

[data-theme="light"] .thinking-toggle-icon {
  color: #000000 !important;
  /* 箭头黑色 */
}

/* 4. 侧边栏/列表：选中状态改为深色底 + 白色文字 */
[data-theme="light"] .tree-item.selected>.tree-item-label,
[data-theme="light"] .settings-menu-item.active {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}

/* =========================================
         [修复] 工具箱与游戏卡片 - 全局通用样式
         此段代码修复布局错乱、鼠标手势及动画效果
         ========================================= */

/* 1. 卡片基础布局：强制左右结构，支持自动换行 */
.tool-card,
.game-card {
  display: flex !important;
  flex-direction: row !important;
  /* 图标文字横向排列 */
  flex-wrap: wrap !important;
  /* 允许按钮换行到下一行 */
  align-items: center !important;
  /* 垂直居中 */
  cursor: pointer !important;
  /* 【需求】鼠标变成小手 */

  /* 外观基础设置 */
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 15px !important;
  gap: 15px !important;
  /* 图标与文字的间距 */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

/* 2. 悬停效果：卡片整体上浮 + 边框高亮 */
.tool-card:hover,
.game-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-color) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 3. 图标样式与【需求】动画 */
.tool-icon,
.game-icon {
  font-size: 2.8em !important;
  line-height: 1 !important;
  flex-shrink: 0;
  /* 禁止图标被压缩 */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* 弹性动画曲线 */
}

/* 【需求】鼠标放上去，图标会有小动画 (放大并微旋转) */
.tool-card:hover .tool-icon,
.game-card:hover .game-icon {
  transform: scale(1.2) rotate(-8deg);
}

/* 4. 文字信息区域 */
.tool-info,
.game-info {
  flex: 1;
  /* 占据剩余横向空间 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  /* 修复文字过长导致布局撑开的问题 */
}

.tool-info h4,
.game-info h4 {
  margin: 0 0 6px 0 !important;
  font-size: 16px !important;
  font-weight: bold;
  color: var(--text-primary);
}

.tool-info p,
.game-info p {
  margin: 0 !important;
  font-size: 12px !important;
  color: var(--text-secondary);
  opacity: 0.9;
  line-height: 1.4;
}

/* 5. 【需求】按钮样式及间距修复 */
.game-play-btn {
  /* 强制按钮占据新的一整行 */
  flex-basis: 100% !important;
  width: 100% !important;

  /* 【需求】按钮和上面的内容需要有10px的距离 */
  margin-top: 10px !important;

  padding: 6px 0 !important;
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 4px;
  text-align: center;
  transition: all 0.2s;
}

/* 按钮悬停效果 */
.game-card:hover .game-play-btn {
  background-color: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

/* 6. 浅色模式 (Light Mode) 专属颜色修复 */
[data-theme="light"] .tool-card,
[data-theme="light"] .game-card {
  background-color: #ffffff !important;
  border-color: #e4e7ed !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .tool-info h4,
[data-theme="light"] .game-info h4 {
  color: #303133 !important;
  /* 深灰近黑 */
}

[data-theme="light"] .tool-info p,
[data-theme="light"] .game-info p {
  color: #909399 !important;
  /* 浅灰 */
}

/* 确保网格布局在不同屏幕下的适应性 */
.tools-grid,
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,
      minmax(280px, 1fr));
  /* 最小宽度280px */
  gap: 20px;
  padding: 10px 0;
}

/* =================================================================
         [新增] 收起对话框功能样式
         ================================================================= */

/* [修改] 收起按钮 - 细条样式，显示在输入框顶部 */
.collapse-chat-btn {
  position: absolute;
  left: 43%;
  top: -5px;
  /* [修改] 向上移动5px，调整位置以适应新高度 */
  width: 40px;
  /* [修改] 默认窄宽度 */
  height: 15px;
  /* [修改] 增加高度到15px */
  border-radius: 8px;
  /* [修改] 稍微增大圆角以适应新高度 */
  background: var(--bg-surface);
  border: 1px solid var(--accent-color) !important;
  /* [修改] 添加蓝色边框 */
  cursor: pointer;
  /* [关键修改] 使用margin-left实现居中，这样宽度变化时会自动从中心扩展 */
  margin-left: -20px;
  /* 宽度的一半：40px / 2 = 20px */
  transition: all 0.3s ease;
  /* [修改] 使用all transition，包括width和margin的变化 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000 !important;
  /* [修复] 提高 z-index，确保可以点击 */
  padding: 0;
  pointer-events: auto !important;
  /* [修复] 确保可以点击 */
}

/* 细条中间的实心小箭头 */
.collapse-chat-btn span {
  font-size: 14px;
  /* [修改] 稍微增大箭头以适应新高度 */
  color: var(--text-secondary);
  transition: color 0.3s ease;
  line-height: 1;
}

.collapse-chat-btn:hover {
  width: 120px;
  /* [修改] 悬停时变宽 */
  margin-left: -60px;
  /* [关键] 悬停时调整margin，保持居中：120px / 2 = 60px */
  background: var(--accent-color);
  border: 1px solid var(--accent-color) !important;
  /* [修改] 悬停时保持蓝色边框 */
}

.collapse-chat-btn:hover span {
  color: white;
}

/* 收起后的图标 - 70px圆形，显示在页面底部 */
.collapsed-chat-icon {
  position: fixed;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 70px;
  border-radius: 50% !important;
  /* [修复] 改为圆形 */
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s;
  border: none !important;
  /* [修复] 去掉所有边框 */
  overflow: hidden;
  /* [修复] 确保内容不超出圆形边界 */
}

.collapsed-chat-icon:hover {
  transform: translateX(-50%) scale(1.1);
}

/* 发光圆圈动画 */
.collapsed-chat-icon .glow-circle {
  fill: transparent;
  stroke: rgba(0, 191, 255, 0.6);
  stroke-width: 2;
  animation: glowPulse 2.5s ease-in-out infinite;
}

@keyframes glowPulse {

  0%,
  100% {
    stroke-width: 2;
    opacity: 0.6;
    r: 42;
  }

  50% {
    stroke-width: 3;
    opacity: 1;
    r: 44;
  }
}

/* 粒子动画 */
.collapsed-chat-icon .particle {
  fill: rgba(0, 191, 255, 0.8);
  animation: particleTwinkle 2s ease-in-out infinite;
}

.collapsed-chat-icon .particle.p1 {
  animation-delay: 0s;
}

.collapsed-chat-icon .particle.p2 {
  animation-delay: 0.3s;
}

.collapsed-chat-icon .particle.p3 {
  animation-delay: 0.6s;
}

.collapsed-chat-icon .particle.p4 {
  animation-delay: 0.9s;
}

.collapsed-chat-icon .particle.p5 {
  animation-delay: 1.2s;
}

.collapsed-chat-icon .particle.p6 {
  animation-delay: 1.5s;
}

@keyframes particleTwinkle {

  0%,
  100% {
    opacity: 0.3;
    r: 1.5;
  }

  50% {
    opacity: 1;
    r: 2.5;
  }
}

/* [新增] 智能体集群模式下收起图标的橙色样式 */
body.group-mode-active .collapsed-chat-icon,
.group-mode-active .collapsed-chat-icon {
  border: none !important;
  /* [修复] 去掉边框 */
  border-radius: 50% !important;
  /* [修复] 确保是圆形 */
  box-shadow: 0 0 20px rgba(230, 162, 60, 0.5) !important;
  animation: orangeIconPulse 2s ease-in-out infinite;
  overflow: hidden !important;
  /* [修复] 确保内容不超出圆形边界 */
}

body.group-mode-active .collapsed-chat-icon .glow-circle,
.group-mode-active .collapsed-chat-icon .glow-circle {
  stroke: rgba(230, 162, 60, 0.8) !important;
  animation: orangeGlowPulse 2.5s ease-in-out infinite;
}

body.group-mode-active .collapsed-chat-icon .particle,
.group-mode-active .collapsed-chat-icon .particle {
  fill: rgba(230, 162, 60, 0.9) !important;
  animation: orangeParticleTwinkle 2s ease-in-out infinite;
}

body.group-mode-active .collapsed-chat-icon circle[fill="#00bfff"],
.group-mode-active .collapsed-chat-icon circle[fill="#00bfff"] {
  fill: #e6a23c !important;
}

@keyframes orangeIconPulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(230, 162, 60, 0.5);
    transform: translateX(-50%) scale(1);
  }

  50% {
    box-shadow: 0 0 30px rgba(230, 162, 60, 0.8);
    transform: translateX(-50%) scale(1.05);
  }
}

@keyframes orangeGlowPulse {

  0%,
  100% {
    stroke-width: 2;
    opacity: 0.6;
    r: 42;
  }

  50% {
    stroke-width: 3;
    opacity: 1;
    r: 44;
  }
}

@keyframes orangeParticleTwinkle {

  0%,
  100% {
    opacity: 0.4;
    r: 1.5;
  }

  50% {
    opacity: 1;
    r: 2.5;
  }
}

/* [修改] 只收起输入框区域，保留对话内容显示 */
.input-area.collapsed {
  display: none !important;
}

/* 输入框区域需要相对定位，为收起按钮提供参照 */
.input-area {
  position: relative;
}

/* attach-btn需要相对定位，为收起按钮提供参照 */
.attach-btn {
  position: relative;
  display: inline-block;
}

/* =================================================================
         [新增] API配置图标按钮样式
         ================================================================= */

.icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0;
  flex-shrink: 0;
}

.icon-btn:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
  transform: scale(1.05);
}

.icon-btn:active {
  transform: scale(0.95);
}

/* API Key输入框容器，为按钮留出空间 */
#cfg-apikey {
  padding-right: 45px !important;
}

/* =================================================================
         [新增] Gemini Balance 管理界面样式
         ================================================================= */
.gemini-balance-admin {
  width: 100%;
  min-height: 600px;
  color: var(--text-primary);
}

.admin-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.admin-tabs .tab-btn {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-tabs .tab-btn:hover {
  border-color: var(--accent-color);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.admin-tabs .tab-btn.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
}

.admin-content {
  margin-top: 20px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  color: var(--text-primary);
}

.keys-section,
.config-section,
.logs-section {
  padding: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.keys-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.keys-tab-btn {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.keys-tab-btn.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
}

.keys-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.key-item {
  padding: 15px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.key-item-content {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 1;
}

.key-text {
  flex: 1;
  font-family: monospace;
  color: var(--text-primary);
}

.key-fail-count {
  color: var(--text-secondary);
  font-size: 14px;
}

.key-actions {
  display: flex;
  gap: 8px;
}

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}

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

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-danger {
  background: #f56c6c;
  color: #ffffff;
}

.btn-danger:hover {
  background: #f78989;
}

.config-editor {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.config-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.config-item label {
  min-width: 200px;
  color: var(--text-primary);
  font-weight: 500;
}

.config-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
}

.stats-panel {
  padding: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.stat-card {
  padding: 20px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.stat-card h3 {
  margin: 0 0 10px 0;
  color: var(--text-primary);
}

.error-logs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.error-log-item {
  padding: 15px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.log-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.log-time {
  color: var(--text-secondary);
  font-size: 14px;
}

.log-error-code {
  padding: 2px 8px;
  background: #f56c6c;
  color: #ffffff;
  border-radius: 4px;
  font-size: 12px;
}

.log-content {
  color: var(--text-primary);
}

.log-key {
  font-family: monospace;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.log-error {
  color: var(--text-primary);
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
  margin: 0;
  color: var(--text-primary);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: 20px;
}

.modal-body textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: monospace;
  resize: vertical;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid var(--border-color);
}

.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  display: none;
}

.notification.success {
  border-color: #67c23a;
  background: rgba(103, 194, 58, 0.1);
}

.notification.error {
  border-color: #f56c6c;
  background: rgba(245, 108, 108, 0.1);
}

/* 浅色模式适配 */
[data-theme="light"] .gemini-balance-admin {
  color: var(--text-primary);
}

[data-theme="light"] .keys-section,
[data-theme="light"] .config-section,
[data-theme="light"] .logs-section,
[data-theme="light"] .stats-panel {
  background: var(--bg-surface);
  border-color: var(--border-color);
}

[data-theme="light"] .key-item,
[data-theme="light"] .error-log-item {
  background: var(--bg-input);
  border-color: var(--border-color);
}

/* 正方形小图标按钮样式 */
.icon-btn-square {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  padding: 0;
  flex-shrink: 0;
}

.icon-btn-square:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
}

.icon-btn-square:active {
  transform: scale(0.95);
}

/* [新增] 为刷新按钮添加旋转动画 - 只旋转图标 */
#btn-refresh-model-data {
  position: relative;
  overflow: visible;
}

#btn-refresh-model-data .refresh-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

#btn-refresh-model-data:hover .refresh-icon {
  animation: rotateIcon 0.6s linear infinite;
}

/* 图标旋转动画 */
@keyframes rotateIcon {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* =================================================================
         [新增] API平台状态指示灯样式
         ================================================================= */

.status-light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  flex-shrink: 0;
}

.status-light.status-gray {
  background-color: #6c757d;
  box-shadow: 0 0 4px rgba(108, 117, 125, 0.5);
}

.status-light.status-green {
  background-color: #67c23a;
  box-shadow: 0 0 8px rgba(103, 194, 58, 0.8);
  animation: pulseGreen 2s ease-in-out infinite;
}

.status-light.status-red {
  background-color: #ff4d4f;
  box-shadow: 0 0 8px rgba(255, 77, 79, 0.8);
  animation: pulseRed 2s ease-in-out infinite;
}

@keyframes pulseGreen {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

@keyframes pulseRed {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

/* 美化"启用真实API"样式 */
.real-api-toggle-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  border-radius: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.3s;
}

.real-api-toggle-wrapper:hover {
  border-color: var(--accent-color);
  background: rgba(64, 158, 255, 0.1);
}

.real-api-toggle-wrapper.enabled {
  background: #67c23a;
  /* 背景色和边框颜色一致 */
  border-color: #67c23a;
}

.real-api-toggle-wrapper.enabled label {
  color: #ffffff !important;
  /* 开启状态时文字为白色，确保在绿色背景上清晰可见 */
}

.real-api-toggle-wrapper.enabled .robot-icon-svg {
  color: #ffffff !important;
  /* 开启状态时图标为白色，确保在绿色背景上清晰可见 */
}

.real-api-toggle-wrapper.enabled:hover {
  background: #67c23a;
  /* 悬停时保持一致的背景色 */
}

.robot-icon-svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* =================================================================
         [新增] API网址列表样式
         ================================================================= */

.api-url-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.2s;
  gap: 15px;
}

.api-url-item:hover {
  border-color: var(--accent-color);
  background: rgba(64, 158, 255, 0.05);
}

.api-url-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}

.api-url-name {
  flex: 0 0 150px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.api-url-address {
  flex: 1;
  color: var(--accent-color);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

.api-url-address:hover {
  text-decoration: underline;
  color: var(--accent-hover);
}

.btn-delete-url {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 0;
}

.btn-delete-url:hover {
  background: var(--danger-color);
  border-color: var(--danger-color);
  color: white;
}

/* =================================================================
         [最终修复] 强制控制真实API开关颜色 (使用 ID 选择器)
         ================================================================= */

/* 1. 默认状态：灰色背景 */
#toggle-switch-visual {
  position: relative;
  width: 54px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(108, 117, 125, 0.38), rgba(108, 117, 125, 0.26)) !important;
  border: 1px solid var(--border-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  cursor: pointer;
  flex-shrink: 0;
}

/* 2. 启用状态：绿色背景 (当JS添加了 .enabled 类时) */
#toggle-switch-visual.enabled {
  background-color: var(--accent-color, #409EFF) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  border-color: var(--accent-color, #409EFF);
  box-shadow: 0 8px 22px rgba(64, 158, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* 3. 圆点样式 (绝对定位) */
#toggle-switch-visual::before {
  content: "启用";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.95);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

#toggle-switch-visual.enabled::before {
  opacity: 1;
}

#toggle-switch-visual::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #f2f4f8);
  transition: transform 0.28s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.25s ease, background 0.25s ease;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* 4. 圆点移动 (启用状态) */
#toggle-switch-visual.enabled::after {
  transform: translateX(26px);
}

/* 5. 悬停效果 */
.real-api-toggle-wrapper:hover #toggle-switch-visual {
  opacity: 0.9;
}

/* =================================================================
         [新增] 拆单菜单样式 - 深色主题，无边框按钮
         ================================================================= */

/* 拆单菜单容器 */
.chat-add-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  background: #0E1014 !important;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  min-width: 200px;
  z-index: 1000;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
}

/* 拆单菜单项 - 无边框按钮（高优先级，覆盖全局button样式） */
button.chat-add-item,
.chat-add-item {
  background: transparent !important;
  border: none !important;
  color: #e6e6e6 !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  cursor: pointer;
  text-align: left;
  font-size: 14px !important;
  transition: background-color 0.2s ease !important;
  width: 100%;
  box-shadow: none !important;
  margin: 0 !important;
}

/* 悬停效果 */
button.chat-add-item:hover,
.chat-add-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

/* 激活状态 */
button.chat-add-item:active,
.chat-add-item:active {
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  box-shadow: none !important;
}

/* 确保没有边框和阴影 */
button.chat-add-item:focus,
button.chat-add-item:focus-visible,
.chat-add-item:focus,
.chat-add-item:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

管理中心 账号中心 一键发布 互动管理

/* =========================================
         [新增] 智能体菜单样式
         ========================================= */
.agent-menu-item:hover {
  background-color: var(--bg-surface) !important;
}

.project-category-btn:hover {
  background-color: var(--bg-input) !important;
  border-color: var(--accent-color) !important;
}

.project-category-btn.selected {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}

#create-project-submit-btn:hover {
  background-color: var(--accent-color) !important;
  color: #fff !important;
  border-color: var(--accent-color) !important;
}

/* =================================================================
   API配置页面样式优化
   ================================================================= */

/* 1. API面板头部：标题和启用开关在同一�?*/
.api-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.api-form-group .input-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.api-form-group .input-with-icon input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.api-form-group .input-with-icon .icon-btn {
  flex: 0 0 auto;
}

.api-test-row {
  display: flex;
  justify-content: center;
  margin: 15px 0;
}

.api-test-row .primary-button,
.api-test-row .secondary-button {
  width: 50%;
  max-width: 520px;
  height: 26px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.api-config-panel button.primary-button,
.api-config-panel button.secondary-button {
  height: 40px;
  min-height: 40px;
  line-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  justify-content: center;
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}

.api-config-panel button.primary-button:hover,
.api-config-panel button.secondary-button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.api-config-panel button.primary-button:disabled,
.api-config-panel button.secondary-button:disabled {
  opacity: 0.6;
}

.model-detect-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
}

.model-detect-actions .secondary-button {
  height: 26px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.api-panel-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.api-enable-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toggle-label {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.apimart-tabs {
  display: flex;
  gap: 8px;
  margin: 10px 0 14px;
}

.apimart-tab {
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.apimart-tab.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}

.apimart-tab-content {
  display: none;
}

.apimart-tab-content.active {
  display: block;
}

/* 2. 模型开关网格：每个模型一个小模块 */
.model-toggles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  align-content: start;
  overflow-y: auto;
  grid-auto-rows: 56px;
  max-height: calc((56px * 5) + (10px * 4) + (10px * 2));
}

.model-toggle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s ease;
  gap: 12px;
  height: 56px;
}

@media (max-width: 1200px) {
  .model-toggles-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 760px) {
  .model-toggles-grid {
    grid-template-columns: 1fr;
  }
}

.model-toggle-item:hover {
  border-color: var(--accent-color);
  background: rgba(64, 158, 255, 0.05);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.model-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.model-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-status-reason {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
}

.model-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.latency-text {
  font-size: 11px;
  color: var(--text-secondary);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.status-icon-error,
.status-icon-warning {
  font-size: 14px;
  display: inline-block;
}

.loading-spinner-tiny {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.delete-model-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.2s ease;
  opacity: 0.6;
}

.delete-model-btn:hover {
  color: #f56c6c;
  opacity: 1;
  background: rgba(245, 108, 108, 0.1);
}

/* 3. 手动输入模型区域：输入框和按钮在同一�?*/
.model-custom-add {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.model-add-row .input-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.model-add-row .input-group .api-input {
  flex: 1;
  margin: 0;
}

.model-add-row .input-group .secondary-button {
  flex-shrink: 0;
  white-space: nowrap;
}

/* 4. 网址导航样式优化 */
.url-add-row {
  margin: 10px 0;
  padding: 12px;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.1), rgba(64, 158, 255, 0.05));
  border: 1px solid rgba(64, 158, 255, 0.3);
  border-radius: 8px;
}

.url-add-row .input-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.url-add-row .input-group .api-input {
  flex: 1;
  margin: 0;
}

.url-add-row .input-group .primary-button {
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

.url-add-row .input-group .primary-button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 0 12px rgba(64, 158, 255, 0.4);
}

.url-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.url-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.url-card:hover {
  border-color: var(--accent-color);
  background: rgba(64, 158, 255, 0.05);
  transform: translateX(2px);
}

.url-card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
}

.url-card-link {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.url-card-link:hover {
  color: var(--accent-color);
}

.url-card .delete-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
  opacity: 0.6;
  flex-shrink: 0;
}

.url-card .delete-btn:hover {
  color: #f56c6c;
  opacity: 1;
  background: rgba(245, 108, 108, 0.1);
}

/* 小尺寸开�?*/
.switch-toggle.small {
  width: 36px;
  height: 18px;
}

.switch-toggle.small .slider::after {
  display: none;
}

.switch-toggle.small .slider:before {
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
}

.switch-toggle.small input:checked+.slider:before {
  transform: translateX(18px);
}

/* Notice Pane Styles */
.notice-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.notice-toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.notice-filters {
  display: flex;
  gap: 10px;
}

.notice-actions {
  display: flex;
  gap: 10px;
}

.notice-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notice-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 15px;
  cursor: pointer;
  transition: all 0.2s;
}

.notice-item:hover {
  border-color: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.notice-item.unread {
  border-left: 3px solid var(--accent-color);
}

.notice-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notice-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: transparent;
}

.notice-item.unread .notice-dot {
  background-color: var(--danger-color);
}

.notice-title {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
}

.notice-time {
  font-size: 12px;
  color: var(--text-secondary);
}

.notice-content {
  line-height: 1.6;
}

[data-theme="light"] body {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;
}

[data-theme="light"] .tab-nav {
  background-color: #000000 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .tab-link {
  background-color: #ffffff !important;
  border: 1px solid var(--border-color) !important;
  color: #000000 !important;
}

[data-theme="light"] .tab-link:hover {
  background-color: #f2f2f2 !important;
  border-color: #000000 !important;
  color: #000000 !important;
}

[data-theme="light"] .tab-link.active {
  background-color: #ffffff !important;
  border-color: #000000 !important;
  color: #000000 !important;
}

[data-theme="light"] .tab-link:hover *,
[data-theme="light"] .tab-link:hover svg,
[data-theme="light"] .tab-link:hover i,
[data-theme="light"] .tab-link.active *,
[data-theme="light"] .tab-link.active svg,
[data-theme="light"] .tab-link.active i {
  color: #000000 !important;
  fill: #000000 !important;
}

[data-theme="light"] .settings-menu {
  background-color: #000000 !important;
}

[data-theme="light"] .settings-menu-item {
  background-color: #ffffff !important;
  border-color: var(--border-color) !important;
  color: #000000 !important;
}

[data-theme="light"] .settings-menu-item:hover {
  background-color: #f2f2f2 !important;
  border-color: #000000 !important;
  color: #000000 !important;
}

[data-theme="light"] .settings-menu-item.active {
  background-color: #ffffff !important;
  border-color: #000000 !important;
  color: #000000 !important;
}

[data-theme="light"] input[type="text"]:focus,
[data-theme="light"] input[type="password"]:focus,
[data-theme="light"] input[type="number"]:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: #000000 !important;
  box-shadow: none !important;
  outline: none !important;
}