/* ========== 粤小辉共享样式 v3 - 多主题系统 ========== */

/* =============================================
   主题变量：每个主题包含 浅色/深色 两套变量
   通过 data-theme 属性 + .dark-mode 类切换
   ============================================= */

/* ---- 默认系统: 无 data-theme 或 ="default" 均使用 Azure蓝 ---- */
:root,
[data-theme="default"],
[data-theme="azure"] {
  --primary: #1565C0;
  --primary-dark: #0D47A1;
  --primary-light: #42A5F5;
  --gradient-1: #1565C0;
  --gradient-2: #1976D2;
  --accent: #FF6F00;
  --accent-light: #FFB300;
  --bg: #eef1f7;
  --card: #ffffff;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --bot-bg: #ffffff;
  --text-primary: #333333;
  --text-secondary: #666666;
  --chat-bg: #f5f7fa;
  --border-color: #e8e8e8;
  --scrollbar-thumb: #c0c4cc;
  --input-bg: #f5f7fa;
  --code-bg: #f0f2f5;
  --header-gradient: linear-gradient(135deg, #1565C0, #1976D2);
  --header-text: #ffffff;
  --header-btn-bg: rgba(255,255,255,0.15);
}
:root.dark-mode,
[data-theme="default"].dark-mode,
[data-theme="azure"].dark-mode {
  --primary: #5C9CE6;
  --primary-dark: #3A7BD5;
  --primary-light: #7BB3F0;
  --gradient-1: #1a1a2e;
  --gradient-2: #16213e;
  --accent: #FFB300;
  --accent-light: #FFD54F;
  --bg: #0f0f1a;
  --card: #1a1a2e;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --bot-bg: #16213e;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --chat-bg: #12121e;
  --border-color: #2a2a3e;
  --scrollbar-thumb: #3a3a5e;
  --input-bg: #1e1e32;
  --code-bg: #1a1a2e;
  --header-gradient: linear-gradient(135deg, #1a1a2e, #16213e);
  --header-text: #e0e0e0;
  --header-btn-bg: rgba(255,255,255,0.1);
}

/* ---- 主题: Forest 森林绿 ---- */
[data-theme="forest"] {
  --primary: #2E7D32;
  --primary-dark: #1B5E20;
  --primary-light: #66BB6A;
  --gradient-1: #2E7D32;
  --gradient-2: #43A047;
  --accent: #E65100;
  --accent-light: #FF9800;
  --bg: #e8f5e9;
  --card: #ffffff;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --bot-bg: #ffffff;
  --text-primary: #333333;
  --text-secondary: #5a7a5a;
  --chat-bg: #f0faf0;
  --border-color: #c8e6c9;
  --scrollbar-thumb: #a5d6a7;
  --input-bg: #f0faf0;
  --code-bg: #e8f5e9;
  --header-gradient: linear-gradient(135deg, #2E7D32, #43A047);
  --header-text: #ffffff;
  --header-btn-bg: rgba(255,255,255,0.15);
}
[data-theme="forest"].dark-mode {
  --primary: #66BB6A;
  --primary-dark: #43A047;
  --primary-light: #81C784;
  --gradient-1: #1a2e1a;
  --gradient-2: #1a381a;
  --accent: #FF9800;
  --accent-light: #FFC107;
  --bg: #0a1a0a;
  --card: #142814;
  --shadow: 0 4px 24px rgba(0,0,0,0.35);
  --bot-bg: #1a381a;
  --text-primary: #c8e6c9;
  --text-secondary: #81C784;
  --chat-bg: #0e200e;
  --border-color: #2a4a2a;
  --scrollbar-thumb: #3a5a3a;
  --input-bg: #1a3a1a;
  --code-bg: #142814;
  --header-gradient: linear-gradient(135deg, #1a2e1a, #1a381a);
  --header-text: #c8e6c9;
  --header-btn-bg: rgba(255,255,255,0.1);
}

/* ---- 主题: Sunset 暖阳橙 ---- */
[data-theme="sunset"] {
  --primary: #E65100;
  --primary-dark: #BF360C;
  --primary-light: #FB8C00;
  --gradient-1: #E65100;
  --gradient-2: #EF6C00;
  --accent: #1565C0;
  --accent-light: #42A5F5;
  --bg: #fef3e8;
  --card: #ffffff;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --bot-bg: #ffffff;
  --text-primary: #333333;
  --text-secondary: #7a6a5a;
  --chat-bg: #fff8f0;
  --border-color: #ffe0b2;
  --scrollbar-thumb: #ffcc80;
  --input-bg: #fff8f0;
  --code-bg: #fef3e8;
  --header-gradient: linear-gradient(135deg, #E65100, #EF6C00);
  --header-text: #ffffff;
  --header-btn-bg: rgba(255,255,255,0.15);
}
[data-theme="sunset"].dark-mode {
  --primary: #FB8C00;
  --primary-dark: #E65100;
  --primary-light: #FFB74D;
  --gradient-1: #2e1a0f;
  --gradient-2: #3a1a0a;
  --accent: #42A5F5;
  --accent-light: #90CAF9;
  --bg: #1a0f0a;
  --card: #2e1a0f;
  --shadow: 0 4px 24px rgba(0,0,0,0.35);
  --bot-bg: #3a2215;
  --text-primary: #ffe0b2;
  --text-secondary: #ffb74d;
  --chat-bg: #20150e;
  --border-color: #4a2a1a;
  --scrollbar-thumb: #5a3a2a;
  --input-bg: #3a2215;
  --code-bg: #2e1a0f;
  --header-gradient: linear-gradient(135deg, #2e1a0f, #3a1a0a);
  --header-text: #ffe0b2;
  --header-btn-bg: rgba(255,255,255,0.1);
}

/* ---- 主题: Lavender 薰衣草紫 ---- */
[data-theme="lavender"] {
  --primary: #6A1B9A;
  --primary-dark: #4A148C;
  --primary-light: #AB47BC;
  --gradient-1: #6A1B9A;
  --gradient-2: #7B1FA2;
  --accent: #FF6F00;
  --accent-light: #FFB300;
  --bg: #f3e8f5;
  --card: #ffffff;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --bot-bg: #ffffff;
  --text-primary: #333333;
  --text-secondary: #7a5a7a;
  --chat-bg: #faf0fc;
  --border-color: #e1bee7;
  --scrollbar-thumb: #ce93d8;
  --input-bg: #faf0fc;
  --code-bg: #f3e8f5;
  --header-gradient: linear-gradient(135deg, #6A1B9A, #7B1FA2);
  --header-text: #ffffff;
  --header-btn-bg: rgba(255,255,255,0.15);
}
[data-theme="lavender"].dark-mode {
  --primary: #AB47BC;
  --primary-dark: #7B1FA2;
  --primary-light: #CE93D8;
  --gradient-1: #1a0f2e;
  --gradient-2: #2e0f3a;
  --accent: #FFB300;
  --accent-light: #FFD54F;
  --bg: #0f0a1a;
  --card: #1a0f2e;
  --shadow: 0 4px 24px rgba(0,0,0,0.35);
  --bot-bg: #2e1a3a;
  --text-primary: #e1bee7;
  --text-secondary: #AB47BC;
  --chat-bg: #140e20;
  --border-color: #3a1a4a;
  --scrollbar-thumb: #4a2a5a;
  --input-bg: #2a1a3a;
  --code-bg: #1a0f2e;
  --header-gradient: linear-gradient(135deg, #1a0f2e, #2e0f3a);
  --header-text: #e1bee7;
  --header-btn-bg: rgba(255,255,255,0.1);
}

/* ---- 主题: Slate 石板灰（简约商务） ---- */
[data-theme="slate"] {
  --primary: #37474F;
  --primary-dark: #263238;
  --primary-light: #607D8B;
  --gradient-1: #37474F;
  --gradient-2: #455A64;
  --accent: #FF6F00;
  --accent-light: #FFB300;
  --bg: #eceff1;
  --card: #ffffff;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --bot-bg: #ffffff;
  --text-primary: #333333;
  --text-secondary: #607D8B;
  --chat-bg: #f2f4f5;
  --border-color: #cfd8dc;
  --scrollbar-thumb: #b0bec5;
  --input-bg: #f2f4f5;
  --code-bg: #eceff1;
  --header-gradient: linear-gradient(135deg, #37474F, #455A64);
  --header-text: #ffffff;
  --header-btn-bg: rgba(255,255,255,0.15);
}
[data-theme="slate"].dark-mode {
  --primary: #78909C;
  --primary-dark: #546E7A;
  --primary-light: #90A4AE;
  --gradient-1: #1a1a1a;
  --gradient-2: #1e1e1e;
  --accent: #FFB300;
  --accent-light: #FFD54F;
  --bg: #0f0f0f;
  --card: #1a1a1a;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --bot-bg: #2a2a2a;
  --text-primary: #cfd8dc;
  --text-secondary: #90A4AE;
  --chat-bg: #121212;
  --border-color: #333;
  --scrollbar-thumb: #444;
  --input-bg: #2a2a2a;
  --code-bg: #1a1a1a;
  --header-gradient: linear-gradient(135deg, #1a1a1a, #1e1e1e);
  --header-text: #cfd8dc;
  --header-btn-bg: rgba(255,255,255,0.1);
}

/* 系统浅色模式跟随（无手动设置时） */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    /* 使用对应的深色变量（通过 default 主题的深色变量 + 其他主题各自规则） */
  }
}

/* =============================================
   通用深色模式样式覆盖（适用于所有主题）
   ============================================= */
:root.dark-mode body {
  background: var(--bg) !important;
  color: var(--text-primary) !important;
}
:root.dark-mode .app,
:root.dark-mode .container,
:root.dark-mode .panel,
:root.dark-mode .card,
:root.dark-mode .page {
  background: var(--card) !important;
  border-color: var(--border-color) !important;
}
:root.dark-mode .header {
  background: var(--header-gradient) !important;
}
:root.dark-mode .header h1,
:root.dark-mode .header .subtitle,
:root.dark-mode .header a,
:root.dark-mode .header .info {
  color: var(--header-text) !important;
}
:root.dark-mode .header a,
:root.dark-mode .header button {
  background: var(--header-btn-bg) !important;
}
:root.dark-mode input,
:root.dark-mode textarea,
:root.dark-mode select {
  background: var(--input-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
:root.dark-mode input::placeholder,
:root.dark-mode textarea::placeholder {
  color: var(--text-secondary) !important;
}
:root.dark-mode button:not(.send-btn):not(.action-btn) {
  background: var(--input-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
:root.dark-mode table {
  background: var(--card) !important;
  color: var(--text-primary) !important;
}
:root.dark-mode table th {
  background: var(--input-bg) !important;
  border-color: var(--border-color) !important;
}
:root.dark-mode table td {
  border-color: var(--border-color) !important;
}
:root.dark-mode .status-bar {
  background: var(--card) !important;
  border-top-color: var(--border-color) !important;
}
:root.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) !important;
}
:root.dark-mode .toast {
  background: rgba(0,0,0,0.85) !important;
}
:root.dark-mode a {
  color: var(--primary-light) !important;
}
:root.dark-mode h1, :root.dark-mode h2, :root.dark-mode h3,
:root.dark-mode .title, :root.dark-mode .label {
  color: var(--text-primary) !important;
}
:root.dark-mode .badge, :root.dark-mode .tag, :root.dark-mode .chip {
  background: var(--input-bg) !important;
  color: var(--text-secondary) !important;
}

/* Toast 提示（共享样式） */
.toast {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.8); color: white;
  padding: 10px 22px; border-radius: 14px;
  font-size: 14px; z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  pointer-events: none;
  white-space: nowrap;
  max-width: 90vw;
  transition: opacity 0.3s ease, transform 0.3s ease;
  animation: toastIn 0.3s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
:root.dark-mode .toast {
  background: rgba(30,30,50,0.95) !important;
}

/* =============================================
   主题选择器 UI
   ============================================= */

/* 主题按钮（在header中显示） */
.theme-btn {
  position: relative;
  background: var(--header-btn-bg) !important;
  backdrop-filter: blur(4px);
  border: none !important;
  border-radius: 10px !important;
  color: var(--header-text) !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
}

.theme-btn .color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
}

/* 主题下拉面板 */
.theme-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  z-index: 9999;
  min-width: 170px;
  animation: panelIn 0.2s ease;
}
.theme-panel.open {
  display: block;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 13px;
  color: var(--text-primary);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.theme-option:hover {
  background: var(--input-bg);
}
.theme-option.active {
  background: var(--input-bg);
  font-weight: 600;
}
.theme-option .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--border-color);
}
.theme-option.active .dot {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}
.theme-option .mode-icon {
  margin-left: auto;
  font-size: 12px;
  opacity: 0.5;
}

/* 分隔线 */
.theme-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 8px;
}

/* Header wrapper for theme button positioning */
.theme-btn-wrapper {
  position: relative;
  display: inline-flex;
}

/* 皮肤预览小图（主题选择器内） */
.theme-preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.theme-preview .bar {
  width: 20px;
  height: 6px;
  border-radius: 3px;
}

/* =============================================
   深色切换按钮（兼容旧版）
   ============================================= */
.dark-toggle {
  background: var(--header-btn-bg) !important;
  backdrop-filter: blur(4px);
  border: none !important;
  border-radius: 10px !important;
  color: var(--header-text) !important;
  padding: 4px 10px !important;
  font-size: 14px !important;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* =============================================
   æ导è§åï¼æ£å¼é£æ ¼ï¼
   ============================================= */
.nav-btn {
  background: var(--header-btn-bg) !important;
  backdrop-filter: blur(4px);
  border: none !important;
  border-radius: 8px !important;
  color: var(--header-text) !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.nav-btn:hover {
  background: rgba(255,255,255,0.25) !important;
  transform: translateY(-1px);
}
.nav-btn:active {
  transform: translateY(0);
}
.nav-btn svg {
  vertical-align: middle;
  flex-shrink: 0;
}
.nav-btn-highlight {
  background: rgba(255,255,255,0.2) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  font-weight: 600 !important;
}