/* ── Design System ────────────────────────────────────────
 *   Token: structural variables in :root, color in dark-theme
 *   Inspired by openhanako's paper-based token system
 *   ───────────────────────────────────────────────────── */

/* ========================================
   设计系统 · 结构 Token（主题无关）
   ======================================== */

/* P3方案A (v3): 禁用浏览器自动合成粗体。微软雅黑只装了 300/400/700
   三个权重——如果不禁用合成，用户输入 font-weight: 500/600/800 时，
   Chromium 会"加粗"渲染（看起来像 700），造成"突然变粗"的体验。
   关闭合成后，500/600/800 会诚实地 fallback 到 400（最近邻），
   视觉上无变化而不是"魔法"变粗。
   副作用：用户若真的想要超过 700 的粗体（比如 Extra Bold），不再
   能靠合成得到——但 YaHei 本来就没有更粗的字体，所以这是正确的。 */
* {
  font-synthesis: none;
}
:root {
  /* ── 间距 Spacing ── */
  --space-xs: 0.25rem;   /*  4px */
  --space-sm: 0.5rem;    /*  8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2.5rem;    /* 40px */

  /* ── 圆角 Radius ── */
  --radius-sm: 10px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* 语义圆角（主题可覆盖） */
  --radius-card:       8px;    /* 面板/卡片 */
  --radius-bubble:     8px;    /* 消息气泡 */
  --radius-input:      6px;    /* 输入框/按钮 */
  --radius-modal:      8px;    /* 弹窗 */
  --radius-full:       9999px; /* 药丸/圆点 */

  /* ── 动效 Duration ── */
  --duration-instant: 0.1s;
  --duration-fast:    0.15s;
  --duration-slow:    0.25s;

  /* ── 缓动 Easing ── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ── 字体 ── */
  --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
  --chat-font:  'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif;

  /* ── 字体粗细 (P3方案B: 用户可在 设置 → 字体 面板自定义) ── */
  --fw-normal:   400;   /* 普通正文、Assistant 回答 */
  --fw-medium:   500;   /* 标签 / 小标题 / hint */
  --fw-semibold: 600;   /* 段落标题 / 按钮 / badge */
  --fw-bold:     700;   /* 真正粗体（极少用） */

  /* ── 布局 ── */
  --sidebar-width: 240px;
  /* 消息列表 + 输入框共用同一个宽度约束（ChatGPT / 豆包风格） */
  --chat-max-width: 52rem;
  --input-max-width: 50rem;
}

/* ========================================
   浅蓝主题 · 色彩体系
   ======================================== */
:root {
  /* ── 背景层（从白到浅蓝） ── */
  --bg:          #eef2f9;  /* 淡蓝主背景 */
  --bg-elevated: #f0f4fb;  /* 抬高一层 */
  --bg-card:     #ffffff;  /* 卡片/侧栏背景 */
  --bg-surface:  #e8edf5;  /* 表面元素（输入框等） */
  --bg-hover:    #dce3ef;  /* 悬停态 */

  /* ── 文字（从深到亮） ── */
  --text:         #1a1a2e;  /* 正文深色 */
  --text-light:   #555570;  /* 次要文本 */
  --text-muted:   #7e7e94;  /* 辅助/禁用 */

  /* ── 强调色（琥珀） ── */
  --accent:       #6366f1;
  --accent-hover: #4f46e5;
  --accent-dim:   rgba(99, 102, 241, 0.10);
  --accent-light: rgba(99, 102, 241, 0.06);
  --accent-rgb:   99, 102, 241;

  /* ── 语义色 ── */
  --danger:  #d0312d;
  --success: #16a34a;

  /* ── 边框 ── */
  --border:       #d0d5e2;
  --border-hover: #b8bfd0;
  --border-focus: var(--accent);

  /* ── 遮罩 ── */
  --shadow:       rgba(0, 0, 0, 0.08);
  --shadow-card:  0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.10);
  --overlay:      rgba(0, 0, 0, 0.3);
}

/* ── 旧变量兼容别名（保留引用，逐步迁移） ── */
:root {
  --bg-primary:    var(--bg);
  --bg-secondary:  var(--bg-card);
  --bg-tertiary:   var(--bg-surface);
  --text-primary:  var(--text);
  --text-secondary: var(--text-light);
  --bg-dim:        rgba(0,0,0,0.08);
  --danger-color:  #ef4444;
}

/* ========================================
   关键帧动画
   ======================================== */
/* 消息渐入 */
@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 流式闪烁光标 */
@keyframes blink {
  50% { opacity: 0; }
}

/* 弹窗背景渐入 */
@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 弹窗内容缩放+渐入 */
@keyframes modal-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Toast 渐入 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 欢迎页渐入 */
@keyframes welcome-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 欢迎图标的呼吸脉冲 */
@keyframes welcome-pulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
}

/* ========================================
   全局重置 & 基础
   ======================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  /* P3方案B v3: bind body text to --fw-normal so user-edits actually
     affect visible chat text. Default (300) is lighter than the browser's
     built-in 400 — this is intentional and matches the user's spec. */
  font-weight: var(--fw-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ── 滚动条 ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-hover);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ── 焦点环 a11y ── */
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ========================================
   Modal 弹窗
   ======================================== */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--duration-slow) var(--ease-out),
    backdrop-filter var(--duration-slow) var(--ease-out);
}

.modal.active {
  opacity: 1;
  pointer-events: all;
}

/* ========================================
   ISAOS System Panel
   ======================================== */
.isaos-system-panel {
  margin: 10px 0 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.03));
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.isaos-system-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.isaos-system-copy {
  min-width: 0;
}

.isaos-system-kicker {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.isaos-system-title {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-primary);
}

.isaos-stack-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.isaos-stack-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.3;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.isaos-stack-pill-healthy {
  background: rgba(22, 163, 74, 0.12);
  color: #166534;
}

.isaos-stack-pill-offline {
  background: rgba(208, 49, 45, 0.12);
  color: #991b1b;
}

.isaos-stack-pill-unknown {
  background: rgba(99, 102, 241, 0.10);
  color: var(--accent);
}

.isaos-system-meta {
  display: grid;
  gap: 8px;
}

.isaos-system-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.isaos-system-label {
  color: var(--text-muted);
  flex: 0 0 auto;
}

.isaos-system-value {
  color: var(--text-primary);
  text-align: right;
  word-break: break-word;
}

.isaos-system-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.isaos-system-action-status {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* Confirm modal must sit ABOVE the settings modal so its OK/Cancel buttons
   remain clickable when triggered from inside a settings panel (e.g. deleting
   a prompt profile). Otherwise the settings-modal's form inputs intercept
   the click. */
#confirm-modal {
  z-index: 150;
}

.modal-content {
  width: 420px;
  max-width: 90vw;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  transform: translateY(8px) scale(0.95);
  transition:
    transform var(--duration-slow) var(--ease-out),
    opacity var(--duration-slow) var(--ease-out);
}

.modal.active .modal-content {
  transform: translateY(0) scale(1);
}

.modal-header {
  padding: var(--space-lg) var(--space-lg) 0;
}

.modal-body {
  padding: var(--space-lg);
}

.modal-body h2 {
  font-size: 18px;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-sm);
  color: var(--text);
}

.hint {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.input-group {
  display: flex;
  gap: var(--space-sm);
}

.input-group input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--bg-surface);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-mono);
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.input-group input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.input-group input::placeholder {
  color: var(--text-muted);
  font-family: var(--font-sans);
}

/* ========================================
   按钮
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--bg-surface);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition:
    all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

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

.btn:active {
  transform: scale(0.97);
}

.btn.primary {
  background: var(--accent);
  color: #fff;
  font-weight: var(--fw-semibold);
  border-color: var(--accent);
}

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

.btn.primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.icon-btn {
  padding: 6px;
  border: none;
  background: transparent;
  color: var(--text-light);
  border-radius: var(--radius-sm);
  transition:
    background var(--duration-instant),
    color var(--duration-instant);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

.icon-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.error {
  color: var(--danger);
  font-size: 13px;
  margin-top: var(--space-sm);
}

/* ── 配置提示横幅 ── */
#config-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: 10px 16px;
  background: var(--accent-dim);
  border-bottom: 1px solid rgba(99, 102, 241, 0.2);
  z-index: 50;
  font-size: 13px;
  color: var(--text);
}

/* ── 设置弹窗 ── */
.settings-modal-content {
  width: 620px !important;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.settings-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── 左侧标签栏 ── */
.settings-tabs {
  width: 140px;
  min-width: 140px;
  border-right: 1px solid var(--border);
  padding: var(--space-sm) 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.settings-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--text-light);
  cursor: pointer;
  border-right: 2px solid transparent;
  transition:
    color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
  user-select: none;
}

.settings-tab:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.settings-tab.active {
  color: var(--accent);
  background: var(--accent-light);
  border-right-color: var(--accent);
}

.settings-tab svg {
  flex-shrink: 0;
}

/* ── 右侧面板区 ── */
.settings-panels {
  flex: 1;
  padding: var(--space-md);
  overflow-y: auto;
  min-width: 0;
}

.settings-panel {
  display: none;
}

.settings-panel.active {
  display: block;
  overflow-x: hidden;
  word-break: break-word;
}

.api-config-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-row-inline-group {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

#settings-fetch-models-btn {
  font-size: 12px;
  padding: 6px 10px;
  transition: all var(--duration-fast) var(--ease-out);
}
#settings-fetch-models-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#settings-fetch-models-btn.fetching {
  pointer-events: none;
  opacity: 0.7;
}
#settings-fetch-models-btn.fetching svg {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.form-label {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--text-light);
}

.form-input, .form-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--bg-surface);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-mono);
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.form-input:focus, .form-select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.form-select {
  appearance: none;
  cursor: pointer;
  font-family: var(--font-sans);
  padding: 8px 8px;
  min-height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999aab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 32px;
}

#settings-model.form-select {
  font-family: var(--font-mono);
  font-size: 13px;
}

.form-input::placeholder {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 12px;
}

.settings-status {
  font-size: 13px;
  padding: 6px 0;
  text-align: center;
}

.settings-status.success {
  color: var(--success);
}

.settings-status.error {
  color: var(--danger);
}

.settings-status.hidden {
  display: none;
}

/* ── 弹窗底部 ── */
.modal-footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-sm) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--border);
  margin-top: 0;
}

.avatar-settings {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.avatar-settings-actions {
  flex: 1;
}

.agent-name-settings {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.agent-name-label {
  display: block;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin-bottom: 8px;
}
.agent-name-row {
  display: flex;
  gap: 8px;
}
.agent-name-row .form-input {
  flex: 1;
}
.agent-name-settings .hint {
  margin-top: 6px;
  font-size: 12px;
}

.user-avatar-settings {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.user-avatar-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.user-avatar-actions {
  flex: 1;
}
.user-name-row {
  margin-top: 12px;
}

.font-settings {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.font-settings .form-select {
  width: 100%;
  margin-bottom: 6px;
}

/* ========================================
   外观 / 主题 (Appearance Panel)
   ======================================== */
.bg-settings {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bg-settings .section-title {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  margin: 0 0 4px 0;
  color: var(--text);
}

/* 预设色板网格 */
.bg-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}
.bg-preset-swatch {
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 10px 8px;
  cursor: pointer;
  background: var(--bg-card);
  transition: all var(--duration-fast) var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  text-align: center;
  user-select: none;
}
.bg-preset-swatch:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
}
.bg-preset-swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}
.bg-preset-colors {
  display: flex;
  gap: 2px;
  width: 100%;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
}
.bg-preset-colors > div {
  flex: 1;
}

/* 颜色选择器（input[type=color]，强调色用） */
.bg-color-picker {
  width: 48px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 2px;
  cursor: pointer;
  background: var(--bg-card);
  flex-shrink: 0;
}
.bg-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.bg-color-picker::-webkit-color-swatch { border: none; border-radius: 4px; }
.bg-color-picker::-moz-color-swatch { border: none; border-radius: 4px; }

/* ── 2D 色板（背景色自定义） ── */
.bg-color-picker-2d {
  display: flex;
  gap: 6px;
  align-items: stretch;
  margin-top: 6px;
}
.bg-color-sl-wrap {
  position: relative;
  flex: 1;
  height: 150px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  overflow: hidden;
  cursor: crosshair;
  user-select: none;
}
.bg-color-square {
  display: block;
  width: 100%;
  height: 100%;
}
.bg-color-indicator {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.2);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.bg-color-hue-wrap {
  position: relative;
  width: 18px;
  height: 150px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  overflow: hidden;
  cursor: ew-resize;
  flex-shrink: 0;
  user-select: none;
}

/* ── Hue preset row (replaces the narrow 18×150 vertical strip) ──
   12 hue buttons at 30° intervals — each is a clickable colored square
   sized for easy targeting (24×24 = 576px² touch target).
   Replaces the previous vertical bar that was too narrow to click precisely. */
.bg-color-hue-presets {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--bg-card);
  justify-content: space-between;
}
.bg-hue-preset {
  flex: 1 1 0;
  height: 24px;
  min-width: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s ease, border-color 0.1s ease;
  outline: none;
}
.bg-hue-preset:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 0, 0, 0.2);
}
.bg-hue-preset:focus-visible {
  border-color: var(--accent, #6366f1);
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 2px;
}
.bg-hue-preset.active {
  border-color: var(--text, #1a1a2e);
  box-shadow: 0 0 0 1px var(--bg, #fff), 0 0 0 3px var(--text, #1a1a2e);
}
.bg-color-hue-bar {
  display: block;
  width: 100%;
  height: 100%;
}
.bg-color-hue-indicator {
  position: absolute;
  left: -3px;
  width: 24px;
  height: 4px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: 2px;
  transform: translateY(-50%);
  pointer-events: none;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.bg-color-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-light);
}
.bg-color-hex-text {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.5px;
}
.bg-color-swatch {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #ffffff;
  margin-left: auto;
}
.bg-color-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.bg-color-apply-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 6px 22px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.bg-color-apply-btn:hover { opacity: 0.85; }
.bg-color-apply-btn:active { opacity: 0.7; }

/* 亮度滑杆 */
.bg-brightness-slider {
  width: 100%;
  margin: 8px 0 0 0;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.bg-brightness-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--bg-card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.bg-brightness-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--bg-card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* 实时预览 */
.bg-preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px;
  margin-top: 6px;
  transition: background var(--duration-slow) var(--ease-out);
}
.bg-preview-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bg-preview-bubble {
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  align-self: flex-start;
  max-width: 80%;
  transition: all var(--duration-slow) var(--ease-out);
}
.bg-preview-bubble.user {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
  align-self: flex-end;
}

/* User message avatar (right side of label) */
.user-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-left: 6px;
  border: 1.5px solid var(--border);
}

/* ========================================
   App 布局
   ======================================== */
#app {
  display: flex;
  height: 100%;
}

/* ========================================
   侧边栏
   ======================================== */
#sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.sidebar-header {
  padding: var(--space-md);
}

.workspace-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  background: var(--bg-surface);
  margin: -2px var(--space-md) 0;
  transition: background 0.15s;
  overflow: hidden;
}
.workspace-bar:hover { background: #dce2ed; }
.workspace-path {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Knowledge Base Panel ── */
.kb-settings { padding: 0; }
#kb-test-results .kb-result-item {
  padding: 8px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: var(--bg-tertiary);
  font-size: 12px;
}
#kb-test-results .kb-result-item:hover { background: #dce2ed; }
#kb-test-results .kb-result-title { font-weight: var(--fw-semibold); color: var(--text-primary); }
#kb-test-results .kb-result-path { color: var(--text-muted); font-size: 11px; }
#kb-test-results .kb-result-snippet { color: var(--text-secondary); margin-top: 4px; }

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* ── 头像 ── */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.avatar-sidebar {
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--border);
}
.avatar-welcome {
  width: 100px;
  height: 100px;
  border: 2px solid var(--accent-dim);
  border-radius: 50%;
  object-fit: cover;
}
.avatar-settings-preview {
  width: 80px;
  height: 80px;
  border: 2px solid var(--border);
}

.logo.small .brand {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  letter-spacing: -0.01em;
}

.sidebar-body {
  padding: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 0;
  overflow: hidden;
}

.sidebar-btn {
  width: 100%;
  justify-content: center;
}

.sidebar-btn svg {
  transition: transform var(--duration-fast) var(--ease-out);
}

.sidebar-btn:hover svg {
  transform: rotate(90deg);
}

/* ── 侧栏底部按钮（设置等） ── */
.sidebar-footer-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sidebar-settings-btn {
  font-size: 13px;
  padding: 7px 14px;
  opacity: 0.9;
  color: var(--accent);
  border-color: var(--accent);
  transition: opacity var(--duration-fast) var(--ease-out);
}
.sidebar-settings-btn:hover {
  opacity: 1;
  background: var(--accent);
  color: #fff;
}
.sidebar-settings-btn svg {
  width: 14px;
  height: 14px;
}

.sidebar-icon-btn {
  width: auto;
  padding: 4px;
  background: transparent;
  border: none;
  opacity: 0.5;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.sidebar-icon-btn:hover {
  opacity: 1;
  background: transparent;
}
.sidebar-icon-btn svg {
  width: 14px;
  height: 14px;
}

#new-chat {
  color: var(--accent);
  border-color: var(--accent);
}
#new-chat:hover {
  background: var(--accent);
  color: #fff;
}

.session-search-box {
  padding: 4px 0;
}
.session-search-field {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text);
  font-size: 12px;
  font-family: var(--font-sans);
  outline: none;
}
.session-search-field:focus {
  border-color: var(--accent);
}
.session-search-field::placeholder {
  color: var(--text-muted);
}

/* Message delete button */
.message .msg-delete-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.message:hover .msg-delete-btn {
  opacity: 1;
}
.message .msg-delete-btn:hover {
  color: var(--danger-color, #ef4444);
  background: rgba(239,68,68,0.1);
}

/* Memory Editor */
.memory-editor {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-mono);
  line-height: 1.6;
  resize: vertical;
  outline: none;
}
.memory-editor:focus {
  border-color: var(--accent);
}
/* ── Shared section header ─────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
  flex-wrap: wrap;
}
.section-header-left { display: flex; flex-direction: column; gap: 2px; }
.section-title { font-size: 15px; font-weight: var(--fw-semibold); margin: 0; color: var(--text-primary); }
.section-hint { font-size: 11px; color: var(--text-muted); }
.section-header-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── Small form inputs ─────────────────────────────────── */
.form-input-sm { font-size: 12px; padding: 5px 10px; width: 160px; }
.form-input-xs { font-size: 11px; padding: 3px 6px; width: 48px; text-align: center; }
.form-select-sm { font-size: 12px; padding: 5px 8px; width: 120px; flex-shrink: 0; }
.btn-xs { font-size: 11px; padding: 2px 10px; border-radius: 4px; }
.btn-icon-only { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn-danger-ghost { color: var(--danger); border-color: rgba(208,49,45,0.25); background: transparent; }
.btn-danger-ghost:hover { background: rgba(208,49,45,0.08); }
.inline-status { font-size: 11px; color: var(--text-muted); }
.memory-list-empty { padding: 24px 12px 4px; color: var(--text-muted); font-size: 12px; text-align: center; }
.memory-list-empty-hint { padding: 0 12px; color: var(--text-light); font-size: 11px; text-align: center; }

/* ── Memory Panel ──────────────────────────────────────── */
.memory-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-soft, rgba(99, 102, 241, 0.04));
  border: 1px solid var(--border, rgba(99, 102, 241, 0.12));
  border-radius: 6px;
  margin-bottom: 8px;
}
.memory-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg, #fff);
  border: 1px solid var(--border, rgba(99, 102, 241, 0.18));
  border-radius: 14px;
  font-size: 12px;
  color: var(--text, #333);
}
.memory-stat-icon { font-size: 13px; }
.memory-stat-count {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  padding: 0 5px;
  background: var(--bg-soft, rgba(99, 102, 241, 0.08));
  border-radius: 8px;
  color: var(--text, #555);
}
.memory-stat-chip.memory-stat-overflow {
  border-color: var(--danger, #d0312d);
  background: rgba(208, 49, 45, 0.06);
}
.memory-stat-chip.memory-stat-overflow .memory-stat-count {
  background: var(--danger, #d0312d);
  color: #fff;
}
.memory-purge-btn {
  margin-left: auto;
  padding: 5px 12px;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--danger, #d0312d);
  color: var(--danger, #d0312d);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.memory-purge-btn:hover:not(:disabled) {
  background: rgba(208, 49, 45, 0.08);
}
.memory-purge-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--text-muted, #999);
  color: var(--text-muted, #999);
}
.memory-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.memory-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 130px;
  overflow-y: auto;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.memory-list-item {
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  background: var(--bg-secondary);
  border: 1px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}
.memory-list-item:hover { border-color: var(--accent); background: var(--bg-tertiary); }
.memory-list-item.active { border-color: var(--accent); background: var(--bg-tertiary); box-shadow: 0 0 0 1px var(--accent); }
.memory-list-item-name { font-size: 12px; font-weight: var(--fw-semibold); display: flex; align-items: center; gap: 4px; }
.memory-list-item-desc { display: none; }
.memory-type-badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.memory-type-badge.user { background: rgba(99,102,241,0.18); color: #818cf8; }
.memory-type-badge.feedback { background: rgba(245,158,11,0.18); color: #fbbf24; }
.memory-type-badge.project { background: rgba(34,197,94,0.18); color: #4ade80; }
.memory-type-badge.reference { background: rgba(59,130,246,0.18); color: #60a5fa; }
.memory-editor-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.memory-editor-empty { display: none; }
.empty-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.5; }
.memory-editor-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field-row { display: flex; gap: 8px; }
.field-row .form-input { flex: 1; }
.memory-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Prompts Settings Panel (Stage 2b — list + edit modal) ─
   Layout: a single full-width column of card rows. Each row shows
   drag handle + heart icon + title + actions. Editing opens a modal.

   Modeled on 豆包's "自定义技能" layout — clean horizontal rows,
   no left/right split, no inline editor. */
.prompts-list-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.prompts-list-empty {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  padding: 48px 16px;
  line-height: 1.6;
}
.prompts-list-empty-hint {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 4px;
}

.prompts-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s, background-color 0.15s;
}
.prompts-row:hover {
  border-color: var(--accent);
  background: var(--bg-tertiary);
}

.prompts-row-drag {
  color: var(--text-muted);
  cursor: grab;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -2px;
  user-select: none;
}
.prompts-row-drag::before { content: "⠿"; }

.prompts-row-heart {
  color: var(--text-muted);
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s, transform 0.15s;
}
.prompts-row-heart:hover { color: #f87171; transform: scale(1.1); }
.prompts-row-heart.active { color: #f43f5e; }
.prompts-row-heart::before { content: "♡"; }
.prompts-row-heart.active::before { content: "♥"; }

.prompts-row-title {
  flex: 1;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
}

.prompts-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.prompts-row-action {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1;
  transition: color 0.15s, background-color 0.15s;
}
.prompts-row-action:hover {
  color: var(--accent);
  background: var(--accent-dim, rgba(129, 140, 248, 0.10));
}
.prompts-row-action.danger:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.10);
}

/* ── Prompts Edit Modal ──────────────────────────────────── */
.prompts-edit-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.prompts-edit-overlay.hidden { display: none; }

.prompts-edit-card {
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 92%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.prompts-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.prompts-edit-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.prompts-edit-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.prompts-edit-close:hover { color: var(--text); }

.prompts-edit-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.prompts-edit-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prompts-edit-row-body { flex: 1; min-height: 0; }

.prompts-edit-label {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--text-secondary, #555);
}

.prompts-edit-input-wrap {
  position: relative;
}
.prompts-edit-input-wrap .form-input {
  width: 100%;
  padding-right: 56px; /* leave space for counter */
}
.prompts-edit-counter {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-muted);
  pointer-events: none;
  user-select: none;
}

.prompts-edit-textarea {
  width: 100%;
  flex: 1;
  min-height: 280px;
  resize: vertical;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.6;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.prompts-edit-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim, rgba(129, 140, 248, 0.18));
}

.prompts-edit-status {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 16px;
}
.prompts-edit-status.error { color: #ef4444; }
.prompts-edit-status.ok { color: #16a34a; }

.prompts-edit-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Prompts Import Modal (Stage 3) ────────────────────────
   Two-column layout: searchable list on the left, preview on
   the right. Single primary "import" button at bottom right. */
.prompts-import-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.prompts-import-overlay.hidden { display: none; }

.prompts-import-card {
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 92%;
  max-width: 760px;
  height: 80vh;
  max-height: 600px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.prompts-import-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.prompts-import-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.prompts-import-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.prompts-import-close:hover { color: var(--text); }

.prompts-import-search-row {
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.prompts-import-search-row .form-input { width: 100%; }

.prompts-import-body {
  flex: 1;
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 0;
  overflow: hidden;
}

.prompts-import-list-col {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: var(--bg-secondary);
}
.prompts-import-list {
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 2px;
}
.prompts-import-empty {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 24px 12px;
  line-height: 1.6;
}

.prompts-import-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.12s, border-color 0.12s;
}
.prompts-import-item:hover {
  background: var(--bg-tertiary);
}
.prompts-import-item.active {
  background: var(--accent-dim, rgba(129, 140, 248, 0.14));
  border-color: var(--accent);
}
.prompts-import-item .prompts-row-title {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  cursor: pointer;
}

.prompts-import-preview-col {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  overflow: hidden;
  position: relative;
}
.prompts-import-empty-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
  text-align: center;
  padding: 24px;
}
.prompts-import-preview-title {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin-bottom: 10px;
  word-break: break-word;
  flex-shrink: 0;
  display: none; /* shown by JS via removing inline display */
}
.prompts-import-preview-body {
  flex: 1;
  width: 100%;
  resize: none;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  line-height: 1.6;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}

.prompts-import-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.prompts-import-status {
  flex: 1;
  font-size: 12px;
  color: var(--text-muted);
  margin-right: auto;
}
.prompts-import-status.error { color: #ef4444; }

/* ── Form card (create skill) ──────────────────────────── */
.form-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.form-card-header { font-size: 13px; font-weight: var(--fw-semibold); color: var(--text-primary); }
.form-card-actions { display: flex; gap: 8px; }

/* ── Curator bar ───────────────────────────────────────── */
.curator-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.curator-bar-left { display: flex; align-items: center; gap: 6px; }
.curator-bar-icon { font-size: 14px; }
.curator-bar-label { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.curator-bar-status { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* ── Skills count bar ──────────────────────────────────── */
.skills-count-bar {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.memory-editor-section {
  background: var(--bg-secondary, #1e1e2e);
  border-radius: 8px;
  padding: 14px;
}
.btn-sm {
  padding: 4px 12px;
  font-size: 12px;
}

/* Skills List */
.skills-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.skill-card {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  transition: border-color 0.15s;
}
.skill-card:hover { border-color: rgba(255,255,255,0.12); }
.skill-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}

/* ── Skill card actions (Stage 4 — import button + toggle) ── */
.skill-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.skill-card-import {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.skill-card-import:hover:not(:disabled) {
  background: var(--accent);
  color: #ffffff;
}
.skill-card-import:disabled {
  opacity: 0.6;
  cursor: wait;
}
.skill-card-name {
  font-weight: var(--fw-semibold);
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.skill-card-name-zh {
  font-size: 12px;
  color: var(--text);
  font-weight: var(--fw-medium);
  margin-top: 1px;
  margin-bottom: 2px;
  letter-spacing: 0.01em;
  /* keep the Chinese label on its own line under the English name */
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.skill-card-zh-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ⚠ marker for names that came from the heuristic fallback (not a real
   Chinese translation — user should click ✎ to fix). */
.skill-card-zh-flag {
  flex: 0 0 auto;
  font-size: 11px;
  color: #f59e0b;
  cursor: help;
  user-select: none;
}
/* ✎ edit button — subtle by default, more visible on hover. */
.skill-card-zh-edit {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1;
  padding: 2px 5px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity .15s, color .15s, border-color .15s, background .15s;
}
.skill-card:hover .skill-card-zh-edit { opacity: 0.85; }
.skill-card-zh-edit:hover {
  opacity: 1;
  color: var(--text);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
}
.skill-card-zh-edit:disabled { opacity: 0.3; cursor: wait; }

/* Inline editor (shown when the user clicks ✎). Replaces the static
   .skill-card-zh-text with a real <input> so we can actually accept
   keystrokes — Electron removed window.prompt, so we have to build it. */
.skill-card-zh-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  padding: 3px 6px;
  border-radius: 4px;
  outline: none;
  min-height: 22px;
  letter-spacing: 0.01em;
  transition: border-color .15s, background .15s;
}
.skill-card-zh-input:focus {
  border-color: var(--accent, #3b82f6);
  background: rgba(255, 255, 255, 0.08);
}
.skill-card-zh-input:disabled { opacity: 0.6; cursor: wait; }
.skill-card-zh-save,
.skill-card-zh-cancel {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
  padding: 3px 6px;
  cursor: pointer;
  transition: opacity .15s, color .15s, border-color .15s, background .15s;
}
.skill-card-zh-save { color: #22c55e; }
.skill-card-zh-save:hover {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
}
.skill-card-zh-cancel { color: #ef4444; }
.skill-card-zh-cancel:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
}
.skill-card-zh-save:disabled,
.skill-card-zh-cancel:disabled { opacity: 0.3; cursor: wait; }
.skill-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.5;
}
.skill-card-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.skill-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.skill-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.skill-card-actions .btn {
  font-size: 11px;
  padding: 2px 8px;
}
.skill-status-badge {
  font-size: 10px;
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: var(--fw-semibold);
}
.skill-status-badge.active { background: rgba(34,197,94,0.15); color: #22c55e; }
.skill-status-badge.archived { background: rgba(255,255,255,0.06); color: var(--text-muted); }

.skill-create-form.hidden { display: none !important; }

/* ── Curator info bar (inside skills list) ─────────────── */
.curator-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  gap: 12px;
}
.curator-info-stats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.curator-info-sep { color: var(--border); }
.curator-info-warn { color: #f59e0b; }

/* ── Patterns card ─────────────────────────────────────── */
.patterns-card {
  padding: 12px 14px;
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.15);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 12px;
}
.patterns-card-header { font-weight: var(--fw-semibold); margin-bottom: 8px; color: #f59e0b; }
.patterns-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.patterns-item:last-child { border-bottom: none; }

/* ── Empty skill card ──────────────────────────────────── */
.skill-card-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 28px 16px;
  font-size: 13px;
}

.sidebar-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
}

.info-value {
  font-size: 12px;
  color: var(--text-light);
  font-family: var(--font-mono);
  word-break: break-all;
  line-height: 1.4;
}

/* ── 会话列表 ── */
.session-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  margin: 0 calc(-1 * var(--space-md));
  padding: 0 var(--space-md);
}

.session-list-empty {
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
  padding: var(--space-lg) 0;
}

.session-item {
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  padding: 6px 8px;
  gap: 4px;
}
.session-item:hover {
  background: var(--bg-tertiary);
}
.session-item.active {
  background: rgba(var(--accent-rgb), 0.12);
}

.session-item-title {
  flex: 1;
  font-size: 12px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.streaming-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #4ade80);
  margin-right: 4px;
  vertical-align: middle;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.session-delete {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.session-item:hover .session-delete {
  opacity: 1;
}
.session-delete:hover {
  background: rgba(208, 49, 45, 0.15);
  color: var(--danger);
}

/* ========================================
   聊天区
   ======================================== */
#chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}

/* ========================================
   消息列表
   ======================================== */
#message-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-xl) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* ========================================
   欢迎页
   ======================================== */
.welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  width: 100%;
  max-width: var(--chat-max-width);
  box-sizing: border-box;
  animation: welcome-in 0.4s var(--ease-out) both;
}

.welcome-icon {
  margin-bottom: var(--space-sm);
}

.welcome-icon .avatar-welcome {
  display: block;
}

.welcome h1 {
  font-size: 22px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--text);
}

.subtitle {
  font-size: 13px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
}

.description {
  font-size: 14px;
  color: var(--text-light);
  max-width: 360px;
  line-height: 1.6;
  margin-top: var(--space-xs);
}

/* ========================================
   Runtime selector (welcome screen)
   ======================================== */
.runtime-choices {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
  justify-content: center;
}

.runtime-choice {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md);
  width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.runtime-choice:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}
.runtime-choice.active {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.runtime-choice:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-rgb), 0 0 0 4px var(--accent-dim);
}

.runtime-choice-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  font-size: 18px; font-weight: var(--fw-semibold);
  background: var(--bg-surface);
  color: var(--text-light);
}
.runtime-choice.active .runtime-choice-icon {
  background: var(--accent-dim);
  color: var(--accent-hover);
}
.runtime-choice-icon-opencode {
  font-family: var(--font-sans);
}

.runtime-choice-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.runtime-choice-name {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.runtime-choice-desc {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.runtime-badge {
  flex-shrink: 0;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  color: var(--text-muted);
  background: var(--bg-surface);
}
.runtime-badge.ok {
  color: var(--success);
  background: rgba(22, 163, 74, 0.10);
}
.runtime-badge.missing {
  color: var(--text-muted);
  background: var(--bg-surface);
}
.runtime-badge.detecting {
  color: var(--text-light);
  background: var(--bg-surface);
}
.runtime-badge-aide {
  /* AideAgent is always "available" — use accent tint to match the active card */
  color: var(--accent-hover);
  background: var(--accent-dim);
}

/* ========================================
   OpenCode input area (runtime switch)
   ======================================== */
#input-wrapper-opencode {
  /* Mirror #input-wrapper's layout so switching inputs doesn't shift the
     chat area. Must be a flex column container like #input-wrapper — without
     `display: flex`, the wrapper collapses in the column-flex #input-area.
     Visual values match #input-wrapper 1:1 so switching runtimes feels
     identical: same border weight, same pill radius, same inner padding. */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--input-max-width);
  margin: 0 auto;
  background: var(--bg-card);
  border: 1.8px solid var(--accent);
  border-radius: 16px;
  padding: 4px 6px 6px 4px;
  box-sizing: border-box;
  position: relative;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
#input-wrapper-opencode:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
#input-wrapper-opencode .input-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
}
#input-wrapper-opencode textarea {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  max-height: 200px;
  min-height: 48px;
  padding: 6px 4px;
}
#input-wrapper-opencode textarea::placeholder {
  color: var(--text-muted);
}
#info-bar-opencode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 0;
}
.opencode-model-name {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

/* ========================================
   消息气泡
   ======================================== */
.message {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--chat-max-width);
  padding: 0 var(--space-lg);
  box-sizing: border-box;
  animation: msg-in 0.25s var(--ease-out) both;
}

.message.user {
  align-items: flex-end;
}

.message.assistant {
}

.message-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  margin-bottom: 4px;
}
.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.message.user .message-label {
  justify-content: flex-end;
}

.message-bubble {
  padding: 10px 14px;
  border-radius: var(--radius-bubble);
  line-height: 1.65;
  font-size: 15px;
  font-family: var(--chat-font, var(--font-sans));
  overflow-wrap: break-word;
  display: inline-block;
  max-width: 100%;
  transition: box-shadow var(--duration-fast) var(--ease-out);
}

/* 用户消息：带强调色底 + 微光 */
.message.user .message-bubble {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-bottom-right-radius: var(--radius-sm);
}

/* hover 时气泡微微抬高 */
.message-bubble:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ========================================
   助手消息 · 无气泡内容区（markdown 自然流）
   ======================================== */
.message.assistant .message-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.message.assistant .message-text {
  line-height: 1.8;
  font-size: 15px;
  font-family: var(--chat-font, var(--font-sans));
  color: var(--text);
}

/* 消息操作栏（复制 / 下载） */
.message-actions {
  display: flex;
  gap: 4px;
  padding: 4px 0 0 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.message.assistant:hover .message-actions {
  opacity: 1;
}
.msg-action-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  transition: color 0.15s, border-color 0.15s;
}
.msg-action-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.msg-action-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 思考中指示符 */
.thinking-indicator {
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
  animation: blink 1s step-end infinite;
}

/* ========================================
   思考过程 + 工具调用 · 可折叠
   ======================================== */
.thinking-collapsible {
  margin: 0;
  font-size: 13px;
  font-family: var(--chat-font, var(--font-sans));
  border-left: 2px solid var(--border);
  padding-left: 10px;
}

/* KaTeX 回退：公式渲染失败时显示原始 LaTeX 源码，无红色错误 */
.katex-raw {
  color: var(--text);
  font-size: inherit;
  font-family: var(--font-mono);
  background: var(--bg-dim);
  padding: 0 4px;
  border-radius: 3px;
}

.thinking-collapsible summary {
  cursor: pointer;
  color: var(--text-light);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--fw-medium);
  user-select: none;
  padding: 2px 0;
}

.thinking-collapsible summary:hover {
  color: var(--text);
}

.thinking-collapsible[open] summary {
  margin-bottom: 6px;
}

.thinking-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 推理文字（thinking / reasoning_content） */
.thinking-reasoning {
  color: var(--text-light);
  font-size: 13px;
  font-family: var(--chat-font, var(--font-sans));
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.tool-entry {
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: rgba(34, 197, 94, 0.04);
  border: 1px solid rgba(34, 197, 94, 0.2);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}

.tool-entry-head {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tool-entry-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--accent, #3b82f6);
  border-top-color: transparent;
  flex-shrink: 0;
}
.tool-entry-icon.spinning {
  animation: spin-tool 0.8s linear infinite;
}
.tool-entry-icon.done {
  border: none;
  background: var(--success, #22c55e);
}
.tool-entry-icon.error {
  border: none;
  background: var(--danger, #ef4444);
}
@keyframes spin-tool {
  to { transform: rotate(360deg); }
}

.tool-entry-name {
  font-weight: var(--fw-semibold);
  color: var(--text);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.tool-entry-status {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
}

.tool-entry-args {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}

.tool-arg {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.tool-entry-args .tool-arg-key {
  color: var(--accent);
  margin-right: 2px;
  font-weight: var(--fw-semibold);
}

.tool-entry-args .tool-arg-val {
  color: var(--text-light);
}

.tool-entry-result {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}

/* 流式光标 */
.message.assistant.streaming .message-text::after {
  content: "▌";
  display: inline;
  animation: blink 0.8s step-end infinite;
  color: var(--accent);
  margin-left: 1px;
}

/* ========================================
   Markdown 内容（气泡 + 无气泡共用）
   ======================================== */
.message-bubble p,
.message-text p {
  margin: 0 0 var(--space-sm);
}

.message-bubble p:last-child,
.message-text p:last-child {
  margin-bottom: 0;
}

.message-bubble ul,
.message-bubble ol,
.message-text ul,
.message-text ol {
  margin: 4px 0 var(--space-sm);
  padding-left: 20px;
}

.message-bubble li,
.message-text li {
  margin-bottom: 2px;
}

.message-bubble h1,
.message-bubble h2,
.message-bubble h3,
.message-bubble h4,
.message-bubble h5,
.message-bubble h6,
.message-text h1,
.message-text h2,
.message-text h3,
.message-text h4,
.message-text h5,
.message-text h6 {
  margin: var(--space-md) 0 var(--space-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.message-bubble h1,
.message-text h1 { font-size: 19px; }
.message-bubble h2,
.message-text h2 { font-size: 17px; }
.message-bubble h3,
.message-text h3 { font-size: 16px; }
.message-bubble h4,
.message-text h4 { font-size: 15px; }

.message-bubble blockquote,
.message-text blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-md);
  color: var(--text-light);
  margin: var(--space-sm) 0;
  font-style: italic;
}

.message-bubble code,
.message-text code {
  font-family: 'Cascadia Code', 'Fira Code', Consolas, 'Microsoft YaHei UI', monospace;
  font-size: 0.9em;
  background: rgba(99, 102, 241, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
}

.message-bubble pre,
.message-text pre {
  margin: var(--space-sm) 0;
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.message-bubble pre code,
.message-text pre code {
  display: block;
  padding: var(--space-md);
  background: #f4f6fa;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
}

.message-bubble hr,
.message-text hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-md) 0;
}

.message-bubble table,
.message-text table {
  border-collapse: collapse;
  margin: var(--space-sm) 0;
  width: 100%;
  font-size: 13px;
}

.message-bubble th,
.message-bubble td,
.message-text th,
.message-text td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
}

.message-bubble th,
.message-text th {
  background: var(--bg-card);
  font-weight: var(--fw-semibold);
}

.message-bubble a,
.message-text a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(99, 102, 241, 0.3);
  transition: border-color var(--duration-instant);
}

.message-bubble a:hover,
.message-text a:hover {
  border-bottom-color: var(--accent);
}

/* ========================================
   输入区
   ======================================== */
#input-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm) 0;
  /* Anchor the #input-menu popover; the popover is positioned absolutely
     relative to the input area so it never participates in the flex layout
     (this is what caused the previous prompts-feature regression). */
  position: relative;
}

/* ========================================
   Input Menu Popover (Stage 1 — UI shell)
   ========================================
   Absolutely positioned above the input area. Anchored to the left so it
   aligns with the upload button. NEVER becomes a flex child — it is a
   sibling of #input-wrapper and positioned via `position: absolute`.

   z-index sits above the input area + info bar but below modals/overlays
   (skill-editor / settings modal all use higher z-index).
   */
.input-menu-popover {
  position: absolute;
  /* Anchor to the LEFT edge of #input-wrapper (which is centered
     horizontally inside the chat area). This puts the popover directly
     above the upload button. */
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 50;

  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 6px;

  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow:
    0 6px 16px rgba(20, 24, 50, 0.10),
    0 2px 4px rgba(20, 24, 50, 0.06);

  /* fade + slide in */
  transform-origin: bottom left;
  animation: input-menu-popover-in 140ms var(--ease-out, ease-out);
}

@keyframes input-menu-popover-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* a small caret pointing down at the upload button */
.input-menu-popover::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}

.input-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;

  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast, 120ms) ease-out;
}

.input-menu-item:hover {
  background: var(--accent-dim, rgba(129, 140, 248, 0.10));
}

.input-menu-item:focus-visible {
  outline: 2px solid var(--border-focus, var(--accent));
  outline-offset: -2px;
}

.input-menu-item svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.input-menu-item:hover svg {
  color: var(--accent);
}

#input-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--input-max-width);
  background: var(--bg-card);
  border: 1.8px solid var(--accent);
  /* Override the default 6px so the input box has a ChatGPT-style pill feel
     without changing --radius-sm (which ~7 other elements still rely on). */
  border-radius: 16px;
  padding: 4px 6px 6px 4px;
  box-sizing: border-box;
  /* Anchor the #input-menu popover; the popover sits just above the upload
     button column (left edge of this wrapper), not at the far left of the
     chat area. The popover is `position: absolute` so it never participates
     in the flex layout. */
  position: relative;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

#input-wrapper:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

.input-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
}

#prompt-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  font-family: var(--font-sans);
  resize: none;
  outline: none;
  max-height: 200px;
  min-height: 48px;
}

#prompt-input::placeholder {
  color: var(--text-muted);
}

#input-actions {
  display: flex;
  gap: 2px;
}

#send-btn {
  transition: color var(--duration-fast) var(--ease-out);
}

#send-btn:not(:disabled):hover {
  color: var(--accent);
}

#stop-btn {
  color: var(--danger);
}

/* ── Info bar (model name + reasoning toggle) ── */
#info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 0;
}

.task-indicator {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  cursor: pointer;
}
.task-indicator.has-active { color: #f59e0b; background: rgba(245,158,11,0.1); }

#info-model-name {
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

/* Reasoning toggle */
.toggle-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.reasoning-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.reasoning-toggle-label {
  font-size: 12px;
  color: var(--text-muted);
  user-select: none;
}

.toggle-switch-sm {
  position: relative;
  display: inline-block;
}

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

.toggle-switch-sm .toggle-slider {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  background: var(--bg-tertiary, rgba(255,255,255,0.12));
  border-radius: 9px;
  transition: background var(--duration-fast) var(--ease-out);
}

.toggle-switch-sm .toggle-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--text-muted, #888);
  border-radius: 50%;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.toggle-switch-sm input:checked + .toggle-slider {
  background: #3b82f6;
}

.toggle-switch-sm input:checked + .toggle-slider::after {
  transform: translateX(14px);
  background: #fff;
}

.toggle-switch-sm input:focus-visible + .toggle-slider {
  outline: 2px solid var(--accent, #9178dc);
  outline-offset: 2px;
}

/* ========================================
   Mode selector (OpenCode info-bar)
   ----------------------------------------
   Pill-shaped button that opens a popover menu
   for picking one of three OpenCode modes:
   default | build | plan. The selected option
   shows a check mark in the menu and updates
   the button label.
   ======================================== */
.mode-selector {
  position: relative;
  display: inline-block;
}
.mode-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: var(--fw-medium, 500);
  /* Light-purple chip with deep-black text — matches the model picker
     so the two info-bar buttons read as a unified pair. */
  color: #1a1a1a;
  background: #faf5ff;
  border: 1px solid #ddd6fe;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--duration-fast, 120ms) var(--ease-out, ease),
              border-color var(--duration-fast, 120ms) var(--ease-out, ease);
  font-family: inherit;
  line-height: 1.4;
}
.mode-button:hover {
  background: #f3e8ff;
  border-color: #c4b5fd;
}
.mode-button:focus-visible {
  outline: 2px solid var(--accent, #9178dc);
  outline-offset: 2px;
}
.mode-chevron {
  transition: transform var(--duration-fast, 120ms) var(--ease-out, ease);
  color: var(--text-muted);
}

/* ── OpenCode model picker (button + dropdown) ──
   Mirrors the mode-button style for visual consistency but with a longer
   label slot for model names. */
.opencode-model-picker {
  position: relative;
  display: inline-block;
}
.opencode-model-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: var(--fw-medium, 500);
  /* Light-purple chip with deep-purple text — makes the picker pop
     visually regardless of light/dark theme. */
  color: #1a1a1a;
  background: #faf5ff;
  border: 1px solid #ddd6fe;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--duration-fast, 120ms) var(--ease-out, ease),
              border-color var(--duration-fast, 120ms) var(--ease-out, ease);
  font-family: inherit;
  line-height: 1.4;
  max-width: 320px;
}
.opencode-model-button:hover {
  background: #f3e8ff;
  border-color: #c4b5fd;
}
.opencode-model-button:focus-visible {
  outline: 2px solid var(--accent, #9178dc);
  outline-offset: 2px;
}
.opencode-model-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
  /* Explicit color — without this, some browsers use the parent's
     inherited value but DevTools/Chromium can lose inheritance through
     the .mode-* class chain. */
  color: #1a1a1a;
}
.opencode-model-chevron {
  flex-shrink: 0;
  color: #1a1a1a;
  transition: transform var(--duration-fast, 120ms) var(--ease-out, ease);
}
.opencode-model-button[aria-expanded="true"] .opencode-model-chevron {
  transform: rotate(180deg);
}
.opencode-model-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 60;
  min-width: 240px;
  max-width: 360px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  margin: 0;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 13px;
}
.opencode-model-menu.hidden {
  display: none;
}
.opencode-model-menu li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--duration-fast, 120ms) var(--ease-out, ease);
  color: var(--text);
}
.opencode-model-menu li:hover {
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.04));
}
.opencode-model-menu li[aria-selected="true"] {
  background: var(--accent-soft, rgba(145, 120, 220, 0.15));
  color: var(--accent, #9178dc);
}
.opencode-model-menu .opencode-model-check {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #9178dc);
  opacity: 0;
}
.opencode-model-menu li[aria-selected="true"] .opencode-model-check {
  opacity: 1;
}
.opencode-model-menu .opencode-model-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opencode-model-menu .opencode-model-id {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.opencode-model-empty {
  cursor: default !important;
  color: var(--text-muted) !important;
  font-style: italic;
  justify-content: center !important;
}
.opencode-model-empty:hover {
  background: transparent !important;
}
/* Hide the secondary id descriptor in the model picker — the dropdown is
   compact enough that showing the full "provider/model-name" twice (button
   label + row subtitle) is redundant. Keep the structure (so we don't have
   to fork the renderer) but render only the friendly name. */
#opencode-model-menu .mode-desc {
  display: none !important;
}
.mode-selector.open .mode-chevron {
  transform: rotate(180deg);
}
.mode-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 60;
  min-width: 220px;
  padding: 4px;
  margin: 0;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  font-size: 13px;
}
.mode-menu.hidden {
  display: none;
}
.mode-menu li {
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
}
.mode-menu li:hover {
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.05));
}
.mode-check {
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--accent, #9178dc);
}
.mode-check::before {
  content: "✓";
  visibility: hidden;
}
.mode-menu li[aria-selected="true"] .mode-check::before {
  visibility: visible;
}
.mode-title {
  font-weight: 500;
  color: var(--text);
}
.mode-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ========================================
   文件上传预览
   ======================================== */
#file-preview-area {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  max-width: var(--chat-max-width);
  max-width: var(--chat-max-width);
  padding: 0 2px 6px;
  box-sizing: border-box;
}

#file-preview-area.hidden {
  display: none;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  max-width: 220px;
  animation: fileChipIn 0.2s ease-out;
}

@keyframes fileChipIn {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.file-chip-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-chip-icon img {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
}

.file-chip-icon svg {
  width: 14px;
  height: 14px;
  color: var(--text-light);
}

.file-chip-name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.file-chip-size {
  color: var(--text-muted);
  flex-shrink: 0;
}

.file-chip-remove {
  flex-shrink: 0;
  padding: 1px;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast) var(--ease-out);
}

.file-chip-remove:hover {
  color: var(--danger);
}

#upload-btn {
  flex-shrink: 0;
  margin-right: -2px;
}

#upload-btn:hover {
  color: var(--accent);
}

/* ========================================
   错误消息
   ======================================== */
.message.error .message-bubble {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--danger);
}

/* ========================================
   技能设置
   ======================================== */
.skills-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.skills-toolbar .btn-primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.skills-toolbar .btn-primary:hover {
  filter: brightness(1.08);
}

.skills-count {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.skills-loading {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 24px 0;
  text-align: center;
}

.skills-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 32px 0;
  text-align: center;
}

.skills-empty code {
  background: var(--bg-tertiary, rgba(255,255,255,0.05));
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

#panel-agent-skills .skills-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#panel-agent-skills .skill-card {
  padding: 12px;
  background: var(--bg-secondary, rgba(255,255,255,0.04));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: var(--radius-card, 8px);
  transition: border-color var(--duration-fast) var(--ease-out);
}

#panel-agent-skills .skill-card:hover {
  border-color: var(--accent-muted, rgba(145,120,220,0.3));
}

#panel-agent-skills .skill-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#panel-agent-skills .skill-card-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--fw-semibold);
  font-size: 0.95rem;
  color: var(--text-primary, #e8e8e8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

#panel-agent-skills .skill-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

#panel-agent-skills .skill-card-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#panel-agent-skills .skill-card-triggers {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Toggle switch */
.skill-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.skill-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.skill-toggle-slider {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background: var(--bg-tertiary, rgba(255,255,255,0.1));
  border-radius: 10px;
  transition: background var(--duration-fast) var(--ease-out);
}

.skill-toggle-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-muted, #888);
  border-radius: 50%;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.skill-toggle-input:checked + .skill-toggle-slider {
  background: var(--accent, #9178dc);
}

.skill-toggle-input:checked + .skill-toggle-slider::after {
  transform: translateX(16px);
  background: #fff;
}

.skill-toggle-input:focus-visible + .skill-toggle-slider {
  outline: 2px solid var(--accent, #9178dc);
  outline-offset: 2px;
}

/* ── MCP Settings ─────────────────────────────────────── */
.mcp-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mcp-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.mcp-add-form {
  background: var(--bg-secondary, rgba(255,255,255,0.04));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: var(--radius-card, 8px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mcp-add-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mcp-add-form .form-label {
  font-size: 0.85rem;
  font-weight: var(--fw-medium);
  color: var(--text-secondary, #aaa);
}

.mcp-add-form .form-input {
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: var(--font-mono, monospace);
}

.mcp-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.mcp-server-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mcp-server-card {
  background: var(--bg-secondary, rgba(255,255,255,0.04));
  border: 1px solid var(--border-color, rgba(255,255,255,0.08));
  border-radius: var(--radius-card, 8px);
  padding: 12px;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.mcp-server-card:hover {
  border-color: var(--accent-muted, rgba(145,120,220,0.3));
}

.mcp-server-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.mcp-server-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: var(--fw-semibold);
  color: var(--text-primary, #e8e8e8);
}

.mcp-server-status-dot {
  font-size: 14px;
  line-height: 1;
}

.mcp-server-status-label {
  font-size: 0.8rem;
  font-weight: var(--fw-normal);
  color: var(--text-muted, #888);
}

.mcp-server-actions {
  display: flex;
  gap: 6px;
}

.mcp-server-error {
  background: rgba(208, 49, 45, 0.08);
  border: 1px solid rgba(208, 49, 45, 0.15);
  border-radius: var(--radius-sm, 4px);
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-family: var(--font-mono, monospace);
  color: var(--danger, #d0312d);
  word-break: break-all;
}

.mcp-server-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--text-secondary, #aaa);
}

.settings-status {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.85rem;
}

.settings-status.hidden { display: none; }
.settings-status--success { background: rgba(52, 199, 89, 0.12); color: #34c759; border: 1px solid rgba(52, 199, 89, 0.25); }
.settings-status--error { background: rgba(208, 49, 45, 0.12); color: #d0312d; border: 1px solid rgba(208, 49, 45, 0.25); }

/* ========================================
   系统提示词配置面板
   ======================================== */
.prompt-settings {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
}

.prompt-profile-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.prompt-profile-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.prompt-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}

.prompt-profile-chip {
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.prompt-profile-chip:hover {
  border-color: var(--accent-dim);
  color: var(--text-primary);
}

.prompt-profile-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.prompt-editor {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.prompt-single-box {
  margin-bottom: 12px;
}

.prompt-content-textarea {
  width: 100%;
  min-height: 400px;
  max-height: 65vh;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
  box-sizing: border-box;
}

.prompt-content-textarea:focus {
  border-color: var(--accent);
}

.prompt-content-textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

/* Profile name input */
.prompt-editor-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.prompt-editor-name-label {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  white-space: nowrap;
}

.prompt-name-input {
  flex: 1;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.prompt-name-input:focus {
  border-color: var(--accent);
}

/* Bottom bar: enable / delete / save */
.prompt-editor-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.prompt-editor-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prompt-enable-btn {
  padding: 6px 20px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.prompt-enable-btn--off {
  background: #f5a623;
  color: #1a1a1a;
}
.prompt-enable-btn--off:hover {
  background: #e6951a;
}

.prompt-enable-btn--on {
  background: #34c759;
  color: #fff;
}
.prompt-enable-btn--on:hover {
  background: #2db84e;
}

.prompt-delete-btn {
  padding: 6px 16px;
  font-size: 12px;
  color: var(--danger, #d0312d);
  border: 1px solid rgba(208, 49, 45, 0.3);
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.prompt-delete-btn:hover {
  background: rgba(208, 49, 45, 0.08);
  border-color: var(--danger);
}
.prompt-delete-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════
   WeChat QR Login
   ════════════════════════════════════════════════ */

.wechat-qr-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
}
.wechat-qr-overlay.hidden { display: none; }
.wechat-qr-card {
  background: var(--bg-primary, #1a1a2e);
  border-radius: 12px; padding: 24px;
  text-align: center; min-width: 320px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  position: relative;
}
.wechat-qr-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: none; color: var(--text-secondary);
  font-size: 22px; cursor: pointer;
}
.wechat-qr-container { margin: 12px 0; min-height: 280px; display: flex; align-items: center; justify-content: center; }
.wechat-qr-status { font-size: 13px; color: var(--text-secondary); min-height: 20px; }
.wechat-qr-status.success { color: #22c55e; }
.wechat-qr-status.error { color: var(--danger-color, #ef4444); }

.wechat-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: var(--fw-medium);
}
.wechat-badge.connected { background: rgba(34,197,94,0.15); color: #22c55e; }
.wechat-badge.disconnected { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.wechat-badge.error { background: rgba(239,68,68,0.15); color: #ef4444; }

.wechat-login-status {
  font-size: 12px; margin-top: 6px; padding: 6px 10px; border-radius: 6px;
}
.wechat-login-status.info { background: rgba(79,142,247,0.1); color: var(--accent); }
.wechat-login-status.success { background: rgba(34,197,94,0.1); color: #22c55e; }
.wechat-login-status.error { background: rgba(239,68,68,0.1); color: #ef4444; }

.social-settings { padding: 8px 0; }
.social-platform-section {
  background: var(--bg-secondary, #1e1e2e); border-radius: 8px; padding: 16px; margin-bottom: 12px;
}
.social-platform-header { display: flex; align-items: center; justify-content: space-between; }

/* ── Session actions (export + delete) ── */
.session-item-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.session-item:hover .session-item-actions { opacity: 1; }
.session-export {
  background: none; border: none;
  color: var(--text-muted, #888);
  cursor: pointer; font-size: 14px; padding: 0 4px; line-height: 1;
}
.session-export:hover { color: var(--accent, #4f8ef7); }

/* ── Message edit button ── */
.msg-edit-btn {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--bg-secondary, #2a2a3a);
  border: 1px solid var(--border, #333);
  border-radius: 4px;
  color: var(--text-muted, #888);
  cursor: pointer; font-size: 12px;
  padding: 1px 5px;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.message.user { position: relative; }
.message.user:hover .msg-edit-btn { opacity: 1; }
.msg-edit-btn.saving { opacity: 1; color: var(--accent, #4f8ef7); }
.msg-edit-input {
  background: var(--bg-primary, #1a1a2e);
  border: 1px solid var(--accent-dim, #4f8ef755);
  border-radius: 6px;
  color: var(--text-primary, #eee);
  font: inherit; font-size: 13px;
  padding: 8px;
  resize: vertical;
}

/* ── L0 Token Budget Indicator ── */
.token-budget {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  transition: all 0.2s;
}
.token-budget.ok { color: var(--text-muted, #888); background: transparent; }
.token-budget.warn { color: #f59e0b; background: rgba(245,158,11,0.1); }
.token-budget.danger { color: #ef4444; background: rgba(239,68,68,0.12); font-weight: var(--fw-semibold); }

.context-usage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  margin-left: 4px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.context-usage.hidden { display: none; }
.context-usage-bar {
  width: 72px;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.context-usage-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--fill, 0%);
  background: currentColor;
  border-radius: 3px;
  transition: width 0.3s ease, background 0.2s ease;
}
.context-usage-text {
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}
.context-usage.ok { color: var(--text-muted, #888); }
.context-usage.warn { color: #f59e0b; }
.context-usage.danger { color: #ef4444; font-weight: var(--fw-semibold); }

/* ── Skill Card Actions ── */
#panel-agent-skills .btn-sm { font-size:11px; padding:2px 8px; border-radius:4px; border:1px solid var(--border-color,#333); background:var(--bg-primary,#1a1a2e); color:var(--text-secondary,#aaa); cursor:pointer; white-space:nowrap; }
#panel-agent-skills .btn-sm:hover { background:var(--hover-bg,#2a2a3e); color:var(--text-primary,#eee); }

/* ── Skill Editor Modal ── */
.skill-editor-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center;
}
.skill-editor-overlay.hidden { display:none; }
.skill-editor-card {
  background:var(--bg-primary,#1a1a2e);
  border:1px solid var(--border-color,#333);
  border-radius:12px;
  width:90%; max-width:720px; max-height:90vh;
  display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.skill-editor-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px 12px;
  border-bottom:1px solid var(--border-color,#333);
}
.skill-editor-header h3 { margin:0; font-size:16px; font-weight:600; }
.skill-editor-close {
  background:none; border:none; color:var(--text-secondary,#888);
  font-size:22px; cursor:pointer; padding:0 4px; line-height:1;
}
.skill-editor-close:hover { color:var(--text-primary,#eee); }
.skill-editor-body { padding:16px 20px; overflow-y:auto; flex:1; }
.skill-editor-footer {
  display:flex; justify-content:flex-end; gap:8px;
  padding:12px 20px 16px;
  border-top:1px solid var(--border-color,#333);
}

/* ── Resume banner (long-task interruption notice) ─────────── */
.resume-banner {
  margin:8px 12px; padding:10px 14px;
  background:var(--bg-warning, #2a1f0e); color:var(--text-warning, #e8c547);
  border:1px solid var(--border-warning, #5a4a1e); border-radius:8px;
  font-size:13px; line-height:1.5;
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px;
}
.resume-banner details { width:100%; margin-top:4px; }
.resume-banner summary { cursor:pointer; font-size:12px; opacity:.8; }
.resume-banner pre {
  margin:4px 0 0; padding:6px 8px;
  background:rgba(0,0,0,.3); border-radius:4px;
  font-size:11px; max-height:120px; overflow:auto;
  white-space:pre-wrap; word-break:break-all;
}
.resume-banner-close {
  margin-left:auto; background:none; border:none;
  color:inherit; cursor:pointer; font-size:14px;
  padding:0 2px; line-height:1; opacity:.6;
}
.resume-banner-close:hover { opacity:1; }