/* ============================================================
   styles.css — AI 工作室 · 多厂商主题 + 聊天 + 终端 + 侧栏
   ============================================================ */

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace;
  --rail-w: 240px;
  --sidebar-w: 330px;
  --radius: 16px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font); overflow: hidden; -webkit-font-smoothing: antialiased; }

[hidden] { display: none !important; }
button { font-family: inherit; }

/* ---------- 厂商主题变量 ---------- */
/* ChatGPT */
body[data-vendor="openai"] {
  --bg: #ffffff;
  --bg-alt: #f7f7f8;
  --text: #0d0d0d;
  --text-dim: #6e6e80;
  --border: #e5e5e5;
  --sidebar-bg: #fbfbfc;
  --accent: #10a37f;
  --accent-ink: #ffffff;
  --rail-bg: #f9f9f9;
  --bubble-user: #f4f4f4;
  --bubble-ai: #ffffff;
}
/* Claude */
body[data-vendor="claude"],
body[data-vendor="cowork"],
body[data-vendor="claudecode"] {
  --bg: #faf9f5;
  --bg-alt: #f0ede4;
  --text: #1f1e1d;
  --text-dim: #6e6a61;
  --border: #e3ded1;
  --sidebar-bg: #f4f1ea;
  --accent: #c46849;
  --accent-ink: #ffffff;
  --rail-bg: #f2efe8;
  --bubble-user: #ece7da;
  --bubble-ai: #fdfcf9;
}
/* Gemini */
body[data-vendor="gemini"] {
  --bg: #ffffff;
  --bg-alt: #eef2f6;
  --text: #1f1f1f;
  --text-dim: #5f6368;
  --border: #e2e6ea;
  --sidebar-bg: #f8fafd;
  --accent: #1a73e8;
  --accent-ink: #ffffff;
  --rail-bg: #f7f8fa;
  --bubble-user: #e8f1fd;
  --bubble-ai: #ffffff;
}
/* DeepSeek */
body[data-vendor="deepseek"] {
  --bg: #ffffff;
  --bg-alt: #f5f7fb;
  --text: #1a1a1a;
  --text-dim: #7d8592;
  --border: #e5e8ef;
  --sidebar-bg: #fbfcfe;
  --accent: #3964fe;
  --accent-ink: #ffffff;
  --rail-bg: #f7f8fc;
  --bubble-user: #eef2ff;
  --bubble-ai: #ffffff;
}
/* Codex */
body[data-vendor="codex"] {
  --bg: #ffffff;
  --bg-alt: #f6f6f6;
  --text: #0d0d0d;
  --text-dim: #6e6e6e;
  --border: #e5e5e5;
  --sidebar-bg: #fafafa;
  --accent: #000000;
  --accent-ink: #ffffff;
  --rail-bg: #f4f4f4;
  --bubble-user: #f0f0f0;
  --bubble-ai: #ffffff;
}
/* Terminal */
body[data-vendor="terminal"] {
  --bg: #0d1117;
  --bg-alt: #161b22;
  --text: #e6edf3;
  --text-dim: #7d8590;
  --border: #30363d;
  --sidebar-bg: #161b22;
  --accent: #10b981;
  --accent-ink: #052e1f;
  --rail-bg: #0d1117;
}

/* ================= 布局 ================= */
.app { display: flex; height: 100vh; width: 100vw; }

/* ================= 厂商侧栏 ================= */
.vendor-rail {
  width: var(--rail-w); flex: 0 0 var(--rail-w);
  background: var(--rail-bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.vendor-rail__head { padding: 16px 16px 12px; display: flex; align-items: center; }
.rail-brand { width: 28px; height: 28px; }
.vendor-rail__list { flex: 1; overflow-y: auto; padding: 4px 8px; }
.vendor-rail__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 11px; margin-bottom: 2px;
  border: none; background: transparent; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text); font-size: 13.5px; text-align: left;
  transition: background .15s;
}
.vendor-rail__item:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.vendor-rail__item.is-active { background: color-mix(in srgb, var(--text) 11%, transparent); font-weight: 600; }
.vendor-rail__icon { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; }
.vendor-rail__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vendor-rail__divider { height: 1px; background: var(--border); margin: 10px 8px; }
.vendor-rail__foot { padding: 10px; border-top: 1px solid var(--border); }
.vendor-rail__settings {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 8px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-dim); cursor: pointer;
}
.vendor-rail__settings:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }

/* ================= 主区 ================= */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.view { display: none; flex: 1; flex-direction: column; min-width: 0; }
.view.is-active { display: flex; }

/* ================= 聊天视图 ================= */
.chat-view { background: var(--bg); color: var(--text); }

.chat__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.chat__header-left { display: flex; align-items: center; }
.chat__header-actions { display: flex; gap: 6px; }
.text-btn {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text); font-size: 13px; cursor: pointer;
}
.text-btn:hover { background: var(--bg-alt); }

.model-switcher { position: relative; }
.model-switcher__btn {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text); cursor: pointer; font-size: 13.5px;
}
.model-switcher__icon { width: 18px; height: 18px; border-radius: 5px; }
.model-switcher__caret { color: var(--text-dim); }
.model-switcher__menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12); z-index: 30; overflow: hidden;
}
.model-switcher__menu-head { padding: 10px 14px; font-size: 12px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.model-switcher__menu-body { max-height: 320px; overflow-y: auto; padding: 6px; }
.model-switcher__cat { padding: 8px 8px 4px; font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.model-switcher__opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: none; background: transparent; border-radius: 8px;
  color: var(--text); cursor: pointer; font-size: 13px; text-align: left;
}
.model-switcher__opt:hover { background: var(--bg-alt); }
.model-switcher__opt.is-active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.model-switcher__opt .dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }

.chat__body { flex: 1; overflow-y: auto; }
.empty-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; text-align: center; }
.empty-state__logo { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 18px; }
.empty-state h2 { font-size: 26px; font-weight: 600; margin-bottom: 10px; }
.empty-state p { color: var(--text-dim); font-size: 14px; }

.messages { width: 100%; max-width: 760px; margin: 0 auto; padding: 8px 16px; }

.msg { display: flex; gap: 14px; padding: 16px 8px; }
.msg--user .msg__body { background: var(--bubble-user); border-radius: 18px 18px 4px 18px; padding: 10px 14px; max-width: 85%; margin-left: auto; }
.msg--user { justify-content: flex-end; }
.msg--ai { justify-content: flex-start; }
.msg__avatar { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; object-fit: cover; }
.msg__content { flex: 1; min-width: 0; font-size: 15px; line-height: 1.65; }
.msg--user .msg__content { flex: none; }

.msg__body { white-space: pre-wrap; word-break: break-word; }

/* 思考框 */
.think {
  border-left: 3px solid var(--border); margin-bottom: 12px; padding: 8px 12px;
  color: var(--text-dim); font-size: 13px; background: var(--bg-alt); border-radius: 0 8px 8px 0;
}
.think__head { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; cursor: pointer; }
.think__head .caret { font-size: 10px; transition: transform .2s; }
.think.collapsed .think__body { display: none; }
.think.collapsed .caret { transform: rotate(-90deg); }
.think__body { white-space: pre-wrap; }

.typing-cursor { display: inline-block; width: 2px; height: 1em; background: currentColor; margin-left: 2px; vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

.dots { display: inline-flex; gap: 4px; align-items: center; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); animation: bounce 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); opacity:.4; } 30% { transform: translateY(-4px); opacity:1; } }

/* ================= 输入区 ================= */
.composer { width: 100%; max-width: 760px; margin: 0 auto; padding: 10px 16px 6px; }
.composer__box {
  display: flex; align-items: flex-end; gap: 8px;
  border: 1px solid var(--border); border-radius: 26px; padding: 8px 8px 8px 18px;
  background: var(--bg); box-shadow: 0 2px 14px rgba(0,0,0,.05);
}
.composer__input { flex: 1; border: none; outline: none; resize: none; background: transparent; color: var(--text); font-size: 15px; font-family: inherit; line-height: 1.5; max-height: 160px; padding: 6px 0; }
.composer__tools { display: flex; align-items: center; gap: 4px; }
.composer__attach { width: 32px; height: 32px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.composer__attach:hover { background: var(--bg-alt); color: var(--text); }
.composer__send { width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--accent); color: var(--accent-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .15s; }
.composer__send:hover { opacity: .85; }
.composer__send:disabled { opacity: .4; cursor: not-allowed; }
.composer__hint { text-align: center; font-size: 11px; color: var(--text-dim); margin-top: 8px; }

/* ================= 终端视图（Codex CLI TUI 1:1） ================= */
.terminal-view { background: #0d0d0d; color: #e8e8e8; font-family: var(--mono); display: flex; flex-direction: column; position: relative; }

.tui-output {
  flex: 1; overflow-y: auto; padding: 14px 20px;
  font-size: 13px; line-height: 1.55;
}
.term-line { white-space: pre-wrap; word-break: break-word; }
.term-line .t-dim { color: #7d8590; }
.term-line .t-accent { color: #4ee6a8; }
.term-line .t-ok { color: #3fb950; }
.term-line .t-warn { color: #d29922; }
.term-line .t-err { color: #f85149; }

/* 头部/状态框 */
.tui-box {
  font-family: inherit; margin: 4px 0 10px; line-height: 1.5;
  color: #c9d1d9; font-size: 13px;
}
.tui-box b { color: #fff; }
.tui-box--sm { font-size: 12.5px; }

/* 工作块 */
.tui-work { margin: 2px 0; }
.tui-work__head { display: flex; gap: 6px; align-items: baseline; }
.tui-work__child {
  margin-left: 18px; padding: 6px 10px; color: #9da7b3;
  background: #16181d; border-radius: 6px; margin-top: 4px;
  white-space: pre-wrap; font-size: 12.5px;
}
.tui-spin {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid #4ee6a8; border-top-color: transparent;
  animation: tui-rotate .7s linear infinite; flex: 0 0 auto;
}
@keyframes tui-rotate { to { transform: rotate(360deg); } }

/* diff */
.tui-diff { margin: 4px 0; font-size: 12.5px; line-height: 1.5; }
.t-add { color: #3fb950; }
.t-del { color: #f85149; }

/* 底部 composer */
.tui-footer { border-top: 1px solid #26292f; padding: 8px 16px 6px; background: #0d0d0d; }
.tui-composer {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid #2f333a; border-radius: 10px; padding: 8px 12px;
  background: #12141a;
}
.tui-composer__prompt { color: #4ee6a8; font-weight: 700; line-height: 1.6; }
.tui-composer__input {
  flex: 1; background: transparent; border: none; outline: none; resize: none;
  color: #e8e8e8; font-family: var(--mono); font-size: 13px; line-height: 1.6;
}
.tui-statusbar {
  display: flex; gap: 8px; align-items: center;
  font-size: 11.5px; color: #7d8590; padding: 6px 4px 0;
}
.tui-statusbar__model { color: #4ee6a8; }
.tui-statusbar__hint { margin-left: auto; }

/* 命令/模型浮层菜单 */
.tui-menu {
  position: absolute; left: 24px; bottom: 92px; min-width: 380px; max-width: 520px;
  background: #16181d; border: 1px solid #2f333a; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); z-index: 40; overflow: hidden;
}
.tui-menu__title { padding: 8px 14px; font-size: 11px; color: #7d8590; border-bottom: 1px solid #26292f; }
.tui-menu__item {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 14px; cursor: pointer; font-size: 13px;
}
.tui-menu__item:hover, .tui-menu__item.is-active { background: #1f242c; }
.tui-menu__cmd { color: #e8e8e8; font-weight: 600; }
.tui-menu__desc { color: #7d8590; font-size: 12px; }

/* ================= Codex 任务制视图 ================= */
.codex-view { background: #ffffff; color: #0d0d0d; display: flex; flex-direction: column; }
body[data-vendor="codex"] .codex-view { --cx-accent: #000; }

.codex-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; border-bottom: 1px solid #ececec;
}
.codex-topbar__env { position: relative; }
.codex-env-btn {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border: 1px solid #e5e5e5; border-radius: 999px; background: #fff;
  font-size: 13.5px; font-weight: 600; cursor: pointer; color: #0d0d0d;
}
.codex-env-menu, .codex-model-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px;
  background: #fff; border: 1px solid #e5e5e5; border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0,0,0,.12); z-index: 40; padding: 6px;
}
.codex-menu-item {
  display: block; width: 100%; text-align: left; padding: 9px 12px;
  border: none; background: transparent; border-radius: 8px;
  font-size: 13.5px; cursor: pointer; color: #0d0d0d;
}
.codex-menu-item:hover { background: #f5f5f5; }
.codex-menu-item.is-active { background: #f0f0f0; font-weight: 600; }

.codex-main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

.codex-board { flex: 1; display: flex; }
.codex-board__inner { width: 100%; max-width: 720px; margin: 0 auto; padding: 56px 20px 40px; }
.codex-board__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.codex-board__logo { width: 40px; height: 40px; }
.codex-board__title { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; }
.codex-board__sub { color: #6e6e6e; font-size: 14.5px; margin-bottom: 28px; }

.codex-composer { position: relative; border: 1px solid #e5e5e5; border-radius: 20px; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.codex-composer__input {
  width: 100%; border: none; outline: none; resize: none; background: transparent;
  font-family: inherit; font-size: 15px; line-height: 1.55; padding: 16px 16px 4px; color: #0d0d0d;
}
.codex-composer__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 10px 16px; }
.codex-composer__hint { font-size: 11.5px; color: #9a9a9a; }
.codex-composer__actions { display: flex; gap: 8px; }
.codex-action {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px;
  border: none; border-radius: 999px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.codex-action--ask { background: #f0f0f0; color: #0d0d0d; }
.codex-action--ask:hover { background: #e6e6e6; }
.codex-action--code { background: #0d0d0d; color: #fff; }
.codex-action--code:hover { background: #2a2a2a; }

.codex-composer__model { position: absolute; top: 10px; right: 12px; }
.codex-model-btn {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid #e5e5e5; border-radius: 999px; background: #fafafa;
  font-size: 12px; font-weight: 600; cursor: pointer; color: #4a4a4a;
}

.codex-tasks { margin-top: 34px; }
.codex-tasks__head { font-size: 12px; font-weight: 600; color: #9a9a9a; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.codex-task {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: none; background: transparent; border-radius: 12px;
  cursor: pointer; text-align: left; font-size: 14px; color: #0d0d0d;
}
.codex-task:hover { background: #f7f7f7; }
.codex-task__mode {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.codex-task__mode--code { background: #0d0d0d; color: #fff; }
.codex-task__mode--ask { background: #e8f0fe; color: #1a73e8; }
.codex-task__title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.codex-task__status { font-size: 12px; color: #9a9a9a; }
.codex-task__status.is-running { color: #d97706; }
.codex-task__status.is-done { color: #10a37f; }

/* 任务详情 */
.codex-detail { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.codex-detail__head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid #ececec;
}
.codex-back { border: none; background: transparent; font-size: 13.5px; color: #6e6e6e; cursor: pointer; }
.codex-back:hover { color: #0d0d0d; }
.codex-detail__meta { flex: 1; min-width: 0; }
.codex-detail__title { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.codex-detail__status { font-size: 12px; color: #9a9a9a; }
.codex-pr-btn {
  padding: 7px 16px; border: none; border-radius: 999px;
  background: #0d0d0d; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.codex-detail__body { flex: 1; overflow-y: auto; padding: 20px; max-width: 820px; width: 100%; margin: 0 auto; }

.cx-step { margin-bottom: 14px; font-size: 14px; }
.cx-step__head { display: flex; align-items: center; gap: 8px; color: #4a4a4a; }
.cx-step__head.is-toggle { cursor: pointer; }
.cx-step__head code { background: #f3f3f3; padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }
.cx-step__body { margin: 8px 0 0 20px; }
.cx-caret { color: #9a9a9a; font-size: 11px; width: 12px; }
.cx-check { color: #10a37f; font-weight: 700; }
.cx-spin {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #0d0d0d; border-top-color: transparent;
  animation: tui-rotate .7s linear infinite;
}
.cx-file { padding: 4px 0; color: #6e6e6e; font-size: 13px; }
.cx-term {
  background: #0d0d0d; color: #d8d8d8; border-radius: 10px;
  padding: 12px 14px; font-family: var(--mono); font-size: 12.5px;
  white-space: pre-wrap; line-height: 1.55;
}
.cx-diff {
  background: #f8f8f8; border: 1px solid #ececec; border-radius: 10px;
  padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  overflow-x: auto; margin: 0;
}
.cx-diff__add { color: #10a37f; }
.cx-diff__del { color: #e5534b; }
.cx-diff__dim { color: #9a9a9a; }
.cx-step--text { color: #2a2a2a; line-height: 1.65; }
.cx-step--user { display: flex; justify-content: flex-end; }
.cx-step__user-bubble {
  background: #f0f0f0; border-radius: 16px 16px 4px 16px;
  padding: 9px 14px; max-width: 80%;
}
.cx-cite {
  display: inline-block; background: #f0f4ff; color: #1a73e8;
  border: 1px solid #dbe4ff; border-radius: 6px;
  font-size: 11.5px; padding: 1px 7px; margin: 0 2px; cursor: default;
  font-family: var(--mono);
}

.codex-detail__foot { border-top: 1px solid #ececec; padding: 12px 18px; }
.codex-followup { display: flex; gap: 10px; align-items: flex-end; max-width: 820px; margin: 0 auto; }
.codex-followup__input {
  flex: 1; border: 1px solid #e5e5e5; border-radius: 14px; outline: none; resize: none;
  font-family: inherit; font-size: 14px; padding: 10px 14px;
}
.codex-followup__send {
  padding: 10px 18px; border: none; border-radius: 999px;
  background: #0d0d0d; color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer;
}

/* ================= 右侧配置面板 ================= */
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--sidebar-bg); border-left: 1px solid var(--border);
  position: relative; display: flex; flex-direction: column;
  transition: margin-right .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
}
.sidebar.hidden { margin-right: calc(-1 * var(--sidebar-w)); transform: translateX(var(--sidebar-w)); }
.sidebar__inner { flex: 1; overflow-y: auto; padding: 16px; }
.sidebar__section { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.sidebar__section:last-child { border-bottom: none; }
.sidebar__title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); margin-bottom: 12px; }
.sidebar__note { font-size: 12px; color: var(--text-dim); margin-top: 8px; line-height: 1.5; }

.mode-switch { display: flex; background: var(--bg-alt); border-radius: 10px; padding: 3px; gap: 3px; }
.mode-switch__btn { flex: 1; border: none; background: transparent; padding: 8px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text-dim); }
.mode-switch__btn.is-active { background: var(--bg); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: var(--text); }
.field input, .field textarea, .field select {
  width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text); outline: none; resize: vertical;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }

.rec-btn { width: 100%; padding: 12px; border: none; border-radius: 10px; background: #ef4444; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .15s; }
.rec-btn:hover { opacity: .9; }

.sidebar__toggle {
  position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 48px; border: 1px solid var(--border); border-right: none;
  background: var(--sidebar-bg); border-radius: 8px 0 0 8px; cursor: pointer; color: var(--text-dim); font-size: 12px; line-height: 1;
  transition: left .35s cubic-bezier(.4,0,.2,1);
}
.sidebar.hidden .sidebar__toggle { left: 0; }

/* ================= 录屏浮层 ================= */
.rec-stop {
  position: fixed; top: 20px; right: 20px; z-index: 999;
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border: none; border-radius: 24px; background: #ef4444; color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(239,68,68,.4);
}
.rec-stop__dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.rec-preview { position: fixed; bottom: 20px; right: 20px; z-index: 999; width: 320px; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.rec-preview video { width: 100%; display: block; }

/* ================= 建议卡片 ================= */
.suggestions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; max-width: 640px; }
.suggest-card {
  padding: 10px 16px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--text); font-size: 13.5px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.suggest-card:hover { background: var(--bg-alt); border-color: var(--accent); }

/* ================= 提示条 ================= */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,.82); color: #fff; padding: 10px 20px; border-radius: 999px;
  font-size: 13.5px; opacity: 0; pointer-events: none; z-index: 1000;
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ================= Claude Code 桌面应用 ================= */
.cc-view { background: var(--bg); color: var(--text); }
.cc-layout { display: flex; height: 100%; min-height: 0; }

.cc-rail {
  width: 230px; flex: 0 0 230px;
  background: var(--rail-bg); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
}
.cc-rail__nav { padding: 12px 10px 4px; }
.cc-rail__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: none; background: transparent; border-radius: 8px;
  font-size: 13.5px; color: var(--text); cursor: pointer; text-align: left;
}
.cc-rail__item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.cc-rail__item.is-active { background: color-mix(in srgb, var(--text) 10%, transparent); font-weight: 600; }
.cc-rail__new {
  margin: 6px 10px 10px; padding: 9px 12px; border: none; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.cc-rail__new:hover { opacity: .9; }
.cc-rail__scroll { flex: 1; overflow-y: auto; padding: 0 10px 12px; }
.cc-rail__label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; padding: 12px 4px 5px; }
.cc-rail__task {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; border: none; background: transparent; border-radius: 8px;
  font-size: 13px; color: var(--text); cursor: pointer; text-align: left;
}
.cc-rail__task:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.cc-rail__task-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-rail__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: #b0aa9c; }
.cc-rail__dot.is-done { background: #6f9c7c; }
.cc-rail__dot.is-running { background: #d97706; }
.cc-rail__task.is-sched { color: var(--text-dim); cursor: pointer; }
.cc-rail__sched { font-size: 12px; }

.cc-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.cc-empty { margin: auto; text-align: center; padding: 40px; max-width: 560px; }
.cc-empty__logo { width: 52px; height: 52px; margin-bottom: 16px; }
.cc-empty__title { font-size: 24px; font-weight: 600; margin-bottom: 10px; }
.cc-empty__sub { color: var(--text-dim); font-size: 14px; margin-bottom: 24px; }
.cc-empty__examples { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cc-example {
  padding: 9px 15px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--text); font-size: 13px; cursor: pointer;
}
.cc-example:hover { background: var(--bg-alt); border-color: var(--accent); }

.cc-session { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cc-session__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
}
.cc-session__crumb { font-size: 14px; font-weight: 600; }
.cc-session__crumb span:first-child { color: var(--text-dim); font-weight: 400; }
.cc-session__branch { font-size: 11.5px; color: var(--text-dim); font-family: var(--mono); margin-top: 2px; }
.cc-session__head-actions { display: flex; gap: 6px; }
.cc-head-btn {
  padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; font-size: 12.5px; color: var(--text); cursor: pointer;
}
.cc-head-btn:hover { background: var(--bg-alt); }

.cc-session__body { flex: 1; display: flex; min-height: 0; }
.cc-thread { flex: 1; overflow-y: auto; padding: 20px 22px; }

.cc-msg { margin-bottom: 18px; font-size: 14.5px; }
.cc-msg__time { font-size: 11px; color: var(--text-dim); margin-top: 5px; }
.cc-msg--user { display: flex; flex-direction: column; align-items: flex-end; }
.cc-msg--user .cc-msg__bubble {
  background: var(--bubble-user); border-radius: 16px 16px 4px 16px;
  padding: 10px 14px; max-width: 78%;
}
.cc-msg--ai { display: grid; grid-template-columns: 22px 1fr; column-gap: 4px; }
.cc-msg__mark { color: var(--accent); font-size: 15px; }
.cc-msg__body { line-height: 1.7; }
.cc-inline { background: var(--bg-alt); border-radius: 5px; padding: 1px 6px; font-size: 13px; font-family: var(--mono); }

.cc-activity {
  display: flex; align-items: center; gap: 9px;
  margin: 10px 0 10px 26px; font-size: 13px; color: var(--text-dim);
}
.cc-activity--edit.is-toggle { cursor: pointer; }
.cc-activity--edit.is-toggle:hover .cc-activity__text { color: var(--text); }
.cc-activity__icon { font-size: 13px; }
.cc-activity__ok { color: #6f9c7c; font-weight: 700; margin-right: 4px; }
.cc-activity__spin {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--accent); border-top-color: transparent;
  animation: tui-rotate .7s linear infinite; margin-right: 6px; vertical-align: -1px;
}
.cc-add { color: #4a7d5b; font-weight: 600; }
.cc-del { color: #b4553f; font-weight: 600; }
.cc-cite {
  display: inline-block; background: #f3ede2; color: #8a5a36;
  border: 1px solid #e3d6c0; border-radius: 6px;
  font-size: 11.5px; padding: 1px 7px; margin: 0 2px; font-family: var(--mono);
}

.cc-side {
  width: 420px; flex: 0 0 420px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; background: var(--bg);
}
.cc-side__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 12.5px; font-weight: 600; font-family: var(--mono);
}
.cc-side__close { border: none; background: transparent; font-size: 18px; color: var(--text-dim); cursor: pointer; }
.cc-side__body { flex: 1; overflow: auto; padding: 12px; }

.cc-diff { font-family: var(--mono); font-size: 12px; line-height: 1.65; margin: 0; }
.cc-diff__row { display: flex; white-space: pre; }
.cc-diff__row--add { background: rgba(74,125,91,.13); }
.cc-diff__row--del { background: rgba(180,85,63,.13); }
.cc-diff__row--add .cc-diff__code { color: #356b47; }
.cc-diff__row--del .cc-diff__code { color: #a84a37; }
.cc-diff__ln { width: 34px; flex: 0 0 34px; text-align: right; padding-right: 10px; color: var(--text-dim); user-select: none; }

.cc-preview { padding: 8px; }
.cc-preview__page {
  border: 1px solid var(--border); border-radius: 12px; padding: 18px;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.cc-preview__h { font-size: 17px; font-weight: 600; margin-bottom: 14px; color: #1f1e1d; }
.cc-preview__label { font-size: 12.5px; font-weight: 600; margin: 14px 0 6px; color: #1f1e1d; }
.cc-preview__seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: 12.5px; }
.cc-preview__seg span { padding: 5px 16px; color: #6e6a61; }
.cc-preview__seg .is-on { background: #1f1e1d; color: #fff; }
.cc-preview__row { font-size: 12.5px; color: #6e6a61; }

.cc-composer { padding: 12px 18px 14px; border-top: 1px solid var(--border); }
.cc-composer__box {
  border: 1px solid var(--border); border-radius: 18px; background: var(--bg);
  box-shadow: 0 2px 12px rgba(0,0,0,.04); padding: 10px 12px 8px;
}
.cc-composer__input {
  width: 100%; border: none; outline: none; resize: none; background: transparent;
  font-family: inherit; font-size: 14.5px; line-height: 1.55; color: var(--text);
}
.cc-composer__bar { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.cc-chips { display: flex; gap: 6px; }
.cc-chip {
  padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-alt); font-size: 12px; font-weight: 600; color: var(--text-dim); cursor: pointer;
}
.cc-chip:hover { color: var(--text); border-color: var(--accent); }
.cc-send {
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 15px; cursor: pointer;
}

/* ================= Claude Cowork ================= */
.cowork-view { background: var(--bg); color: var(--text); display: flex; flex-direction: column; }

.cowork-tabs {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
}
.cowork-tab {
  padding: 8px 18px; border: none; background: transparent; border-radius: 10px;
  font-size: 14px; color: var(--text-dim); cursor: pointer; font-weight: 500;
}
.cowork-tab:hover { background: var(--bg-alt); }
.cowork-tab.is-active { background: var(--bubble-user); color: var(--text); font-weight: 600; }
.cowork-tabs__right { margin-left: auto; }

.cowork-main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

.cowork-board { flex: 1; display: flex; }
.cowork-board__inner { width: 100%; max-width: 720px; margin: 0 auto; padding: 52px 20px 40px; }
.cowork-board__title { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.cowork-board__sub { color: var(--text-dim); font-size: 14.5px; margin-bottom: 26px; }

.cowork-composer { border: 1px solid var(--border); border-radius: 20px; background: var(--bg); box-shadow: 0 4px 18px rgba(0,0,0,.05); }
.cowork-composer__input {
  width: 100%; border: none; outline: none; resize: none; background: transparent;
  font-family: inherit; font-size: 15px; line-height: 1.6; padding: 16px 16px 6px; color: var(--text);
}
.cowork-composer__row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 12px; flex-wrap: wrap; gap: 8px; }
.cowork-connectors { display: flex; gap: 6px; flex-wrap: wrap; }
.cowork-connector {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; font-size: 12.5px; color: var(--text-dim); cursor: pointer;
}
.cowork-connector.is-on { background: var(--bubble-user); color: var(--text); border-color: var(--accent); }
.cowork-composer__actions { display: flex; gap: 8px; margin-left: auto; }
.cowork-schedule {
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; font-size: 13px; color: var(--text-dim); cursor: pointer;
}
.cowork-schedule.is-on { color: var(--accent); border-color: var(--accent); }
.cowork-start {
  padding: 9px 18px; border: none; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.cowork-start:hover { opacity: .9; }

.cowork-list { margin-top: 30px; }
.cowork-list__head { font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.cowork-task {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 12px 14px; border: none; background: transparent; border-radius: 12px;
  cursor: pointer; text-align: left; font-size: 14px; color: var(--text);
}
.cowork-task:hover { background: var(--bg-alt); }
.cowork-task__title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cowork-task__status { font-size: 12px; color: var(--text-dim); }
.cowork-task__status.is-done { color: #6f9c7c; }
.cowork-task__status.is-running { color: #d97706; }

.cowork-detail { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cowork-detail__head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
}
.cowork-back { border: none; background: transparent; font-size: 13.5px; color: var(--text-dim); cursor: pointer; }
.cowork-back:hover { color: var(--text); }
.cowork-detail__meta { flex: 1; min-width: 0; }
.cowork-detail__title { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cowork-detail__status { font-size: 12px; color: var(--text-dim); }
.cowork-approve-btn {
  padding: 7px 16px; border: none; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}

.cowork-detail__body { flex: 1; display: flex; min-height: 0; }
.cowork-activity { flex: 1; overflow-y: auto; padding: 20px 22px; }

.cw-act { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13.5px; color: var(--text-dim); }
.cw-act__icon { font-size: 14px; }
.cw-act--user { justify-content: flex-end; }
.cw-act--user .cw-act__bubble {
  background: var(--bubble-user); border-radius: 16px 16px 4px 16px;
  padding: 9px 14px; max-width: 80%; color: var(--text); font-size: 14px;
}
.cw-ok { color: #6f9c7c; font-weight: 700; margin-right: 5px; }
.cw-spin {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--accent); border-top-color: transparent;
  animation: tui-rotate .7s linear infinite; margin-right: 7px; vertical-align: -1px;
}

.cowork-deliverable {
  width: 480px; flex: 0 0 480px; border-left: 1px solid var(--border);
  overflow-y: auto; padding: 20px; background: var(--bg);
}
.cw-memo { max-width: 100%; }
.cw-memo__title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.cw-memo__meta { font-size: 11.5px; color: var(--text-dim); margin-bottom: 14px; line-height: 1.5; }
.cw-memo__summary {
  font-size: 13px; line-height: 1.65; color: var(--text);
  background: var(--bg-alt); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
}
.cw-clause { border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; margin-bottom: 10px; background: var(--bubble-ai); }
.cw-clause__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cw-clause__num { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text); }
.cw-clause__name { font-size: 13px; font-weight: 600; flex: 1; }
.cw-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.cw-badge--high { background: #fbe7e2; color: #b4553f; }
.cw-badge--medium { background: #fdf1dc; color: #a06a1c; }
.cw-badge--low { background: #e8f0e6; color: #4a7d5b; }
.cw-badge--none { background: #eeece5; color: #6e6a61; }
.cw-action { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); }
.cw-action--high { color: #b4553f; border-color: #e5c4bc; }
.cw-action--medium { color: #a06a1c; border-color: #ecd9b4; }
.cw-action--low { color: #4a7d5b; border-color: #c9dcc6; }
.cw-action--none { color: #6e6a61; }
.cw-clause__note { font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }

.cowork-detail__foot { border-top: 1px solid var(--border); padding: 12px 18px; }
.cowork-followup { display: flex; gap: 10px; align-items: flex-end; max-width: 820px; margin: 0 auto; }
.cowork-followup__input {
  flex: 1; border: 1px solid var(--border); border-radius: 14px; outline: none; resize: none;
  font-family: inherit; font-size: 14px; padding: 10px 14px; background: var(--bg); color: var(--text);
}
.cowork-followup__send {
  padding: 10px 18px; border: none; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer;
}

/* ================= 多页面骨架 ================= */
.pagenav {
  position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 100;
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.pagenav__home {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; color: var(--text-dim);
}
.pagenav__home:hover { background: var(--bg-alt); color: var(--text); }
.pagenav__links { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.pagenav__link {
  display: flex; align-items: center; gap: 7px; padding: 5px 11px;
  border-radius: 999px; text-decoration: none; color: var(--text-dim);
  font-size: 12.5px; white-space: nowrap;
}
.pagenav__link img { width: 16px; height: 16px; border-radius: 4px; }
.pagenav__link:hover { background: var(--bg-alt); color: var(--text); }
.pagenav__link.is-active { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); font-weight: 600; }
.pagenav__settings {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: none; border-radius: 8px;
  background: transparent; color: var(--text-dim); cursor: pointer;
}
.pagenav__settings:hover { background: var(--bg-alt); color: var(--text); }

body.has-pagenav { padding-top: 48px; }
.page-main { display: flex; width: 100vw; height: calc(100vh - 48px); overflow: hidden; }
.page-main .view { flex: 1; min-width: 0; }

/* 导航栏隐藏态 */
.pagenav { transition: transform .3s cubic-bezier(.4,0,.2,1); }
.pagenav__hide {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: none; border-radius: 8px;
  background: transparent; color: var(--text-dim); cursor: pointer;
}
.pagenav__hide:hover { background: var(--bg-alt); color: var(--text); }
body.nav-hidden { padding-top: 0; }
body.nav-hidden .pagenav { transform: translateY(-100%); }
body.nav-hidden .page-main { height: 100vh; }
body.nav-hidden .sidebar { top: 0; }
.nav-restore {
  position: fixed; top: 8px; left: 8px; z-index: 101;
  width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text-dim); cursor: pointer;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.nav-restore:hover { color: var(--text); }
body.nav-hidden .nav-restore { display: flex; }

/* 侧栏在子页面改为固定定位 */
.sidebar {
  position: fixed; top: 48px; right: 0; bottom: 0; width: var(--sidebar-w);
  flex: none; margin-right: 0;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.sidebar.hidden { margin-right: 0; transform: translateX(100%); }
.sidebar.hidden .sidebar__toggle { left: -14px; }

/* ================= 主页（hub） ================= */
body.hub { overflow: auto; background: var(--bg); color: var(--text); }
.hub__wrap { max-width: 960px; margin: 0 auto; padding: 64px 24px 40px; }
.hub__head { text-align: center; margin-bottom: 40px; }
.hub__title { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.hub__sub { color: var(--text-dim); font-size: 14.5px; }
.hub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.hub-card {
  display: block; border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 20px; text-decoration: none; color: var(--text); background: var(--bg);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.hub-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.hub-card__icon { width: 38px; height: 38px; margin-bottom: 14px; display: block; }
.hub-card__name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.hub-card__desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
.hub__foot { text-align: center; margin-top: 44px; font-size: 12.5px; color: var(--text-dim); }

/* ================= 响应式 ================= */
@media (max-width: 1000px) {
  :root { --rail-w: 60px; --sidebar-w: 280px; }
  .vendor-rail__label { display: none; }
  .vendor-rail__item { justify-content: center; }
  .rail-brand { margin: 0 auto; }
  .vendor-rail__head { justify-content: center; }
}
@media (max-width: 720px) {
  .sidebar { display: none; }
}