/* ============================================================
   Claude 主题 — 1:1 还原 claude.ai 当前界面
   浅色: 暖白画布 #fcfcfb / 侧栏同色 / anthropic-sans
   深色: 画布 #1a1a18 / 侧栏 #161614
   ============================================================ */
body.theme-claude {
  --font-body: "anthropic-sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
  --font-display: inherit;

  --bg-main: #fcfcfb;
  --bg-sidebar: #fcfcfb;
  --bg-panel: #ffffff;
  --bg-menu: #ffffff;
  --fg: #0b0b0b;
  --fg-dim: #52514e;
  --text-tertiary: #898781;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.12);
  --accent: #d97757;

  --sidebar-w: 288px;
  --chat-w: 672px;

  --item-hover: rgba(0, 0, 0, 0.04);
  --item-active: rgba(0, 0, 0, 0.08);
  --radius-btn: 9px;
  --radius-item: 9px;

  --newchat-fg: #0b0b0b;
  --newchat-bg: transparent;
  --newchat-bg-hover: rgba(0, 0, 0, 0.04);
  --newchat-border: none;

  --avatar-bg: #dcd9d1;
  --avatar-fg: #0b0b0b;
  --avatar-radius: 50%;

  --user-bubble: #f0eee9;
  --user-bubble-fg: #0b0b0b;
  --user-bubble-radius: 18px;
  --user-bubble-pad: 12px 16px;

  --composer-bg: #fcfcfb;
  --composer-border: 1px solid rgba(0, 0, 0, 0.1);
  --composer-radius: 20px;
  --composer-shadow: 0 4px 20px rgba(0, 0, 0, 0.035);
  --composer-focus: rgba(0, 0, 0, 0.15);

  --send-bg: #0b0b0b;
  --send-fg: #ffffff;
  --send-radius: 50%;

  --seg-bg: rgba(0, 0, 0, 0.04);
  --seg-active-bg: #ffffff;
  --seg-active-fg: #0b0b0b;

  --search-bg: rgba(0, 0, 0, 0.04);

  --code-bg: #f7f6f3;
  --code-bar-bg: #efede8;
  --code-inline-bg: rgba(0, 0, 0, 0.04);
  --scrollbar: #d8d4cc;
  --user-avatar: #d97757;
}
html[data-theme="dark"] body.theme-claude {
  --bg-main: #1a1a18;
  --bg-sidebar: #161614;
  --bg-panel: #282826;
  --bg-menu: #2a2a28;
  --fg: #f5f4f1;
  --fg-dim: #a8a59e;
  --text-tertiary: #7a7872;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --accent: #d98c6a;
  --item-hover: rgba(255, 255, 255, 0.05);
  --item-active: rgba(255, 255, 255, 0.09);
  --newchat-bg-hover: rgba(255, 255, 255, 0.05);
  --newchat-border: none;
  --avatar-bg: #57544a;
  --avatar-fg: #f0ede4;
  --user-bubble: #2e2d2a;
  --user-bubble-fg: #f5f4f1;
  --composer-bg: #282826;
  --composer-border: 1px solid rgba(255, 255, 255, 0.1);
  --composer-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  --composer-focus: rgba(255, 255, 255, 0.2);
  --seg-bg: rgba(255, 255, 255, 0.06);
  --seg-active-bg: #3d3c38;
  --seg-active-fg: #f5f4f1;
  --search-bg: rgba(255, 255, 255, 0.05);
  --code-bg: #161614;
  --code-bar-bg: #1f1e1c;
  --code-inline-bg: rgba(255, 255, 255, 0.08);
  --scrollbar: rgba(255, 255, 255, 0.16);
  --user-avatar: #c96442;
}

body.theme-claude { font-family: var(--font-body); background: var(--bg-main); color: var(--fg); -webkit-font-smoothing: antialiased; }

/* ---- 侧栏 ---- */
body.theme-claude .sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border); }
/* 官网收起侧栏时完整移出页面，只在主区保留“展开侧边栏”按钮。 */
body.theme-claude.sidebar-collapsed .sidebar {
  width: var(--sidebar-w, 288px);
  margin-left: calc(var(--sidebar-w, 288px) * -1);
}

/* 侧栏头部: Claude 图标 + 搜索 + 收起 */
body.theme-claude .sidebar-header { padding: 10px 8px 8px; }
body.theme-claude .brand { gap: 8px; cursor: pointer; }
body.theme-claude .brand-name { display: none; }
body.theme-claude .brand-icon { color: var(--accent); }
body.theme-claude .brand-icon svg, body.theme-claude .brand-icon .claude-logo-img { width: 24px; height: 24px; }
body.theme-claude .header-btns { gap: 2px; }
body.theme-claude .header-btns .icon-btn {
  width: 32px; height: 32px; border-radius: 8px; color: var(--fg-dim);
}
body.theme-claude .header-btns .icon-btn:hover { background: var(--item-hover); color: var(--fg); }

/* 新对话按钮 — 与导航链接相同样式 */
body.theme-claude .new-chat-btn {
  border: none; border-radius: 9px; padding: 6px 16px;
  color: var(--newchat-fg); font-size: 12px;
  margin: 0 8px; width: calc(100% - 16px); height: 32px;
}
body.theme-claude .new-chat-btn:hover { background: var(--newchat-bg-hover); }
body.theme-claude .new-chat-btn .plus { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 16px; line-height: 1; }

/* 导航链接 */
body.theme-claude .sidebar-nav { padding: 4px 8px; }
body.theme-claude .snav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 6px 16px; border: none; background: none; text-align: left;
  border-radius: 9px; font-size: 12px; color: var(--fg); height: 32px;
}
body.theme-claude .snav-item:hover { background: var(--item-hover); }
body.theme-claude .snav-item.active { background: var(--item-active); }
body.theme-claude .snav-item svg { color: var(--fg-dim); flex-shrink: 0; width: 16px; height: 16px; }

/* 搜索框 */
body.theme-claude .sidebar-search {
  /* 官方 Claude 不在侧栏常驻输入框，搜索由顶部按钮打开独立对话框。 */
  display: none;
  background: var(--search-bg); margin: 4px 8px;
  border-radius: 9px; padding: 6px 12px;
}
body.theme-claude .sidebar-search:hover, body.theme-claude .sidebar-search:focus-within { background: var(--item-hover); }

/* 官方 Search：独立、可键盘导航的搜索对话框 */
body.theme-claude .claude-search-layer { align-items: flex-start; padding-top: min(96px, 12vh); background: rgba(0, 0, 0, .24); }
body.theme-claude .claude-search-dialog {
  position: relative; width: min(580px, calc(100vw - 32px)); max-height: min(640px, 76vh); overflow: hidden;
  border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg-panel); color: var(--fg);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .2);
}
body.theme-claude .claude-search-heading { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px 8px; font-size: 15px; font-weight: 600; }
body.theme-claude .claude-search-mode { color: var(--fg-dim); font-size: 11px; font-weight: 400; }
body.theme-claude .claude-search-input-wrap { display: flex; align-items: center; gap: 9px; margin: 0 12px 10px; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 9px; color: var(--fg-dim); }
body.theme-claude .claude-search-input-wrap:focus-within { border-color: var(--accent); }
body.theme-claude .claude-search-input-wrap svg { width: 16px; height: 16px; flex: 0 0 auto; }
body.theme-claude .claude-search-input-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; font-size: 13px; }
body.theme-claude .claude-search-close { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--fg-dim); font-size: 19px; line-height: 1; cursor: pointer; }
body.theme-claude .claude-search-close:hover { background: var(--item-hover); color: var(--fg); }
body.theme-claude .claude-search-results { max-height: min(470px, 54vh); overflow-y: auto; padding: 0 8px 8px; }
body.theme-claude .claude-search-result { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--fg); text-align: left; cursor: pointer; }
body.theme-claude .claude-search-result:hover, body.theme-claude .claude-search-result.selected { background: var(--item-hover); }
body.theme-claude .claude-search-result-icon { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 7px; background: var(--item-hover); color: var(--accent); font-size: 14px; flex: 0 0 auto; }
body.theme-claude .claude-search-result-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
body.theme-claude .claude-search-result-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 550; }
body.theme-claude .claude-search-result-copy small, body.theme-claude .claude-search-result-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-dim); font-size: 11px; }
body.theme-claude .claude-search-result-type { max-width: 120px; flex: 0 0 auto; }
body.theme-claude .claude-search-empty { padding: 28px 16px; color: var(--fg-dim); font-size: 13px; text-align: center; }
body.theme-claude .claude-search-hints { display: flex; align-items: center; gap: 6px; padding: 9px 16px 12px; border-top: 1px solid var(--border); color: var(--fg-dim); font-size: 11px; }
body.theme-claude .claude-search-hints span:not(:first-child) { margin-left: 8px; }
body.theme-claude .claude-search-hints kbd { min-width: 21px; padding: 2px 5px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--item-hover); color: var(--fg); text-align: center; font: inherit; }
body.theme-claude .claude-search-actions-btn { margin-left: 8px; padding: 2px 5px; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
body.theme-claude .claude-search-actions-btn:hover:not(:disabled), body.theme-claude .claude-search-actions-btn:focus-visible { background: var(--item-hover); color: var(--fg); }
body.theme-claude .claude-search-actions-btn:disabled { color: var(--fg-dim); cursor: default; }
body.theme-claude .claude-search-actions-menu { z-index: 20; min-width: 168px; }
html[data-theme="dark"] body.theme-claude .claude-search-layer { background: rgba(0, 0, 0, .48); }

/* 会话列表标题 + 分组按钮 */
body.theme-claude .session-list-title {
  padding: 16px 16px 4px; font-size: 12px; color: var(--fg);
  font-weight: 500; display: flex; align-items: center; justify-content: space-between;
}
body.theme-claude .session-list-title .group-by-btn {
  font-size: 11px; color: var(--text-tertiary); border: none; background: none;
  padding: 2px 6px; border-radius: 5px; display: flex; align-items: center; gap: 4px;
}
body.theme-claude .session-list-title .group-by-btn:hover { background: var(--item-hover); color: var(--fg-dim); }
body.theme-claude .session-list-title .claude-recent-toggle {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex: 1;
  padding: 2px 5px; border: 0; border-radius: 5px; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
body.theme-claude .session-list-title .claude-recent-toggle:hover { background: var(--item-hover); }
body.theme-claude .claude-recent-toggle span:last-child { color: var(--fg-dim); font-size: 15px; line-height: 1; }
body.theme-claude .claude-recents-collapsed { display: none; }

/* 会话列表项 */
body.theme-claude .session-list { padding: 0 8px; }
body.theme-claude .session-item {
  padding: 6px 16px; border-radius: 9px; font-size: 12px; height: 32px;
}
body.theme-claude .session-item:hover { background: var(--item-hover); }
body.theme-claude .session-item.active { background: var(--item-active); }

/* 会话分组标题 (按日期分组) */
body.theme-claude .session-group-header {
  padding: 12px 16px 2px; font-size: 11px; color: var(--text-tertiary); font-weight: 500;
}

/* 侧栏底部 */
body.theme-claude .sidebar-footer { padding: 0; border-top: 1px solid var(--border); }
body.theme-claude .user-chip {
  padding: 16px; border-radius: 0; display: flex; align-items: center; gap: 10px;
}
body.theme-claude .user-chip:hover { background: var(--item-hover); }
body.theme-claude .user-chip-avatar { width: 28px; height: 28px; font-size: 12px; }
body.theme-claude .user-chip-name { font-size: 13px; font-weight: 500; }
body.theme-claude .user-chip-balance { font-size: 11px; }
body.theme-claude .sidebar-footer-extra {
  display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 12px;
}
body.theme-claude .sidebar-footer-extra .apps-btn {
  font-size: 12px; color: var(--text-tertiary); border: none; background: none;
  padding: 4px 8px; border-radius: 6px; display: flex; align-items: center; gap: 6px;
}
body.theme-claude .sidebar-footer-extra .apps-btn:hover { background: var(--item-hover); color: var(--fg-dim); }
body.theme-claude .sidebar-footer-extra .upgrade-link {
  font-size: 12px; color: var(--text-tertiary); text-decoration: underline; text-underline-offset: 3px;
}
body.theme-claude .sidebar-footer-extra .upgrade-link:hover { color: var(--fg-dim); }

/* ---- 顶栏 ---- */
body.theme-claude .topbar { min-height: 53px; padding: 10px 16px; }
body.theme-claude .topbar-wordmark { display: flex; font-size: 18px; font-weight: 600; color: var(--fg); }
body.theme-claude .topbar .model-picker { display: none; }
body.theme-claude .session-title-bar { display: block; font-size: 13px; color: var(--fg-dim); }
body.theme-claude .composer-picker { display: block; }
body.theme-claude .claude-upgrade-banner {
  display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 18px;
  border-bottom: 1px solid var(--border); background: var(--bg-panel); color: var(--fg-dim);
  font-size: 12px;
}
body.theme-claude .claude-upgrade-banner.hidden { display: none; }
body.theme-claude .claude-upgrade-banner a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
body.theme-claude .claude-upgrade-plan { font-weight: 650; color: var(--fg); }
body.theme-claude .claude-upgrade-banner button {
  width: 24px; height: 24px; margin-left: auto; border: 0; border-radius: 6px; background: transparent;
  color: var(--fg-dim); font-size: 18px; line-height: 1; cursor: pointer;
}
body.theme-claude .claude-upgrade-banner button:hover { background: var(--item-hover); color: var(--fg); }

/* ---- Chats / Projects / Artifacts 管理页 ---- */
body.theme-claude .workspace-view { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: var(--bg-main); }
body.theme-claude .workspace-inner { width: min(1040px, calc(100% - 64px)); margin: 0 auto; padding: 48px 0 72px; }
body.theme-claude .workspace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
body.theme-claude .workspace-heading h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
body.theme-claude .workspace-heading p { margin: 7px 0 0; color: var(--fg-dim); font-size: 13px; }
body.theme-claude .workspace-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
body.theme-claude .workspace-primary-btn, body.theme-claude .workspace-secondary-btn, body.theme-claude .workspace-danger-btn {
  border: 1px solid var(--border-strong); border-radius: 9px; padding: 8px 13px; background: transparent; color: var(--fg); font-size: 12px; cursor: pointer;
}
body.theme-claude .workspace-primary-btn { background: var(--accent); border-color: var(--accent); color: #fff; }
body.theme-claude .workspace-secondary-btn:hover, body.theme-claude .workspace-primary-btn:hover { filter: brightness(.97); }
body.theme-claude .workspace-danger-btn { color: #c0392b; border-color: rgba(192,57,43,.35); }
body.theme-claude .workspace-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
body.theme-claude .workspace-search { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 440px; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 9px; color: var(--fg-dim); }
body.theme-claude .workspace-search:focus-within { border-color: var(--accent); }
body.theme-claude .workspace-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; font-size: 13px; }
body.theme-claude .workspace-filter { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-dim); font-size: 12px; }
body.theme-claude .workspace-filter select { padding: 8px 9px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-main); color: var(--fg); font: inherit; }
body.theme-claude .workspace-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-panel); }
body.theme-claude .workspace-table-head, body.theme-claude .workspace-table-row { display: grid; grid-template-columns: minmax(260px, 1.8fr) minmax(130px, .8fr) 130px 40px; align-items: center; gap: 14px; padding: 13px 17px; }
body.theme-claude .workspace-table-head { color: var(--fg-dim); border-bottom: 1px solid var(--border); font-size: 11px; }
body.theme-claude .workspace-table-row { min-height: 65px; border-bottom: 1px solid var(--border); color: var(--fg-dim); font-size: 12px; cursor: pointer; }
body.theme-claude .workspace-table-row:last-child { border-bottom: 0; }
body.theme-claude .workspace-table-row:hover { background: var(--item-hover); }
body.theme-claude .workspace-chat-name, body.theme-claude .workspace-chat-name > span:last-child { min-width: 0; }
body.theme-claude .workspace-chat-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.theme-claude .workspace-chat-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font-weight: 550; }
body.theme-claude .workspace-chat-name small { flex-basis: 100%; margin-left: 25px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-dim); font-size: 11px; }
body.theme-claude .workspace-chat-name input { accent-color: var(--accent); }
body.theme-claude .workspace-more-btn { width: 30px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--fg-dim); cursor: pointer; letter-spacing: 1px; }
body.theme-claude .workspace-more-btn:hover { background: var(--item-hover); color: var(--fg); }
body.theme-claude .workspace-empty { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 90px 24px; color: var(--fg-dim); text-align: center; }
body.theme-claude .workspace-empty strong { color: var(--fg); font-size: 16px; }
body.theme-claude .workspace-empty span { max-width: 420px; font-size: 13px; line-height: 1.6; }
body.theme-claude .workspace-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 12px; }
body.theme-claude .workspace-project-card { display: flex; align-items: flex-start; gap: 4px; min-height: 120px; padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel); }
body.theme-claude .workspace-project-card:hover { border-color: var(--border-strong); }
body.theme-claude .workspace-card-main, body.theme-claude .workspace-artifact-main { display: flex; align-items: flex-start; gap: 11px; flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--fg); text-align: left; cursor: pointer; }
body.theme-claude .workspace-card-main > span:last-child, body.theme-claude .workspace-artifact-main > span:last-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.theme-claude .workspace-card-main strong, body.theme-claude .workspace-artifact-main strong { font-size: 14px; font-weight: 600; }
body.theme-claude .workspace-card-main small, body.theme-claude .workspace-artifact-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-dim); font-size: 11px; }
body.theme-claude .workspace-card-main em { color: var(--text-tertiary); font-size: 11px; font-style: normal; }
body.theme-claude .workspace-project-dot { width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; flex: 0 0 auto; }
body.theme-claude .workspace-artifact-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel); overflow: hidden; }
body.theme-claude .workspace-artifact-row { display: flex; align-items: center; gap: 8px; min-height: 65px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
body.theme-claude .workspace-artifact-row:last-child { border-bottom: 0; }
body.theme-claude .workspace-artifact-row:hover { background: var(--item-hover); }
body.theme-claude .workspace-artifact-main > span:last-child { gap: 4px; }
body.theme-claude .workspace-artifact-main small { font-size: 11px; }
body.theme-claude .workspace-action-menu { z-index: 185; }
body.theme-claude .project-detail-inner { width: min(900px, calc(100% - 64px)); margin: 0 auto; padding: 30px 0 72px; }
body.theme-claude .project-detail-back { margin-bottom: 24px; }
body.theme-claude .project-detail-back button { border: 0; padding: 5px 0; background: transparent; color: var(--fg-dim); font-size: 12px; cursor: pointer; }
body.theme-claude .project-detail-back button:hover { color: var(--fg); }
body.theme-claude .project-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
body.theme-claude .project-detail-heading h1 { margin: 0; color: var(--fg); font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
body.theme-claude .project-detail-heading p { margin: 8px 0 0; color: var(--fg-dim); font-size: 13px; line-height: 1.6; }
body.theme-claude .project-detail-actions { display: flex; align-items: center; gap: 7px; }
body.theme-claude .project-star-btn { border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 11px; background: transparent; color: var(--fg-dim); font-size: 12px; cursor: pointer; }
body.theme-claude .project-star-btn:hover, body.theme-claude .project-star-btn.active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
body.theme-claude .project-detail-more { border: 1px solid var(--border-strong); }
body.theme-claude .project-chat-card, body.theme-claude .project-detail-card { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel); }
body.theme-claude .project-chat-card { padding: 18px; margin-bottom: 14px; }
body.theme-claude .project-chat-card-head, body.theme-claude .project-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
body.theme-claude .project-chat-card h2, body.theme-claude .project-section-heading h2 { margin: 0; color: var(--fg); font-size: 14px; font-weight: 600; }
body.theme-claude .project-chat-card p { margin: 5px 0 0; color: var(--fg-dim); font-size: 12px; }
body.theme-claude .project-chat-card textarea { display: block; width: 100%; min-height: 78px; margin-top: 16px; resize: vertical; border: 1px solid var(--border-strong); border-radius: 9px; padding: 11px 12px; outline: 0; background: var(--bg-main); color: var(--fg); font: inherit; font-size: 13px; line-height: 1.55; box-sizing: border-box; }
body.theme-claude .project-chat-card textarea:focus { border-color: var(--accent); }
body.theme-claude .project-chat-toolbar { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
body.theme-claude .project-chat-toolbar .workspace-primary-btn { margin-left: auto; }
body.theme-claude .project-chat-hint { color: var(--text-tertiary); font-size: 11px; }
body.theme-claude .project-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
body.theme-claude .project-detail-card { padding: 17px; }
body.theme-claude .project-instructions-copy { min-height: 48px; margin: 14px 0 0; color: var(--fg-dim); font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
body.theme-claude .project-file-list, body.theme-claude .project-chat-list { margin-top: 13px; }
body.theme-claude .project-file-row { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 0; border-top: 1px solid var(--border); }
body.theme-claude .project-file-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; background: var(--item-hover); color: var(--fg-dim); font-size: 13px; }
body.theme-claude .project-file-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
body.theme-claude .project-file-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font-size: 12px; font-weight: 550; }
body.theme-claude .project-file-copy small { color: var(--text-tertiary); font-size: 10px; }
body.theme-claude .project-file-remove { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--fg-dim); font-size: 17px; cursor: pointer; }
body.theme-claude .project-file-remove:hover { background: rgba(192,57,43,.1); color: #c0392b; }
body.theme-claude .project-detail-empty { padding: 13px 0 3px; color: var(--text-tertiary); font-size: 11px; line-height: 1.55; }
body.theme-claude .project-chat-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 11px 0; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--fg); text-align: left; cursor: pointer; }
body.theme-claude .project-chat-row:hover { color: var(--accent); }
body.theme-claude .project-chat-row > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.theme-claude .project-chat-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 550; }
body.theme-claude .project-chat-row small, body.theme-claude .project-chat-row time { color: var(--fg-dim); font-size: 10px; }
body.theme-claude .project-conversations-card { margin-bottom: 10px; }
body.theme-claude .workspace-project-card.is-starred { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); }
@media (max-width: 760px) {
  body.theme-claude .workspace-inner { width: calc(100% - 32px); padding-top: 28px; }
  body.theme-claude .workspace-heading { flex-direction: column; margin-bottom: 22px; }
  body.theme-claude .workspace-actions { justify-content: flex-start; }
  body.theme-claude .workspace-table-head { display: none; }
  body.theme-claude .workspace-table-row { grid-template-columns: minmax(0, 1fr) 34px; gap: 8px; }
  body.theme-claude .workspace-table-row > span:nth-child(2), body.theme-claude .workspace-table-row > span:nth-child(3) { display: none; }
  body.theme-claude .workspace-toolbar { flex-wrap: wrap; }
  body.theme-claude .workspace-search { max-width: none; flex-basis: 100%; }
  body.theme-claude .project-detail-inner { width: calc(100% - 32px); padding-top: 22px; }
  body.theme-claude .project-detail-heading { flex-direction: column; }
  body.theme-claude .project-detail-grid { grid-template-columns: 1fr; }
  body.theme-claude .project-chat-toolbar { flex-wrap: wrap; }
  body.theme-claude .project-chat-hint { flex-basis: 100%; order: 3; }
  body.theme-claude .project-chat-toolbar .workspace-primary-btn { margin-left: auto; }
}

/* ---- 空状态 ---- */
body.empty-chat.theme-claude .main::before { content: ''; flex: 1 1 0; }
body.empty-chat.theme-claude .main::after  { content: ''; flex: 1.3 1 0; }
body.empty-chat.theme-claude .chat-scroll  { flex: 0 0 auto; overflow: visible; }
body.empty-chat.theme-claude .welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px 24px; }
body.theme-claude .welcome-icon { color: var(--accent); margin-bottom: 14px; }
body.theme-claude .welcome-icon svg { width: 40px; height: 40px; }
body.theme-claude .welcome-title { font-size: 28px; font-weight: 500; letter-spacing: -.01em; color: var(--fg); text-align: center; }
body.theme-claude .welcome-sub { display: block; margin-top: 6px; font-size: 16px; color: var(--fg-dim); text-align: center; }

/* ---- 消息 ---- */
body.theme-claude .msg-assistant .msg-avatar { display: none; }
body.theme-claude .msg-user .msg-avatar { display: none; }
body.theme-claude .msg-user { flex-direction: row-reverse; }
body.theme-claude .msg-user .msg-body { display: flex; flex-direction: column; align-items: flex-end; }
body.theme-claude .msg-user .msg-content { max-width: 76%; background: var(--user-bubble); color: var(--user-bubble-fg); border-radius: var(--user-bubble-radius); padding: var(--user-bubble-pad); }
body.theme-claude .msg-assistant .msg-content {
  font-family: "Anthropic Serif", "Iowan Old Style", "Songti SC", "STSong", Georgia, serif;
  font-size: 17px; line-height: 1.75; letter-spacing: -.01em; color: var(--fg); max-width: 100%;
}
body.theme-claude .msg-assistant .msg-content :where(code, pre, button, .inline-artifact-card) { font-family: var(--font-body); }
body.theme-claude .msg-content pre { background: var(--code-bg); border: 1px solid var(--border); }
body.theme-claude .msg-content code { background: var(--code-inline-bg); }
body.theme-claude .chat-scroll-actions { position: sticky; bottom: 12px; z-index: 4; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
body.theme-claude .chat-scroll-actions button { pointer-events: auto; padding: 7px 11px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-panel); color: var(--fg-dim); box-shadow: 0 4px 14px rgba(0,0,0,.1); cursor: pointer; font-size: 11px; }
body.theme-claude .chat-scroll-actions button:hover { color: var(--fg); background: var(--item-hover); }

/* ---- 输入框 ---- */
body.theme-claude .composer {
  padding: 20px; border: var(--composer-border); border-radius: var(--composer-radius);
  box-shadow: var(--composer-shadow); background: var(--composer-bg);
}
body.theme-claude .composer:focus-within { border-color: var(--composer-focus); }
body.theme-claude .composer.is-dragover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), var(--composer-shadow);
  background: color-mix(in srgb, var(--accent) 4%, var(--composer-bg));
}
body.theme-claude .claude-voice-mode-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -4px 0 10px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--fg); font-size: 12px;
}
body.theme-claude .claude-voice-mode-state { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); }
body.theme-claude .claude-voice-mode-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent); }
body.theme-claude .claude-voice-mode-actions { display: inline-flex; align-items: center; gap: 6px; }
body.theme-claude .claude-voice-mode-actions button { padding: 5px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--fg-dim); font-size: 11px; cursor: pointer; }
body.theme-claude .claude-voice-mode-actions button:hover { background: var(--item-hover); color: var(--fg); }
body.theme-claude .claude-voice-mode-actions [data-voice-exit] { color: var(--accent); }
body.theme-claude .composer-grid {
  display: grid; gap: 8px; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto auto;
  grid-template-areas: "text text text text text text text" "attach . picker settings mic send incognito";
}
body.theme-claude .composer-grid textarea { grid-area: text; padding: 2px 4px 8px; font-size: 16px; line-height: 1.4; }
body.theme-claude .composer-grid .attach-btn { grid-area: attach; width: 32px; height: 32px; border-radius: 8px; color: var(--fg); }
body.theme-claude .composer-grid .composer-tools { grid-area: tools; display: none; }
body.theme-claude .composer-grid .composer-picker { grid-area: picker; }
body.theme-claude .composer-grid .composer-settings-btn { grid-area: settings; }
body.theme-claude .composer-grid .mic-area { grid-area: mic; display: flex; gap: 4px; align-items: center; }
body.theme-claude .composer-grid #send-btn { grid-area: send; }
body.theme-claude .composer-grid #stop-btn { grid-area: send; }
body.theme-claude .send-btn {
  width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: #fff;
  box-shadow: none;
}
body.theme-claude .send-btn:hover { opacity: 1; filter: brightness(.96); }
body.theme-claude .send-btn svg { width: 18px; height: 18px; }
body.theme-claude .composer-model-btn {
  color: var(--fg); font-size: 14px; padding: 0 12px; height: 32px; border-radius: 8px;
}
body.theme-claude .composer-model-btn:hover { background: var(--item-hover); }
body.theme-claude .composer-settings-btn {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--fg-dim); cursor: pointer;
}
body.theme-claude .composer-settings-btn:hover { background: var(--item-hover); color: var(--fg); }

/* 隐身模式按钮 */
body.theme-claude .incognito-btn {
  width: 32px; height: 32px; border-radius: 8px; border: none; background: none;
  color: var(--fg-dim); display: inline-flex; align-items: center; justify-content: center; grid-area: incognito;
}
body.theme-claude .incognito-btn:hover { background: var(--item-hover); color: var(--fg); }
body.theme-claude .incognito-btn.active { color: var(--accent); }

/* 语音录制按钮 */
body.theme-claude .voice-btn {
  width: 32px; height: 32px; border-radius: 12px; border: none; background: none;
  color: var(--fg-dim); display: inline-flex; align-items: center; justify-content: center;
}
body.theme-claude .voice-btn:hover { background: var(--item-hover); color: var(--fg); }
body.theme-claude .voice-btn.recording { color: var(--accent); background: rgba(217, 119, 87, 0.1); }
body.theme-claude .voice-settings-btn { width: 28px; height: 32px; border-radius: 9px; }
body.theme-claude .voice-settings-menu {
  position: fixed; z-index: 190; width: 280px; padding: 8px;
  background: var(--bg-menu); color: var(--fg); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.16); font-size: 12px;
}
body.theme-claude .voice-settings-heading { padding: 5px 8px 8px; font-weight: 650; }
body.theme-claude .voice-settings-menu [role="group"] { margin: 0; }
body.theme-claude .voice-device-list { max-height: 180px; overflow-y: auto; }
body.theme-claude .voice-settings-loading, body.theme-claude .voice-settings-empty { padding: 10px 8px; color: var(--fg-dim); line-height: 1.45; }
body.theme-claude .voice-device-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px;
  border: 0; border-radius: 7px; background: transparent; color: var(--fg);
  text-align: left; cursor: pointer; font-size: 12px;
}
body.theme-claude .voice-device-item:hover, body.theme-claude .voice-device-item.active { background: var(--item-hover); }
body.theme-claude .voice-device-item > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.theme-claude .voice-device-icon { display: inline-flex; color: var(--fg-dim); }
body.theme-claude .voice-device-icon svg { width: 15px; height: 15px; }
body.theme-claude .voice-device-check { margin-left: auto; color: var(--accent); font-weight: 700; }
body.theme-claude .voice-settings-divider { height: 1px; margin: 7px 2px; background: var(--border); }
body.theme-claude .voice-hold-row { display: flex; align-items: center; gap: 8px; padding: 8px; cursor: pointer; }
body.theme-claude .voice-hold-row > span:first-child { display: flex; flex-direction: column; gap: 2px; flex: 1; }
body.theme-claude .voice-hold-row strong { font-size: 12px; font-weight: 600; }
body.theme-claude .voice-hold-row small { color: var(--fg-dim); font-size: 10px; line-height: 1.35; }
body.theme-claude .voice-hold-row input { position: absolute; opacity: 0; pointer-events: none; }
body.theme-claude .voice-switch { width: 30px; height: 18px; padding: 2px; border-radius: 99px; background: var(--border-strong); transition: background .15s ease; }
body.theme-claude .voice-switch::after { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-main); transition: transform .15s ease; }
body.theme-claude .voice-hold-row input:checked + .voice-switch { background: var(--accent); }
body.theme-claude .voice-hold-row input:checked + .voice-switch::after { transform: translateX(12px); }

/* 隐身模式指示器 */
body.theme-claude .incognito-banner {
  background: rgba(217, 119, 87, 0.08); color: var(--accent);
  font-size: 12px; text-align: center; padding: 6px 16px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

body.theme-claude .seg { background: var(--seg-bg); }
body.theme-claude .seg-item.active { background: var(--seg-active-bg); color: var(--seg-active-fg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* ---- 建议按钮(水平药丸式,与官方 Claude 一致) ---- */
body.theme-claude .welcome-suggest {
  flex-direction: row; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 0 8px; margin-top: 12px;
}
/* 建议入口只属于空对话；Claude 专属布局的 display:flex 不能覆盖已有消息后的隐藏状态。 */
body.theme-claude:not(.empty-chat) .welcome-suggest { display: none; }
body.theme-claude .suggest-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--border-strong);
  border-radius: 20px; font-size: 13px; color: var(--fg-dim);
  background: transparent; transition: all .15s ease;
}
body.theme-claude .suggest-item:hover {
  background: var(--item-hover); color: var(--fg); border-color: var(--fg-dim);
}
body.theme-claude .suggest-item svg { opacity: .7; width: 15px; height: 15px; }
body.theme-claude .claude-suggestion-panel {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  width: min(620px, calc(100vw - 48px)); margin: 14px auto 0; padding: 12px;
  border: 1px solid var(--border-strong); border-radius: 16px;
  background: var(--composer-bg); text-align: left;
}
body.theme-claude .claude-suggestion-heading {
  display: flex; align-items: center; gap: 8px; min-height: 24px;
  color: var(--fg); font-size: 13px;
}
body.theme-claude .claude-suggestion-heading-icon { display: inline-flex; color: var(--accent); }
body.theme-claude .claude-suggestion-heading-icon svg { width: 17px; height: 17px; }
body.theme-claude .claude-suggestion-close {
  margin-left: auto; width: 26px; height: 26px; border: 0; border-radius: 7px;
  background: transparent; color: var(--fg-dim); font-size: 19px; line-height: 1; cursor: pointer;
}
body.theme-claude .claude-suggestion-close:hover { background: var(--item-hover); color: var(--fg); }
body.theme-claude .claude-suggestion-list { display: flex; flex-direction: column; gap: 2px; }
body.theme-claude .claude-suggestion-option { display: block; }
body.theme-claude .claude-suggestion-option button {
  display: block; width: 100%; padding: 10px 11px; border: 0; border-radius: 9px;
  background: transparent; color: var(--fg); text-align: left; font: inherit; font-size: 13px; cursor: pointer;
}
body.theme-claude .claude-suggestion-option button:hover,
body.theme-claude .claude-suggestion-option button:focus-visible {
  outline: none; background: var(--item-hover);
}

/* ---- 交互式提问卡(Claude 官方选择问题) ---- */
body.theme-claude .claude-question-card {
  width: min(620px, 100%); margin-top: 18px; padding: 14px 15px;
  border: 1px solid var(--border-strong); border-radius: 14px;
  background: var(--composer-bg); box-shadow: 0 3px 12px rgba(0,0,0,.04);
}
body.theme-claude .claude-question-head,
body.theme-claude .claude-question-footer,
body.theme-claude .claude-question-navigation { display: flex; align-items: center; gap: 8px; }
body.theme-claude .claude-question-head { justify-content: space-between; }
body.theme-claude .claude-question-heading { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
body.theme-claude .claude-question-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }
body.theme-claude .claude-question-step { color: var(--fg-dim); font-size: 11px; }
body.theme-claude .claude-question-minimize,
body.theme-claude .claude-question-skip,
body.theme-claude .claude-question-secondary {
  border: 0; border-radius: 7px; padding: 6px 8px; background: transparent;
  color: var(--fg-dim); font: inherit; font-size: 11px; cursor: pointer;
}
body.theme-claude .claude-question-minimize { margin-left: auto; }
body.theme-claude .claude-question-minimize:hover,
body.theme-claude .claude-question-skip:hover,
body.theme-claude .claude-question-secondary:hover:not(:disabled) { background: var(--item-hover); color: var(--fg); }
body.theme-claude .claude-question-prompt { margin: 15px 0 10px; color: var(--fg); font-size: 14px; line-height: 1.55; }
body.theme-claude .claude-question-options { display: flex; flex-direction: column; gap: 7px; }
body.theme-claude .claude-question-option {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 11px;
  border: 1px solid var(--border); border-radius: 9px; background: transparent;
  color: var(--fg); text-align: left; font: inherit; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
body.theme-claude .claude-question-option:hover,
body.theme-claude .claude-question-option:focus-visible { outline: none; background: var(--item-hover); border-color: var(--border-strong); }
body.theme-claude .claude-question-option.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
body.theme-claude .claude-question-option-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
body.theme-claude .claude-question-option-copy strong { font-size: 12px; font-weight: 550; }
body.theme-claude .claude-question-option-copy small { color: var(--fg-dim); font-size: 11px; line-height: 1.4; }
body.theme-claude .claude-question-check { width: 18px; color: var(--accent); text-align: center; font-size: 15px; font-weight: 700; }
body.theme-claude .claude-question-footer { justify-content: space-between; margin-top: 13px; }
body.theme-claude .claude-question-navigation { margin-left: auto; }
body.theme-claude .claude-question-primary {
  padding: 7px 11px; border: 1px solid var(--accent); border-radius: 8px;
  background: var(--accent); color: #fff; font: inherit; font-size: 11px; cursor: pointer;
}
body.theme-claude .claude-question-primary:hover:not(:disabled) { filter: brightness(.96); }
body.theme-claude .claude-question-primary:disabled,
body.theme-claude .claude-question-secondary:disabled,
body.theme-claude .claude-question-skip:disabled { cursor: default; opacity: .45; }
body.theme-claude .claude-question-minimized-hint { margin: 9px 0 0; color: var(--fg-dim); font-size: 11px; }
body.theme-claude .claude-question-card.is-submitted { opacity: .82; }
@media (max-width: 640px) {
  body.theme-claude .claude-question-card { width: 100%; box-sizing: border-box; }
  body.theme-claude .claude-question-footer { align-items: flex-end; }
}

/* ---- 弹层 ---- */
body.theme-claude .primary-btn, body.theme-claude .login-card button:not(.auth-tab) { background: var(--accent); }
body.theme-claude .modal, body.theme-claude .login-card { border: 1px solid var(--border-strong); }
body.theme-claude .modal-tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
body.theme-claude #settings-status { color: #2a9d3f; }
body.theme-claude .user-menu, body.theme-claude .model-menu {
  border-radius: 14px;
  max-height: min(440px, calc(100vh - 120px));
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

/* ---- 响应式 ---- */
@media (max-width: 768px) {
  body.theme-claude .welcome-title { font-size: 24px; }
  body.empty-chat.theme-claude .main::before, body.empty-chat.theme-claude .main::after { flex: .5 1 0; }
  body.theme-claude .composer-grid {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto auto;
    grid-template-areas: "text text text text text text text" "attach . picker settings mic send incognito";
  }
  body.theme-claude .composer-model-btn { font-size: 12px; padding: 0 8px; }
  body.theme-claude .seg-item { padding-left: 8px; padding-right: 8px; font-size: 11.5px; }
  body.theme-claude .voice-mode-btn { display: inline-flex; }
}

/* ---- 加号菜单 ---- */
.add-menu {
  position: fixed; z-index: 120;
  min-width: 240px; max-width: 280px;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-strong, rgba(0,0,0,.08));
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 6px;
  font-size: 13.5px;
}
.add-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  border: none; background: none; border-radius: 8px;
  color: var(--fg, #333); font-size: 13.5px;
  cursor: pointer; text-align: left;
  transition: background .12s ease;
}
.add-menu-item:hover { background: var(--item-hover, rgba(0,0,0,.05)); }
.add-menu-item.active { color: var(--accent, #d97757); }
.add-menu-icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-dim, #666); flex-shrink: 0; }
.add-menu-item.active .add-menu-icon { color: var(--accent, #d97757); }
.add-menu-label { flex: 1; }
.chatgpt-add-menu .add-menu-label { display: flex; flex-direction: column; gap: 2px; }
.chatgpt-add-menu .add-menu-label small { color: var(--fg-dim, #999); font-size: 11px; line-height: 1.3; }
.add-menu-right { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-dim, #999); font-size: 12px; }
.add-menu-divider { height: 1px; background: var(--border, rgba(0,0,0,.06)); margin: 6px 2px; }
.add-submenu {
  position: fixed; z-index: 121; min-width: 230px; max-width: 290px; padding: 6px;
  background: var(--bg-panel, #fff); border: 1px solid var(--border-strong, rgba(0,0,0,.08));
  border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.12); font-size: 13px;
}
.add-submenu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: 8px; background: none; color: var(--fg, #333);
  text-align: left; cursor: pointer; font-size: 13px;
}
.add-submenu-item:hover { background: var(--item-hover, rgba(0,0,0,.05)); }
.project-submenu-title { padding: 5px 9px 7px; font-weight: 650; }
.project-submenu-search { display: flex; align-items: center; gap: 7px; margin: 0 2px 5px; padding: 7px 8px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--fg-dim); }
.project-submenu-search:focus-within { border-color: var(--accent); }
.project-submenu-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; }
.project-submenu-list { max-height: 190px; overflow-y: auto; }
.project-submenu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--fg); text-align: left; cursor: pointer; font-size: 12px; }
.project-submenu-item:hover, .project-submenu-item.active { background: var(--item-hover); }
.project-submenu-item > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-submenu-item .project-item-check { margin-left: auto; color: var(--accent); }
.project-submenu-empty { padding: 12px 8px; color: var(--fg-dim); font-size: 11px; line-height: 1.45; }
.project-submenu-new { width: 100%; padding: 8px; border: 0; border-radius: 8px; background: none; color: var(--accent); text-align: left; cursor: pointer; font-size: 12px; }
.project-submenu-new:hover { background: var(--item-hover); }
body.theme-claude .claude-slash-menu {
  position: fixed; z-index: 130; min-width: 250px; padding: 7px;
  border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--composer-bg); color: var(--fg);
  box-shadow: 0 12px 34px rgba(0,0,0,.14);
}
body.theme-claude .claude-slash-hint {
  padding: 5px 8px 7px; color: var(--fg-dim); font-size: 11px;
}
body.theme-claude .claude-slash-menu [role="menuitem"] {
  display: flex; align-items: baseline; gap: 9px; width: 100%;
  padding: 8px; border: 0; border-radius: 8px; background: transparent;
  color: var(--fg); text-align: left; cursor: pointer; font: inherit;
}
body.theme-claude .claude-slash-menu [role="menuitem"]:hover,
body.theme-claude .claude-slash-menu [role="menuitem"].active { background: var(--item-hover); }
body.theme-claude .claude-slash-name { font-size: 13px; font-weight: 600; }
body.theme-claude .claude-slash-label { color: var(--fg-dim); font-size: 11px; }

/* 深色模式 */
html[data-theme="dark"] .add-menu {
  background: #2a2a28; border-color: rgba(255,255,255,.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .add-menu-item:hover { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .add-menu-divider { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .add-submenu { background: #2a2a28; border-color: rgba(255,255,255,.1); box-shadow: 0 8px 32px rgba(0,0,0,.4); }
/* 移动端保留模型选择胶囊，统一由 680px 媒体查询做双层卡片流式适配 */

/* ---- 目录页：技能 / 连接器 / 插件 ---- */
.dir-modal { width: min(560px, 94vw); padding: 20px; }
.dir-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dir-search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--border, #ddd); border-radius: 10px;
  color: var(--fg-dim, #888);
}
.dir-search:focus-within { border-color: var(--accent, #d97757); }
.dir-search input {
  flex: 1; border: none; outline: none; background: transparent;
  color: inherit; font-size: 13.5px;
}
.dir-addlink {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 12px; border: 1px solid var(--border, #ddd); border-radius: 10px;
  background: none; color: var(--accent, #d97757); font-size: 13px; cursor: pointer;
}
.dir-addlink:hover { background: var(--item-hover, rgba(0,0,0,.05)); }
.dir-tabs { margin-bottom: 12px; }
.dir-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.dir-empty { padding: 32px 16px; text-align: center; color: var(--fg-dim, #999); font-size: 13px; }
.dir-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border, #eee); border-radius: 12px;
  transition: background .12s ease;
}
.dir-item:hover { background: var(--item-hover, rgba(0,0,0,.04)); }
.dir-item-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--item-hover, rgba(0,0,0,.05)); font-size: 20px;
}
.dir-item-body { flex: 1; min-width: 0; }
.dir-item-title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.dir-item-author { font-size: 11px; font-weight: 400; color: var(--fg-dim, #999); }
.dir-item-desc { font-size: 12px; color: var(--fg-dim, #888); margin-top: 2px; line-height: 1.5; }
.dir-item-installs { font-size: 11px; color: var(--fg-dim, #aaa); margin-top: 3px; }
.dir-item-btn {
  flex-shrink: 0; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border, #ddd); background: transparent; color: var(--fg, #333);
  font-size: 12.5px; white-space: nowrap; transition: all .12s ease;
}
.dir-item-btn:hover { border-color: var(--accent, #d97757); color: var(--accent, #d97757); }
.dir-item-btn.on { background: var(--accent, #d97757); border-color: var(--accent, #d97757); color: #fff; }
html[data-theme="dark"] .dir-item { border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .dir-item:hover { background: rgba(255,255,255,.05); }
html[data-theme="dark"] .dir-item-btn { border-color: rgba(255,255,255,.16); color: #eee; }

/* ---- Claude 侧栏功能视图 / 会话操作 ---- */
body.theme-claude .sidebar-empty {
  padding: 22px 16px; color: var(--fg-dim); font-size: 12px; line-height: 1.6; text-align: center;
}
body.theme-claude .project-create-btn,
body.theme-claude .project-back-btn {
  width: 100%; padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: 8px;
  background: none; color: var(--fg-dim); text-align: left; font-size: 12px; margin: 4px 0 8px;
}
body.theme-claude .project-create-btn:hover,
body.theme-claude .project-back-btn:hover { background: var(--item-hover); color: var(--fg); }
body.theme-claude .project-list-row { display: flex; align-items: center; gap: 3px; margin-bottom: 2px; }
body.theme-claude .project-row-actions { display: inline-flex; align-items: center; gap: 1px; }
body.theme-claude .project-open-btn {
  display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; padding: 7px 10px;
  border: none; border-radius: 8px; background: none; color: var(--fg); text-align: left;
}
body.theme-claude .project-open-btn:hover,
body.theme-claude .project-delete-btn:hover { background: var(--item-hover); }
body.theme-claude .project-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
body.theme-claude .project-row-main, body.theme-claude .artifact-row-main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
body.theme-claude .project-row-main span, body.theme-claude .artifact-row-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
body.theme-claude .project-row-main small, body.theme-claude .artifact-row-main small { color: var(--text-tertiary); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.theme-claude .project-edit-btn, body.theme-claude .project-delete-btn { width: 24px; height: 26px; border: none; border-radius: 7px; background: none; color: var(--text-tertiary); font-size: 14px; }
body.theme-claude .project-edit-btn:hover, body.theme-claude .project-delete-btn:hover { background: var(--item-hover); color: var(--fg); }
body.theme-claude .project-list-empty { padding: 22px 12px; color: var(--fg-dim); font-size: 12px; text-align: center; }
body.theme-claude .project-detail-card { display: flex; flex-direction: column; gap: 4px; margin: 4px 8px 9px; padding: 9px 10px; border-radius: 9px; background: var(--item-hover); color: var(--fg); font-size: 11px; line-height: 1.45; }
body.theme-claude .project-detail-card span, body.theme-claude .project-detail-card small { color: var(--fg-dim); }
body.theme-claude .artifact-create-btn { width: calc(100% - 16px); margin: 4px 8px 8px; padding: 7px 10px; border: 1px dashed var(--border-strong); border-radius: 8px; background: none; color: var(--fg-dim); text-align: left; font-size: 12px; cursor: pointer; }
body.theme-claude .artifact-create-btn:hover { background: var(--item-hover); color: var(--fg); }
body.theme-claude .artifact-list-row {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: none; border-radius: 8px;
  background: none; color: var(--fg); text-align: left;
}
body.theme-claude .artifact-list-row:hover { background: var(--item-hover); }
body.theme-claude .artifact-icon { width: 24px; height: 24px; border-radius: 6px; background: var(--item-hover); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
body.theme-claude .artifact-arrow { margin-left: auto; color: var(--text-tertiary); font-size: 18px; }
body.theme-claude .session-actions { display: inline-flex; align-items: center; visibility: hidden; opacity: 0; transition: opacity .12s ease; }
body.theme-claude .session-item:hover .session-actions, body.theme-claude .session-item:focus-within .session-actions, body.theme-claude .session-item[data-menu-open="true"] .session-actions { visibility: visible; opacity: 1; }
body.theme-claude .session-more, body.theme-claude .session-del { width: 22px; height: 22px; padding: 0; border: none; border-radius: 6px; background: none; color: var(--text-tertiary); }
body.theme-claude .session-more:hover, body.theme-claude .session-del:hover { background: var(--item-hover); color: var(--fg); }
body.theme-claude .session-more span { font-size: 11px; letter-spacing: 1px; }
body.theme-claude .session-context-menu, body.theme-claude .message-context-menu {
  position: fixed; z-index: 180; min-width: 148px; padding: 5px; background: var(--bg-menu); color: var(--fg);
  border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
body.theme-claude .session-context-menu button, body.theme-claude .message-context-menu button { display: block; width: 100%; padding: 8px 10px; border: none; outline: none; border-radius: 7px; background: none; color: inherit; text-align: left; font-size: 12px; }
body.theme-claude .session-context-menu button:hover, body.theme-claude .session-context-menu button:focus, body.theme-claude .session-context-menu button:focus-visible, body.theme-claude .message-context-menu button:hover, body.theme-claude .message-context-menu button:focus, body.theme-claude .message-context-menu button:focus-visible { background: var(--item-hover); outline: none; }
body.theme-claude .session-context-menu button.danger { color: #c0392b; }
body.theme-claude .session-menu-separator { height: 1px; margin: 5px 2px; background: var(--border); }
body.theme-claude .user-msg-actions { justify-content: flex-end; margin-top: 4px; }
body.theme-claude .msg-user .user-msg-actions { opacity: 0; }
body.theme-claude .msg-user:hover .user-msg-actions, body.theme-claude .msg-user:last-child .user-msg-actions { opacity: 1; }
body.theme-claude .inline-artifacts { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; max-width: min(560px, 100%); }
body.theme-claude .inline-artifact-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-panel); color: var(--fg); text-align: left; cursor: pointer; }
body.theme-claude .inline-artifact-card:hover { border-color: var(--accent); background: var(--item-hover); }
body.theme-claude .inline-artifact-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: var(--item-hover); color: var(--accent); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; flex: 0 0 auto; }
body.theme-claude .inline-artifact-card > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.theme-claude .inline-artifact-card strong { font-size: 12px; font-weight: 600; }
body.theme-claude .inline-artifact-card small { overflow: hidden; color: var(--fg-dim); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
body.theme-claude .inline-artifact-arrow { margin-left: auto; color: var(--text-tertiary); font-size: 18px; }

/* ---- 风格 / 产物弹窗 ---- */
body.theme-claude .style-modal { width: min(560px, 94vw); }
body.theme-claude .style-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.theme-claude .style-option { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: none; color: var(--fg); text-align: left; }
body.theme-claude .style-option:hover { background: var(--item-hover); }
body.theme-claude .style-option.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
body.theme-claude .style-option span { font-size: 13px; font-weight: 600; }
body.theme-claude .style-option small { color: var(--fg-dim); font-size: 11px; line-height: 1.4; }
body.theme-claude .dialog-input-label { display: block; margin-top: 16px; color: var(--fg-dim); font-size: 12px; }
body.theme-claude .dialog-input-label input, body.theme-claude .dialog-input-label textarea { display: block; width: 100%; margin-top: 6px; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 9px; outline: none; resize: vertical; min-height: 40px; background: transparent; color: var(--fg); }
body.theme-claude .dialog-input-label textarea { min-height: 90px; line-height: 1.5; }
body.theme-claude .dialog-input-label input:focus, body.theme-claude .dialog-input-label textarea:focus { border-color: var(--accent); }
body.theme-claude .dialog-status { flex: 1; color: #c0392b; font-size: 12px; }
body.theme-claude .artifact-modal { width: min(760px, 94vw); }
body.theme-claude .artifact-starter-modal { width: min(620px, 94vw); }
body.theme-claude .artifact-starter-lead { margin: 6px 0 14px; color: var(--fg); font-size: 14px; line-height: 1.55; }
body.theme-claude .artifact-starter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.theme-claude .artifact-starter-option { display: flex; flex-direction: column; gap: 4px; min-height: 72px; padding: 12px; border: 1px solid var(--border-strong); border-radius: 11px; background: transparent; color: var(--fg); text-align: left; cursor: pointer; }
body.theme-claude .artifact-starter-option:hover, body.theme-claude .artifact-starter-option:focus-visible { border-color: var(--accent); background: var(--item-hover); outline: none; }
body.theme-claude .artifact-starter-option strong { font-size: 13px; font-weight: 600; }
body.theme-claude .artifact-starter-option small { color: var(--fg-dim); font-size: 11px; line-height: 1.4; }
@media (max-width: 520px) { body.theme-claude .artifact-starter-grid { grid-template-columns: 1fr; } }
body.theme-claude .artifact-version-picker { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-dim); font-size: 11px; }
body.theme-claude .artifact-version-picker select { padding: 3px 5px; border: 1px solid var(--border-strong); border-radius: 6px; background: transparent; color: var(--fg); font-size: 11px; }
body.theme-claude .artifact-copy-actions { display: inline-flex; align-items: stretch; }
body.theme-claude .artifact-copy-actions [data-copy] { border-radius: 8px 0 0 8px; }
body.theme-claude .artifact-copy-options { min-width: 26px; padding: 0 7px; margin-left: -1px; border-radius: 0 8px 8px 0; }
body.theme-claude .artifact-copy-menu { min-width: 180px; }
body.theme-claude .modal-project-form { width: min(520px, 94vw); }
body.theme-claude .project-form-files { margin-top: 14px; padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: 10px; }
body.theme-claude .project-form-files-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.theme-claude .project-form-files-head strong { font-size: 13px; }
body.theme-claude .project-form-file-list { display: grid; gap: 6px; margin-top: 8px; }
body.theme-claude .project-form-file-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 6px 0; border-top: 1px solid var(--border); color: var(--fg-dim); font-size: 12px; }
body.theme-claude .project-form-file-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.theme-claude .project-form-file-row .btn-secondary { padding: 4px 8px; font-size: 11px; }
body.theme-claude .project-form-files-empty { color: var(--text-tertiary); font-size: 12px; }
body.theme-claude .settings-modal { width: min(420px, 94vw); }
body.theme-claude .settings-section { padding: 12px 0; border-bottom: 1px solid var(--border); }
body.theme-claude .settings-section:last-of-type { border-bottom: none; }
body.theme-claude .settings-section strong { display: block; margin-bottom: 9px; font-size: 13px; }
body.theme-claude .settings-choice-group { display: flex; gap: 8px; }
body.theme-claude .settings-choice-group label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--fg-dim); font-size: 12px; cursor: pointer; }
body.theme-claude .settings-choice-group label:has(input:checked) { color: var(--fg); border-color: var(--accent); background: var(--item-hover); }
body.theme-claude .settings-choice-group input { accent-color: var(--accent); }
body.theme-claude .settings-note { display: block; color: var(--text-tertiary); font-size: 11px; }
body.theme-claude .settings-modal-wide { width: min(920px, 94vw); max-height: min(720px, 92vh); padding: 0; overflow: hidden; }
body.theme-claude .settings-modal-wide > .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border); }
body.theme-claude .settings-search-top { display: flex; align-items: center; gap: 8px; margin: 12px 22px 0; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--fg-dim); }
body.theme-claude .settings-search-top svg { width: 15px; height: 15px; flex: 0 0 auto; }
body.theme-claude .settings-search-top input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; font-size: 13px; }
body.theme-claude .settings-layout { display: flex; min-height: 0; height: min(620px, calc(92vh - 74px)); }
body.theme-claude .settings-tabs { width: 190px; flex: 0 0 190px; padding: 12px 8px; border-right: 1px solid var(--border); overflow-y: auto; }
body.theme-claude .settings-tabs button { display: block; width: 100%; padding: 9px 12px; border: none; border-radius: 8px; background: none; color: var(--fg-dim); text-align: left; font-size: 13px; cursor: pointer; }
body.theme-claude .settings-tabs button:hover { background: var(--item-hover); color: var(--fg); }
body.theme-claude .settings-tabs button.active { background: var(--item-active); color: var(--fg); font-weight: 600; }
body.theme-claude .settings-content { flex: 1; min-width: 0; padding: 22px 28px; overflow-y: auto; }
body.theme-claude .settings-content h3 { margin: 0 0 14px; font-size: 17px; font-weight: 650; }
body.theme-claude .settings-content h3:not(:first-child) { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
body.theme-claude .settings-field { margin: 0 0 17px; }
body.theme-claude .settings-field-label { color: var(--fg); font-size: 13px; font-weight: 550; }
body.theme-claude .settings-field-desc, body.theme-claude .settings-lead { margin-top: 4px; color: var(--fg-dim); font-size: 12px; line-height: 1.55; }
body.theme-claude .settings-input, body.theme-claude .settings-select, body.theme-claude .settings-textarea { display: block; width: 100%; margin-top: 7px; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: transparent; color: var(--fg); outline: none; font-size: 13px; }
body.theme-claude .settings-input:focus, body.theme-claude .settings-select:focus, body.theme-claude .settings-textarea:focus { border-color: var(--accent); }
body.theme-claude .settings-copy-row { display: flex; align-items: flex-end; gap: 8px; }
body.theme-claude .settings-copy-row .settings-input { flex: 1; margin-top: 7px; }
body.theme-claude .settings-copy-row button { flex: 0 0 auto; margin-bottom: 0; }
body.theme-claude .settings-textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
body.theme-claude .settings-radio-group { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
body.theme-claude .settings-radio { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--fg-dim); font-size: 12px; cursor: pointer; }
body.theme-claude .settings-radio:has(input:checked) { color: var(--fg); border-color: var(--accent); background: var(--item-hover); }
body.theme-claude .settings-radio input { accent-color: var(--accent); }
body.theme-claude .settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
body.theme-claude .settings-toggle-row:last-of-type { border-bottom: none; }
body.theme-claude .settings-upgrade-card { display: flex; flex-direction: column; gap: 7px; margin: 0 0 18px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--item-hover); }
body.theme-claude .settings-upgrade-card span { color: var(--fg-dim); font-size: 12px; line-height: 1.5; }
body.theme-claude .settings-upgrade-card button { align-self: flex-start; margin-top: 3px; }
body.theme-claude .settings-switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 38px; height: 22px; cursor: pointer; }
body.theme-claude .settings-switch input { position: absolute; opacity: 0; }
body.theme-claude .settings-switch span { width: 38px; height: 22px; border-radius: 12px; background: var(--border-strong); transition: background .15s ease; }
body.theme-claude .settings-switch span::after { content: ''; display: block; width: 18px; height: 18px; margin: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s ease; }
body.theme-claude .settings-switch input:checked + span { background: var(--accent); }
body.theme-claude .settings-switch input:checked + span::after { transform: translateX(16px); }
body.theme-claude .settings-inline-select { display: flex; gap: 9px; }
body.theme-claude .settings-inline-select .settings-field { flex: 1; margin-bottom: 0; }
body.theme-claude .settings-day-group { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
body.theme-claude .settings-day-group label { padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 7px; color: var(--fg-dim); font-size: 12px; cursor: pointer; }
body.theme-claude .settings-day-group label:has(input:checked) { color: var(--fg); border-color: var(--accent); background: var(--item-hover); }
body.theme-claude .settings-day-group label.disabled { opacity: .45; cursor: not-allowed; }
body.theme-claude .settings-day-group input { margin-right: 4px; accent-color: var(--accent); }
body.theme-claude .settings-avatar { display: inline-flex; align-items: center; gap: 9px; margin-top: 7px; padding: 5px 10px 5px 5px; border: 1px solid var(--border-strong); border-radius: 10px; background: none; color: var(--fg); }
body.theme-claude .settings-avatar span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--user-avatar); color: #fff; font-size: 12px; }
body.theme-claude .settings-avatar small { font-size: 12px; }
body.theme-claude .settings-account-card, body.theme-claude .settings-list-card, body.theme-claude .billing-plan-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--item-hover); }
body.theme-claude .settings-account-card, body.theme-claude .settings-list-card { flex-direction: column; align-items: flex-start; }
body.theme-claude .settings-account-card span, body.theme-claude .settings-list-card span { color: var(--fg-dim); font-size: 12px; }
body.theme-claude .settings-status-dot, body.theme-claude .settings-connected { color: #2d9b4b !important; font-size: 12px; }
body.theme-claude .settings-table-card { display: grid; gap: 8px; margin: 0 0 18px; }
body.theme-claude .settings-session-head, body.theme-claude .settings-session-row { display: grid; grid-template-columns: minmax(120px, 1.4fr) minmax(80px, .8fr) minmax(92px, 1fr) minmax(92px, 1fr) auto; align-items: center; gap: 10px; }
body.theme-claude .settings-session-head { padding: 0 12px 5px; color: var(--fg-dim); font-size: 11px; }
body.theme-claude .settings-session-table { display: grid; gap: 6px; }
body.theme-claude .settings-session-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--item-hover); font-size: 12px; }
body.theme-claude .settings-session-row > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.theme-claude .settings-session-row > span { color: var(--fg-dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.theme-claude .settings-session-row button { padding: 6px 9px; white-space: nowrap; }
body.theme-claude .settings-links { display: flex; gap: 14px; margin: -4px 0 16px; font-size: 12px; }
body.theme-claude .settings-links a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
body.theme-claude .settings-action-stack { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 22px; }
body.theme-claude .settings-action-stack button, body.theme-claude .settings-content > button { padding: 8px 12px; border-radius: 8px; }
.settings-action-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--border, rgba(0,0,0,.12)); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.settings-action-row > span:first-child { display: flex; flex-direction: column; gap: 3px; }
.settings-action-row small { color: var(--fg-dim, #777); }
body.theme-claude .settings-disclosures { display: grid; gap: 8px; margin: 16px 0 4px; }
body.theme-claude .settings-disclosures .settings-action-row { padding: 11px 12px; border-radius: 9px; }
body.theme-claude .settings-disclosure-body { margin: -2px 4px 4px; padding: 10px 12px; border-left: 2px solid var(--accent); color: var(--fg-dim); font-size: 12px; line-height: 1.6; }
.recent-file-list { display: flex; flex-direction: column; gap: 6px; max-height: 48vh; overflow: auto; }
.recent-file-item { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.recent-file-item:hover { background: var(--item-hover, rgba(0,0,0,.06)); }
.recent-file-item > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recent-file-item small { color: var(--fg-dim, #777); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-file-add { color: var(--accent, #d97757); font-size: 12px; }
body.theme-claude .danger-btn { color: #c0392b; border-color: rgba(192,57,43,.35); }
body.theme-claude .billing-plan-card strong, body.theme-claude .billing-plan-card span { display: block; }
body.theme-claude .billing-plan-card span { margin-top: 4px; color: var(--fg-dim); font-size: 12px; }
body.theme-claude .billing-plan-badge { color: var(--accent) !important; }
body.theme-claude .settings-feature-list { display: grid; gap: 8px; margin: 16px 0 20px; color: var(--fg-dim); font-size: 13px; }
body.theme-claude .settings-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
body.theme-claude .settings-toolbar .settings-input { margin: 0; flex: 1; }
body.theme-claude .settings-filter-row { display: flex; gap: 6px; margin: 10px 0; color: var(--fg-dim); font-size: 12px; }
body.theme-claude .settings-filter-row button { padding: 5px 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
body.theme-claude .settings-filter-row button:hover, body.theme-claude .settings-filter-row button.active { border-color: var(--border-strong); background: var(--item-hover); color: var(--fg); }
body.theme-claude .settings-installed-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
body.theme-claude .settings-installed-list > div { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
body.theme-claude .settings-installed-list > div button { padding: 4px 8px; font-size: 11px; }
body.theme-claude .settings-empty { padding: 18px; color: var(--fg-dim); font-size: 13px; }
body.theme-claude .settings-token-list { display: grid; gap: 7px; margin-bottom: 9px; }
body.theme-claude .settings-token-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; }
body.theme-claude .settings-token-row code { color: var(--fg-dim); font-size: 12px; }
body.theme-claude .settings-code-preview { margin: 8px 0 16px; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--code-bg); }
body.theme-claude .settings-code-preview[data-code-preview="dark"] { background: #171717; color: #f3f4f6; }
body.theme-claude .settings-code-preview[data-code-preview="light"] { color: #1f2933; }
body.theme-claude .settings-code-preview-head { display: flex; justify-content: space-between; padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--fg-dim); font-size: 11px; }
body.theme-claude .settings-code-preview pre { margin: 0; padding: 10px 12px; overflow-x: auto; background: transparent; color: inherit; font-size: 12px; line-height: 1.55; }
body.theme-claude .settings-code-preview code { font-family: var(--claude-code-font-family, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); }
body.theme-claude .settings-code-preview .code-line-number { display: inline-block; width: 17px; margin-right: 8px; color: var(--text-tertiary); text-align: right; user-select: none; }
body.theme-claude .settings-code-preview .code-keyword { color: #9a63c7; }
body.theme-claude .settings-code-preview .code-type { color: #2c7a7b; }
body.theme-claude .settings-code-preview .code-string { color: #b45309; }
body.theme-claude .settings-token-table { display: grid; gap: 7px; margin-bottom: 9px; }
body.theme-claude .settings-token-head, body.theme-claude .settings-token-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, .7fr) auto; align-items: center; gap: 10px; }
body.theme-claude .settings-token-head { padding: 0 11px 3px; color: var(--fg-dim); font-size: 11px; }
body.theme-claude .settings-token-table .settings-token-row { margin: 0; }
body.theme-claude .settings-token-row > span { color: var(--fg-dim); font-size: 11px; }
body.theme-claude .settings-token-empty { padding: 14px 11px; border: 1px solid var(--border); border-radius: 8px; color: var(--fg-dim); font-size: 12px; line-height: 1.5; }
body.theme-claude .settings-code-session-note { margin: 0 0 10px; }
body.theme-claude .skill-editor-modal { width: min(560px, 92vw); }
body.theme-claude .settings-memory-box { margin-top: 16px; padding: 12px; min-height: 60px; border: 1px solid var(--border); border-radius: 9px; color: var(--fg-dim); font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
body.theme-claude .settings-memory-editor { min-height: 132px; }
body.theme-claude .settings-info-text { line-height: 1.7; }
body.theme-claude[data-chat-font="sans"] .msg-content, body.theme-claude[data-chat-font="sans"] .welcome-title { font-family: var(--font-body); }
body.theme-claude[data-chat-font="mono"] .msg-content, body.theme-claude[data-chat-font="mono"] .welcome-title { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
body.theme-claude[data-claude-code-font="mono"] .msg-content pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
body.theme-claude[data-claude-code-appearance="light"] .msg-content pre { background: #f7f7f5; color: #1f2933; }
body.theme-claude[data-claude-code-appearance="dark"] .msg-content pre { background: #171717; color: #f3f4f6; }
body.theme-claude[data-claude-code-theme-light="solarized"] .msg-content pre { background: #fdf6e3; color: #657b83; }
body.theme-claude[data-claude-code-theme-dark="midnight"] .msg-content pre { background: #0d1b2a; color: #d9e8f5; }
body.theme-claude[data-claude-code-theme-light="high-contrast"] .msg-content pre { background: #fff; color: #000; border-color: #000; }
body.theme-claude[data-claude-code-theme-dark="high-contrast"] .msg-content pre { background: #000; color: #fff; border-color: #fff; }
body.theme-claude.claude-code-high-contrast .msg-content pre { border-color: currentColor; box-shadow: 0 0 0 1px currentColor; }
body.theme-claude.claude-code-sans .msg-content pre, body.theme-claude.claude-code-sans .msg-content pre code { font-family: var(--font-body); }
body.theme-claude[data-claude-code-transcript-size="small"] .msg-content { font-size: .9em; }
body.theme-claude[data-claude-code-transcript-size="large"] .msg-content { font-size: 1.1em; }
body.theme-claude[data-claude-code-transcript-width="wide"] .msg-body { max-width: min(960px, 92vw); }
body.theme-claude[data-claude-code-transcript-width="narrow"] .msg-body { max-width: min(620px, 78vw); }
body.theme-claude .artifact-enable-btn { display: block; margin: 10px auto 0; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 7px; background: none; color: var(--accent); cursor: pointer; }
body.theme-claude.reduced-motion *, body.theme-claude.reduced-motion *::before, body.theme-claude.reduced-motion *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
@media (max-width: 680px) {
  body.theme-claude .settings-modal-wide { width: 96vw; }
  body.theme-claude .settings-layout { display: block; height: min(680px, calc(92vh - 74px)); }
  body.theme-claude .settings-tabs { display: flex; width: 100%; padding: 8px; border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto; gap: 4px; }
  body.theme-claude .settings-tabs button { flex: 0 0 auto; width: auto; white-space: nowrap; }
  body.theme-claude .settings-content { padding: 18px; height: calc(100% - 58px); }
}
body.theme-claude .artifact-preview { max-height: 52vh; overflow: auto; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--code-bg); color: var(--fg); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
body.theme-claude .artifact-preview code { background: none; padding: 0; }
body.theme-claude .artifact-exec-panel { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--item-hover) 52%, transparent); }
body.theme-claude .artifact-exec-head { display: flex; flex-direction: column; gap: 3px; }
body.theme-claude .artifact-exec-head small { color: var(--fg-dim); font-size: 11px; line-height: 1.45; }
body.theme-claude .artifact-exec-panel textarea { width: 100%; min-height: 42px; box-sizing: border-box; resize: vertical; padding: 8px 9px; border: 1px solid var(--border-strong); border-radius: 8px; outline: none; background: var(--bg-main); color: var(--fg); font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
body.theme-claude .artifact-exec-panel textarea:focus { border-color: var(--accent); }
body.theme-claude .artifact-exec-actions { display: flex; align-items: flex-start; gap: 9px; }
body.theme-claude .artifact-exec-actions [data-artifact-output] { flex: 1; max-height: 140px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg-dim); font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
body.theme-claude .attach-file-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 210px; padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 9px; color: var(--fg-dim); font-size: 11px; }
body.theme-claude .attach-file-icon { color: var(--accent); }
body.theme-claude .attach-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.theme-claude .attach-file-chip button { width: 16px; height: 16px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--fg-dim); display: inline-flex; align-items: center; justify-content: center; }
body.theme-claude .attach-file-chip button:hover { background: var(--item-hover); color: var(--fg); }
body.theme-claude .project-list { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 12px; max-height: 42vh; overflow-y: auto; }
body.theme-claude .project-dialog-search { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; color: var(--fg-dim); }
body.theme-claude .project-dialog-search:focus-within { border-color: var(--accent); }
body.theme-claude .project-dialog-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--fg); font-size: 13px; }
body.theme-claude .project-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: none; border-radius: 8px; background: none; color: var(--fg); cursor: pointer; text-align: left; font-size: 13px; }
body.theme-claude .project-item.active { background: var(--item-active); }
body.theme-claude .project-item-check { margin-left: auto; color: var(--accent); }
body.theme-claude .project-item:hover { background: var(--item-hover); }
body.theme-claude .session-title-bar { border: 0; background: transparent; color: var(--fg-dim); font-size: 13px; padding: 5px 8px; border-radius: 7px; max-width: min(360px, 34vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
body.theme-claude .session-title-bar:hover { background: var(--item-hover); color: var(--fg); }
body.theme-claude .session-star { color: var(--accent); margin-right: 4px; }
body.theme-claude .session-item.unread .session-title { font-weight: 650; }
body.theme-claude .session-menu-heading { padding: 5px 10px 7px; color: var(--fg-dim); font-size: 11px; }
body.theme-claude .session-group-menu { min-width: 132px; }
body.theme-claude .effort-context-menu { min-width: 205px; }
body.theme-claude .effort-menu-description { margin: 0 10px 7px; color: var(--fg-dim); font-size: 10px; line-height: 1.45; }
body.theme-claude .session-menu-divider, body.theme-claude .model-menu-divider { height: 1px; margin: 6px 2px; background: var(--border); }
body.theme-claude .model-menu-heading { padding: 6px 10px 4px; color: var(--fg-dim); font-size: 10px; font-weight: 650; }
body.theme-claude .claude-catalog-item.model-unavailable { opacity: .62; }
body.theme-claude .claude-catalog-item:disabled { cursor: not-allowed; }
body.theme-claude .effort-context-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.theme-claude .effort-context-menu button small { color: var(--fg-dim); font-size: 10px; }
body.theme-claude .model-effort-item, body.theme-claude .model-thinking-item { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 9px; }
body.theme-claude .model-effort-item .mi-label small { color: var(--fg-dim); font-weight: 400; margin-left: 6px; }
body.theme-claude .model-thinking-item.active { background: var(--item-active); }
body.theme-claude .model-more-context-menu { min-width: 190px; }
body.theme-claude .model-more-context-menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.theme-claude .model-more-context-menu button small { color: var(--fg-dim); font-size: 10px; }
body.theme-claude .model-more-context-menu button.model-unavailable { color: var(--fg-dim); }

/* ChatGPT 临时聊天 / Grok 私密模式顶栏入口 */
.private-top-btn {
  border: 0;
  background: transparent;
  color: var(--fg-dim, #6b6b6b);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.private-top-btn:hover, .private-top-btn.active { background: var(--item-hover, rgba(0,0,0,.06)); color: var(--fg, #222); }
.gemini-settings-top-btn { border: 0; background: transparent; color: var(--fg-dim, #6b6b6b); border-radius: 8px; padding: 6px 9px; font-size: 17px; line-height: 1; cursor: pointer; }
.gemini-settings-top-btn:hover { background: var(--item-hover, rgba(0,0,0,.06)); color: var(--fg, #222); }
body.theme-claude .shortcuts-list { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
body.theme-claude .shortcuts-list > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 13px; }
body.theme-claude .shortcuts-list kbd { padding: 3px 7px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; color: var(--fg-dim); font-size: 11px; white-space: nowrap; }
body.theme-claude .claude-products { padding: 8px; }
body.theme-claude .claude-section-toggle, body.theme-claude .claude-product-item { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 8px; background: transparent; color: var(--fg-dim); text-align: left; cursor: pointer; }
body.theme-claude .claude-section-toggle { justify-content: space-between; padding: 5px 9px; font-size: 11px; font-weight: 600; }
body.theme-claude .claude-product-item { padding: 7px 10px 7px 20px; font-size: 12px; }
body.theme-claude .claude-section-toggle:hover, body.theme-claude .claude-product-item:hover { background: var(--item-hover); color: var(--fg); }
body.theme-claude .claude-product-item svg { width: 15px; height: 15px; }
body.theme-claude .msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 3px 0 8px; }
body.theme-claude .map-search-row { display: flex; gap: 8px; margin: 10px 0 14px; }
body.theme-claude .map-search-row input { flex: 1; min-width: 0; }
body.theme-claude .map-results { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow: auto; }
body.theme-claude .map-result { display: flex; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; }
body.theme-claude .map-result > div:first-child { min-width: 0; }
body.theme-claude .map-result strong, body.theme-claude .map-result small { display: block; }
body.theme-claude .map-result small { color: var(--fg-dim); margin-top: 3px; line-height: 1.4; }
body.theme-claude .map-result-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
body.theme-claude .map-result-actions button { color: var(--accent); background: none; border: 0; cursor: pointer; font-size: 12px; white-space: nowrap; }
body.theme-claude .msg-file-chip { display: inline-flex; align-items: center; max-width: 260px; padding: 6px 9px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--fg-dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.theme-claude .artifact-tabs { display: flex; gap: 3px; margin: 0 0 10px; padding: 3px; border-radius: 8px; background: var(--item-hover); width: max-content; }
body.theme-claude .artifact-tabs button { border: 0; border-radius: 6px; padding: 6px 12px; background: transparent; color: var(--fg-dim); cursor: pointer; font-size: 12px; }
body.theme-claude .artifact-tabs button.active { background: var(--bg-main); color: var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
body.theme-claude .artifact-frame { display: block; width: 100%; height: 52vh; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
body.theme-claude .feedback-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 12px 0; }
body.theme-claude .feedback-reasons button { padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: transparent; color: var(--fg); text-align: left; cursor: pointer; font-size: 12px; }
body.theme-claude .feedback-reasons button:hover, body.theme-claude .feedback-reasons button.active { border-color: var(--accent); background: var(--item-hover); }
body.theme-claude .feedback-detail { width: 100%; min-height: 75px; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: transparent; color: var(--fg); resize: vertical; font: inherit; font-size: 12px; }
body.theme-claude .share-btn { align-self: center; margin: 4px auto 0; border: 1px solid var(--border-strong); border-radius: 8px; background: transparent; color: var(--fg-dim); padding: 6px 11px; font-size: 11px; cursor: pointer; }
body.theme-claude .share-btn:hover { background: var(--item-hover); color: var(--fg); }
body.theme-claude .msg-sources { margin: 9px 0 4px; }
body.theme-claude .shared-manager-list { max-height: 48vh; overflow-y: auto; }
body.theme-claude .shared-manager-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
body.theme-claude .shared-manager-row:first-child { border-top: 0; }
body.theme-claude .shared-manager-row > div:first-child { min-width: 0; display: flex; flex-direction: column; }
body.theme-claude .shared-manager-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
body.theme-claude .shared-manager-row small { color: var(--fg-dim); font-size: 10px; }
body.theme-claude .shared-manager-row.revoked { opacity: .58; }
body.theme-claude .shared-manager-actions { display: flex; gap: 5px; flex-shrink: 0; }
body.theme-claude .shared-manager-actions button { padding: 5px 7px; border: 1px solid var(--border-strong); border-radius: 6px; background: transparent; color: var(--fg); font-size: 10px; cursor: pointer; }
body.theme-claude .shared-manager-actions button:hover { background: var(--item-hover); }
body.theme-claude .shared-manager-actions .danger-btn { color: #b34f3b; }
body.theme-claude .design-workspace-modal { width: min(620px, 92vw); }
body.theme-claude .design-workspace-modal .tip { margin: 3px 0 0; }
body.theme-claude .design-type-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 8px 0 16px; }
body.theme-claude .design-type-list button { min-height: 52px; padding: 8px; border: 1px solid var(--border-strong); border-radius: 9px; background: transparent; color: var(--fg-dim); font-size: 11px; cursor: pointer; }
body.theme-claude .design-type-list button:hover, body.theme-claude .design-type-list button.active { border-color: var(--accent); background: var(--item-hover); color: var(--fg); }
body.theme-claude .design-workspace-modal [data-design-prompt] { width: 100%; min-height: 120px; padding: 10px; border: 1px solid var(--border-strong); border-radius: 9px; background: transparent; color: var(--fg); resize: vertical; font: inherit; font-size: 13px; }
@media (max-width: 480px) { body.theme-claude .style-options { grid-template-columns: 1fr; } }

/* Provider adapter contract. Legacy dimensions remain aliases because the
 * existing Claude sidebar and chat layout consume --sidebar-w / --chat-w. */
body.theme-claude {
  --provider-sidebar-width: 288px;
  --provider-content-width: 800px;
  --sidebar-w: var(--provider-sidebar-width);
  --chat-w: var(--provider-content-width);
}

body.theme-claude :where(button, a, input, textarea, select, summary):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, CanvasText);
  outline-offset: 2px;
}

@media (max-width: 680px) {
  body.theme-claude .topbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  body.theme-claude .composer-wrap {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  /* 移动端对齐官方图1：双层卡片 + 紧凑药丸胶囊 */
  body.theme-claude .composer {
    border-radius: 22px;
    padding: 10px 14px 10px;
  }
  body.theme-claude .composer-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    grid-template-columns: none;
    grid-template-areas: none;
  }
  body.theme-claude .composer-grid textarea {
    order: 1;
    width: 100%;
    flex: 1 1 100%;
    min-height: 40px;
    padding: 2px 2px 6px;
    font-size: 16px;
  }
  body.theme-claude .composer-grid .attach-btn {
    order: 2;
    margin: 0;
    width: 32px;
    height: 32px;
  }
  body.theme-claude .composer-grid .composer-settings-btn {
    order: 3;
    margin: 0;
  }
  body.theme-claude .composer-picker {
    display: block !important;
    order: 4;
    margin-left: 0;
    max-width: 150px;
  }
  body.theme-claude .composer-model-btn {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 999px;
    background: var(--item-hover, rgba(0, 0, 0, 0.06));
    color: var(--fg);
    white-space: nowrap;
    gap: 4px;
  }
  html[data-theme="dark"] body.theme-claude .composer-model-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  body.theme-claude .composer-model-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.theme-claude .composer-grid .mic-area {
    order: 5;
    margin-left: auto;
  }
  body.theme-claude .composer-grid #send-btn,
  body.theme-claude .composer-grid #stop-btn {
    order: 6;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-claude *,
  body.theme-claude *::before,
  body.theme-claude *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  body.theme-claude :where(button, a, input, textarea, select, summary):focus-visible {
    outline: 2px solid Highlight;
  }

  body.theme-claude :where(.composer, .modal, .user-menu, .model-menu, .session-context-menu) {
    background: Canvas;
    color: CanvasText;
    border-color: CanvasText;
    box-shadow: none;
  }
}

/* Official Claude wait: a warm orange breathing orb. */
body.theme-claude .waiting-claude {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  animation: claude-waiting-breathe 1.1s infinite ease-in-out;
}
body.theme-claude .waiting-elapsed {
  font-size: 12px;
  color: var(--fg-dim, #8f8f86);
}
@keyframes claude-waiting-breathe {
  0%, 100% { opacity: .28; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-claude .waiting-claude { animation: none; opacity: 1; transform: none; }
}

/* 账单余额与点数消耗明细 */
body.theme-claude .claude-billing-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--item-hover);
}
body.theme-claude .claude-billing-balance span {
  color: var(--fg-dim);
  font-size: 12px;
}
body.theme-claude .claude-billing-usage {
  max-height: 340px;
  margin-bottom: 8px;
  overflow-y: auto;
}