/**
 * Carol AI · Unified Stylesheet (v2)
 * 单一样式源 · 全站共享
 *
 * 分区：
 *  1. 品牌变量与色板（含深色模式覆盖）
 *  2. 基础排版
 *  3. Tailwind 补充 utility
 *  4. 组件类
 *  5. 动效
 *  6. 焦点/无障碍
 *  7. 全局工具条与手册
 *  8. 打印/reduce-motion 兼容
 */

/* ============= 1. 品牌变量 ============= */
:root {
  /* 主色板 */
  --ink-50:  #F0F5F2;
  --ink-100: #DBE8E1;
  --ink-200: #B8D1C4;
  --ink-300: #8FB4A0;
  --ink-400: #5E907A;
  --ink-500: #3D6E5A;
  --ink-600: #2E5748;
  --ink-700: #234437;
  --ink-800: #1A3329;
  --ink-900: #12241D;
  --ink-950: #0A1611;

  --rose-50:  #FDF5F1;
  --rose-100: #F9E5DC;
  --rose-200: #F3C9B5;
  --rose-300: #EAA88A;
  --rose-400: #DE8560;
  --rose-500: #C96A45;
  --rose-600: #A85536;
  --rose-700: #86432B;

  --sand-50:  #FAF7F2;
  --sand-100: #F3EDE3;
  --sand-200: #E5DBC9;
  --sand-300: #CBB99E;

  --latte-400: #A38B69;
  --latte-500: #7A6449;

  --success-50: #EBF4EE; --success-500: #4A8B65; --success-700: #2E5A40;
  --warning-50: #FAF3E4; --warning-500: #C89B3C; --warning-700: #7D5F1E;
  --danger-50:  #F7E9E9; --danger-500:  #A83A3A; --danger-700:  #6A2020;
  --info-50:    #E9EEF5; --info-500:    #4A6A8B; --info-700:    #2A3F5A;

  /* 主题令牌（浅色默认） */
  --bg:       var(--sand-50);
  --surface:  var(--sand-100);
  --elev:     var(--sand-50);
  --border:   var(--sand-200);
  --border-strong: var(--sand-300);
  --text:     #2D2318;
  --text-muted: var(--latte-500);
  --text-subtle: var(--latte-400);
  --primary:  var(--ink-500);
  --primary-hover: var(--ink-600);
  --accent:   var(--rose-500);
  --hover:    var(--sand-100);

  /* 字体 */
  --font-heading: 'Fraunces', 'Noto Serif SC', serif;
  --font-sans:    'Inter', 'Noto Sans SC', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* 圆角 */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* 阴影 */
  --shadow-xs: 0 1px 2px 0 rgba(30, 30, 20, 0.03);
  --shadow-sm: 0 2px 4px -1px rgba(30, 30, 20, 0.04), 0 1px 2px -1px rgba(30, 30, 20, 0.02);
  --shadow-md: 0 4px 8px -2px rgba(30, 30, 20, 0.06), 0 2px 4px -2px rgba(30, 30, 20, 0.03);
  --shadow-lg: 0 8px 16px -4px rgba(30, 30, 20, 0.08), 0 4px 6px -3px rgba(30, 30, 20, 0.04);
  --shadow-xl: 0 16px 32px -8px rgba(30, 30, 20, 0.10);

  /* z-index 分层 */
  --z-sticky:  20;
  --z-fab:     30;
  --z-header:  40;
  --z-toast:   50;
  --z-overlay: 60;
  --z-modal:   70;
  --z-toolbar: 9998;
  --z-manual:  9999;
}

.dark {
  --bg:       #0F1614;
  --surface:  #1A2420;
  --elev:     #253530;
  --border:   #354740;
  --border-strong: #465A52;
  --text:     #E8E4DA;
  --text-muted: #B8B0A0;
  --text-subtle: #7A6E60;
  --primary:  var(--ink-300);
  --primary-hover: var(--ink-200);
  --accent:   var(--rose-300);
  --hover:    #253530;
}

/* ============= 2. 基础排版 ============= */
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.2s, color 0.2s;
  margin: 0;
  line-height: 1.5;
}
.font-heading { font-family: var(--font-heading); }
.font-mono, .tabular-nums { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* ============= 3. Tailwind 补充：主题令牌类 ============= */
.bg-app       { background: var(--bg); }
.bg-surface   { background: var(--surface); }
.bg-elev      { background: var(--elev); }
.bg-hover:hover { background: var(--hover); }
.text-app     { color: var(--text); }
.text-muted   { color: var(--text-muted); }
.text-subtle  { color: var(--text-subtle); }
.text-primary { color: var(--primary); }
.text-accent  { color: var(--accent); }
.border-app   { border-color: var(--border); }
.border-strong { border-color: var(--border-strong); }

/* Icon sizing */
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

/* ============= 4. 组件类 ============= */

/* 卡片悬浮 */
.card-lift { transition: transform 0.2s cubic-bezier(0,0,0.2,1), box-shadow 0.2s cubic-bezier(0,0,0.2,1); }
.card-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Sidebar 激活 */
.sidebar-active {
  background: linear-gradient(90deg, rgba(61,110,90,0.10), transparent);
  border-left: 3px solid var(--primary);
  padding-left: calc(0.75rem - 3px);
  font-weight: 500;
}
.dark .sidebar-active {
  background: linear-gradient(90deg, rgba(143,180,160,0.15), transparent);
}

/* KPI 卡 */
.kpi-card {
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

/* 状态徽章 */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.status-success { background: var(--success-50); color: var(--success-700); }
.status-warning { background: var(--warning-50); color: var(--warning-700); }
.status-danger  { background: var(--danger-50);  color: var(--danger-700); }
.status-info    { background: var(--info-50);    color: var(--info-700); }
.status-muted   { background: var(--sand-100);   color: var(--latte-500); }

/* SAFE 徽章 */
.safe-S     { background: rgba(61,110,90,0.12);   color: #234437; }
.safe-A     { background: rgba(201,106,69,0.12);  color: #86432B; }
.safe-F     { background: rgba(74,106,139,0.12);  color: #2A3F5A; }
.safe-E     { background: rgba(74,139,101,0.12);  color: #2E5A40; }
.safe-Trust { background: rgba(200,155,60,0.12);  color: #7D5F1E; }
.safe-Flow  { background: rgba(122,100,73,0.12);  color: #4A3B2A; }
.dark .safe-S     { background: rgba(143,180,160,0.15); color: #8FB4A0; }
.dark .safe-A     { background: rgba(234,168,138,0.15); color: #EAA88A; }
.dark .safe-F     { background: rgba(74,106,139,0.25);  color: #A8B8CB; }
.dark .safe-E     { background: rgba(74,139,101,0.25);  color: #A8CBB0; }
.dark .safe-Trust { background: rgba(200,155,60,0.25);  color: #D9BB6E; }
.dark .safe-Flow  { background: rgba(163,139,105,0.25); color: #CBB99E; }

/* State Machine 节点 */
.sm-node {
  padding: 6px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
}
.sm-node-past    { background: var(--success-50); color: var(--success-700); border-color: var(--success-500); }
.sm-node-active  { background: var(--primary); color: var(--bg); border-color: var(--primary); box-shadow: var(--shadow-md); transform: scale(1.05); }
.sm-node-future  { background: var(--sand-100); color: var(--text-muted); }

/* Timeline */
.timeline { position: relative; padding-left: 24px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 6px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--border);
}
.timeline-item { position: relative; margin-bottom: 16px; }
.timeline-dot {
  position: absolute;
  left: -22px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 9999px;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--bg);
}

/* kbd */
kbd {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
}

/* Chat message styles */
.stream-cursor::after {
  content: '|';
  margin-left: 2px;
  color: var(--primary);
  animation: blink 1s step-start infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Thinking dots */
.think-dot { animation: think-bounce 0.6s infinite; background: var(--text-muted); }
.think-dot:nth-child(2) { animation-delay: 150ms; }
.think-dot:nth-child(3) { animation-delay: 300ms; }
@keyframes think-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Shimmer 进度条 */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.animate-shimmer { animation: shimmer 1.5s ease-in-out infinite; }

/* ============= 5. 动效 ============= */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fade-in-up 0.3s cubic-bezier(0,0,0.2,1); }
.fade-in-up { animation: fade-in-up 0.35s cubic-bezier(0,0,0.2,1); }

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.scale-in { animation: scale-in 0.2s cubic-bezier(0,0,0.2,1); }

@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.slide-in-right { animation: slide-in-right 0.3s cubic-bezier(0,0,0.2,1); }

/* ============= 6. 焦点/无障碍 ============= */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(61,110,90,0.15);
  border-color: var(--primary);
}
.dark .focus-ring:focus-visible {
  box-shadow: 0 0 0 3px rgba(143,180,160,0.2);
}

/* ============= 7. 滚动条 ============= */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); }

/* ============= 8. 全局工具条 ============= */
#carol-toolbar {
  position: fixed;
  top: 12px; right: 12px;
  z-index: var(--z-toolbar);
  display: flex;
  gap: 6px;
  pointer-events: none;
}
#carol-toolbar > * { pointer-events: auto; }

.carol-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}
.carol-tool-btn:hover {
  background: var(--hover);
  border-color: var(--border-strong);
  color: var(--text);
  transform: translateY(-1px);
}

.carol-lang-group {
  display: inline-flex;
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
}
.carol-lang-btn {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
.carol-lang-btn:hover { background: rgba(61,110,90,0.08); color: var(--text); }
.carol-lang-btn.active { background: var(--primary); color: var(--bg); font-weight: 500; }

/* ============= 9. 手册浮层 ============= */
#carol-manual-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-manual);
  background: rgba(15,22,20,0.45);
  backdrop-filter: blur(4px);
  display: none;
  align-items: stretch;
  justify-content: flex-end;
}
#carol-manual-overlay.open {
  display: flex;
  animation: manual-fade 0.2s;
}
@keyframes manual-fade { from { opacity: 0; } to { opacity: 1; } }

#carol-manual {
  width: 100%;
  max-width: 820px;
  height: 100%;
  background: var(--bg);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  animation: manual-slide 0.35s cubic-bezier(0,0,0.2,1);
  font-family: var(--font-sans);
}
@keyframes manual-slide { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.carol-manual-header {
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
}
.carol-manual-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.carol-manual-subtitle {
  font-size: 12px;
  color: var(--text-subtle);
  margin-top: 2px;
}
.carol-manual-close {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.carol-manual-close:hover { background: var(--surface); }
.carol-manual-body {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr;
  overflow: hidden;
}
.carol-manual-nav {
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px 0;
}
.carol-manual-nav-group {
  padding: 6px 20px;
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-top: 12px;
}
.carol-manual-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 20px;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.15s;
}
.carol-manual-nav-item:hover { background: rgba(61,110,90,0.06); }
.carol-manual-nav-item.active {
  border-left-color: var(--primary);
  background: linear-gradient(90deg, rgba(61,110,90,0.10), transparent);
  color: var(--ink-700);
  font-weight: 500;
}
.dark .carol-manual-nav-item.active { color: var(--ink-200); }
.carol-manual-content {
  overflow-y: auto;
  padding: 28px 36px;
  color: var(--text);
  line-height: 1.7;
}
.carol-manual-content h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px 0;
}
.carol-manual-content .lead {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 24px;
}
.carol-manual-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 24px 0 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.carol-manual-content h3 .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--primary);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
}
.carol-manual-content p { margin: 8px 0; font-size: 14px; }
.carol-manual-content ul,
.carol-manual-content ol { padding-left: 24px; font-size: 14px; }
.carol-manual-content li { margin: 4px 0; }
.carol-manual-content code {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-700);
}
.dark .carol-manual-content code { color: var(--ink-200); }
.carol-manual-content .callout {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  padding: 12px 16px;
  border-radius: 4px;
  margin: 16px 0;
  font-size: 13px;
}
.carol-manual-content .callout-title {
  font-weight: 600;
  color: var(--rose-700);
  margin-bottom: 4px;
}
.dark .carol-manual-content .callout-title { color: var(--rose-300); }
.carol-manual-content .keys {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
}
.carol-manual-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 12px 0;
}
.carol-manual-content th,
.carol-manual-content td {
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}
.carol-manual-content th {
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ============= 10. Sheet 通用浮层（用于品牌记忆等右侧详情） ============= */
.sheet-overlay {
  background: rgba(15,22,20,0.4);
  backdrop-filter: blur(4px);
}
.cmd-bg { background: rgba(15,22,20,0.5); backdrop-filter: blur(6px); }

/* ============= 11. Toast ============= */
#carol-toast-container {
  position: fixed;
  top: 20px; right: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.carol-toast {
  min-width: 320px;
  max-width: 400px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  border-left-width: 4px;
  background: var(--elev);
  box-shadow: var(--shadow-lg);
  display: flex;
  gap: 12px;
  animation: fade-in-up 0.3s cubic-bezier(0,0,0.2,1);
  pointer-events: auto;
}
.carol-toast-success { border-left-color: var(--success-500); }
.carol-toast-warning { border-left-color: var(--warning-500); }
.carol-toast-danger  { border-left-color: var(--danger-500); }
.carol-toast-info    { border-left-color: var(--info-500); }

/* ============= 12. 移动端响应式 ============= */
@media (max-width: 640px) {
  #carol-toolbar { top: 8px; right: 8px; }
  .carol-manual-body { grid-template-columns: 1fr; }
  .carol-manual-nav { display: none; }
  #carol-manual { max-width: 100%; }
}

/* ============= 13. reduce-motion ============= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}