/* ============================================================
   AICEO 品牌 VI 主题层 — AI Command Center（公网 · 浅色版）v1.0
   依据：《AICEO品牌VI升级正式版建议报告》V1.0（2026年7月）
   核心三角：深夜蓝 #0D1B2A × 帝王金 #C9A227 × 墨玉绿 #1A4A35
   浅色模式规范：纯白/象牙白背景 + 深夜蓝正文 + 皇家蓝主交互 + 帝王金点缀
   加载位置：production_ui_lock_v1.css 之后（最后一个样式表）
   原则：纯 CSS 覆盖，不改 DOM、不改 JS、不动版本自检机制
   ============================================================ */

/* ---------- 0. 品牌字体（VI 3.3：Cinzel + Inter + 思源宋/黑体） ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Inter:wght@300;400;600;700&family=Noto+Serif+SC:wght@700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

/* ---------- 1. 设计令牌（浅色语义） ---------- */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  /* VI 原始色板 */
  --aiceo-night-blue: #0D1B2A;
  --aiceo-deep-navy:  #1B3A5C;
  --aiceo-royal-blue: #2C5F8A;
  --aiceo-sky-blue:   #4A8BB5;
  --aiceo-imperial-gold: #C9A227;
  --aiceo-light-gold: #E8D5A3;
  --aiceo-ivory:      #F5EDD4;
  --aiceo-dark-gold:  #8B6914;
  --aiceo-jade-green: #1A4A35;
  --aiceo-forest-green: #2E7D52;
  --aiceo-mist-blue:  #8FA8C0;

  /* 浅色模式派生 */
  --vi-bg:           #FDFCF9;              /* 纯白偏暖，呼应象牙白纸感 */
  --vi-bg-soft:      #F8F5EC;              /* 象牙白弱化层 */
  --vi-panel-muted:  #F3EFE3;
  --vi-border:       #E3DFD2;              /* 暖灰描边 */
  --vi-border-strong:#CFC9B8;
  --vi-text:         #0D1B2A;              /* 正文 = 深夜蓝（VI 3.5） */
  --vi-text-soft:    #2E4258;
  --vi-muted:        #5E7186;              /* 雾蓝灰加深，保证浅底可读性 */
  --vi-shadow:       0 12px 32px rgba(13, 27, 42, 0.08);
  --vi-gold-line:    linear-gradient(90deg, transparent, rgba(201, 162, 39, .55), transparent);

  /* 覆盖锁定层令牌（同名同优先级，后加载者胜） */
  --bg: var(--vi-bg) !important;
  --bg-soft: var(--vi-bg-soft) !important;
  --panel: #FFFFFF !important;
  --panel-elevated: #FFFFFF !important;
  --panel-muted: var(--vi-panel-muted) !important;
  --border: var(--vi-border) !important;
  --border-strong: var(--vi-border-strong) !important;
  --text: var(--vi-text) !important;
  --text-soft: var(--vi-text-soft) !important;
  --muted: var(--vi-muted) !important;
  --accent: var(--aiceo-royal-blue) !important;
  --accent-contrast: #FFFFFF !important;
  --shadow: var(--vi-shadow) !important;
  --success: var(--aiceo-forest-green) !important;
  --progress-fill: linear-gradient(90deg, #2C5F8A, #C9A227) !important;
  --font-sans: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
}

/* ---------- 2. 全局基底（象牙白纸感 · 留白即奢侈） ---------- */
html, body,
.app-shell,
.command-center,
.main,
.messages-wrap,
.messages {
  background: var(--vi-bg) !important;
  color: var(--vi-text) !important;
  font-family: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

::selection { background: rgba(44, 95, 138, .22); }

/* ---------- 3. 侧栏（暖白纸面 + 细金线） ---------- */
.sidebar {
  background: var(--vi-bg-soft) !important;
  color: var(--vi-text) !important;
  border-right: 1px solid var(--vi-border) !important;
}
.sidebar-header,
.sidebar-footer {
  background: var(--vi-bg-soft) !important;
  border-color: var(--vi-border) !important;
}
.topbar,
.composer-wrap {
  background: var(--vi-bg) !important;
  border-color: var(--vi-border) !important;
}
.topbar { position: relative !important; }
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--vi-gold-line);
  pointer-events: none;
}

/* 品牌区：Cinzel 建筑感 + 帝王金徽记 */
.brand-mark {
  background: linear-gradient(135deg, #E8D5A3 0%, #C9A227 55%, #8B6914 100%) !important;
  color: #FFFFFF !important;
  border-color: rgba(201, 162, 39, .55) !important;
  box-shadow: 0 2px 8px rgba(201, 162, 39, .30) !important;
}
.brand-title,
.chat-title {
  color: var(--vi-text) !important;
  font-family: "Cinzel", "Noto Serif SC", "Songti SC", serif !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}
.brand-subtitle { color: var(--vi-muted) !important; letter-spacing: .05em !important; }

/* 新对话按钮：皇家蓝主交互（VI 3.2） */
.new-chat-button {
  background: var(--aiceo-royal-blue) !important;
  color: #FFFFFF !important;
  border-color: var(--aiceo-royal-blue) !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  box-shadow: 0 2px 10px rgba(44, 95, 138, .25) !important;
  transition: background .15s ease, box-shadow .15s ease !important;
}
.new-chat-button:hover {
  background: var(--aiceo-sky-blue) !important;
  border-color: var(--aiceo-sky-blue) !important;
  box-shadow: 0 4px 14px rgba(74, 139, 181, .35) !important;
}

/* 会话列表与侧栏链接 */
.conversation-item,
.sidebar-link,
.quick-prompt {
  background: transparent !important;
  color: var(--vi-text-soft) !important;
  border-color: var(--vi-border) !important;
}
.conversation-item:hover,
.sidebar-link:hover,
.quick-prompt:hover {
  background: rgba(44, 95, 138, .07) !important;
  color: var(--vi-text) !important;
  border-color: rgba(44, 95, 138, .30) !important;
}
.conversation-item.active {
  background: rgba(44, 95, 138, .10) !important;
  color: var(--aiceo-deep-navy) !important;
  border-left: 2px solid var(--aiceo-imperial-gold) !important;
}
.conversation-title { color: inherit !important; }

/* ---------- 4. 消息区 ---------- */
.markdown-body,
.message-content,
.message-author {
  color: var(--vi-text) !important;
  line-height: 1.7 !important;
}
.message.user .message-content {
  background: rgba(201, 162, 39, .07) !important;
  border: 1px solid rgba(201, 162, 39, .30) !important;
  color: var(--vi-text) !important;
  border-radius: 14px !important;
}
.markdown-body a { color: var(--aiceo-royal-blue) !important; text-decoration-color: rgba(44,95,138,.4) !important; }
.markdown-body a:hover { color: var(--aiceo-sky-blue) !important; }
.markdown-body blockquote {
  background: var(--vi-bg-soft) !important;
  color: var(--vi-text-soft) !important;
  border-left: 3px solid var(--aiceo-imperial-gold) !important;
}
.markdown-body th {
  background: var(--vi-panel-muted) !important;
  color: var(--aiceo-deep-navy) !important;
  border-color: var(--vi-border) !important;
}
.markdown-body :not(pre) > code {
  background: rgba(44, 95, 138, .08) !important;
  color: var(--aiceo-deep-navy) !important;
  border-color: rgba(44, 95, 138, .18) !important;
}
.markdown-body h1, .markdown-body h2 {
  font-family: "Noto Serif SC", "Songti SC", serif !important;
  color: var(--aiceo-night-blue) !important;
  letter-spacing: .02em !important;
}
.markdown-body h1 { border-bottom: 1px solid rgba(201, 162, 39, .35) !important; padding-bottom: .3em !important; }

/* 消息操作按钮 */
.msg-action-btn {
  color: var(--vi-muted) !important;
  border-color: var(--vi-border) !important;
  background: #FFFFFF !important;
}
.msg-action-btn:hover {
  color: var(--aiceo-royal-blue) !important;
  border-color: rgba(44, 95, 138, .40) !important;
  background: rgba(44, 95, 138, .06) !important;
}

/* 快捷指令（欢迎页）：象牙白卡 + 金线悬停 */
.quick-prompt {
  background: #FFFFFF !important;
  border: 1px solid var(--vi-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(13, 27, 42, .04) !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
.quick-prompt:hover {
  border-color: rgba(201, 162, 39, .55) !important;
  box-shadow: 0 6px 18px rgba(13, 27, 42, .08), 0 0 0 1px rgba(201, 162, 39, .18) !important;
  transform: translateY(-1px) !important;
  background: #FFFFFF !important;
}

/* ---------- 5. 文件/交付卡片 ---------- */
html body .attachment-card,
html body .deliverable-card,
html body .inline-file-card,
html body .artifact-card {
  background: #FFFFFF !important;
  color: var(--vi-text) !important;
  border: 1px solid var(--vi-border) !important;
  box-shadow: 0 2px 10px rgba(13, 27, 42, 0.05) !important;
}
html body .attachment-card:hover,
html body .deliverable-card:hover,
html body .inline-file-card:hover,
html body .artifact-card:hover {
  background: #FFFFFF !important;
  border-color: rgba(201, 162, 39, .55) !important;
  box-shadow: 0 5px 16px rgba(13, 27, 42, 0.09), 0 0 0 1px rgba(201, 162, 39, .15) !important;
}
html body .attachment-name,
html body .deliverable-name,
html body .inline-file-name,
html body .artifact-card-title {
  color: var(--aiceo-night-blue) !important;
}
html body .attachment-meta,
html body .deliverable-meta,
html body .artifact-card-meta {
  color: var(--vi-muted) !important;
}
html body .artifact-card-header {
  background: var(--vi-bg-soft) !important;
  border-bottom-color: var(--vi-border) !important;
}

/* ---------- 6. 输入区（金色聚焦仪式感） ---------- */
.composer {
  border: 1px solid var(--vi-border-strong) !important;
  box-shadow: 0 8px 22px rgba(13, 27, 42, 0.06) !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
.composer:focus-within {
  border-color: var(--aiceo-imperial-gold) !important;
  box-shadow: 0 8px 22px rgba(13, 27, 42, 0.06), 0 0 0 3px rgba(201, 162, 39, .12) !important;
}
#chatInput {
  color: var(--vi-text) !important;
  background: #FFFFFF !important;
  font-family: "Inter", "Noto Sans SC", sans-serif !important;
}
#chatInput::placeholder { color: var(--vi-muted) !important; }

/* 发送按钮：皇家蓝 */
.send-button {
  background: var(--aiceo-royal-blue) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--aiceo-royal-blue) !important;
  transition: background .15s ease !important;
}
.send-button:hover:not(:disabled) {
  background: var(--aiceo-sky-blue) !important;
  border-color: var(--aiceo-sky-blue) !important;
}
.send-button:disabled {
  background: var(--vi-panel-muted) !important;
  color: #9AA5B1 !important;
  border-color: var(--vi-border) !important;
}

/* 回到底部按钮 */
.scroll-to-bottom-btn {
  background: #FFFFFF !important;
  color: var(--aiceo-royal-blue) !important;
  border: 1px solid var(--vi-border-strong) !important;
}
.scroll-to-bottom-btn:hover {
  background: var(--vi-bg-soft) !important;
  border-color: rgba(44, 95, 138, .45) !important;
}

/* ---------- 7. Agent 过程组件 ---------- */
.thinking,
.agent-progress-panel,
.agent-trace,
.agent-step-card {
  color: var(--vi-text-soft) !important;
  background: var(--vi-bg-soft) !important;
  border-color: var(--vi-border) !important;
}
.agent-step-card.done,
.agent-step-card.success {
  border-left: 3px solid var(--aiceo-forest-green) !important;
}

/* ---------- 8. 积分中心与登录等次级面板 ---------- */
.points-panel, .points-card, .credits-panel, .modal, .modal-content, .login-panel, .auth-card {
  background: #FFFFFF !important;
  color: var(--vi-text) !important;
  border-color: var(--vi-border) !important;
}
.points-value, .credits-value {
  color: var(--aiceo-dark-gold) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 300 !important;
}

/* 主要CTA类按钮统一皇家蓝，金色hover */
button.primary, .btn-primary, .login-btn, .register-btn {
  background: var(--aiceo-royal-blue) !important;
  color: #FFFFFF !important;
  border-color: var(--aiceo-royal-blue) !important;
}
button.primary:hover, .btn-primary:hover, .login-btn:hover, .register-btn:hover {
  background: var(--aiceo-sky-blue) !important;
  border-color: var(--aiceo-sky-blue) !important;
}

/* ---------- 9. 滚动条与偏好 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CFC9B8; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #B5AE99; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}