/* aichat.css — 系统统一品牌风格，适配暗色模式 */

body { margin: 0; background: transparent; }

/* ── App Shell ── */
.aichat-app {
  --aichat-border: var(--border);
  --aichat-accent: var(--amber);
  /* 代码块配色 token：亮色下保持暖黑，暗色由 [data-theme="dark"] 覆盖 */
  --aichat-code-header-bg: #1c1917;
  --aichat-code-bg: #292524;
  --aichat-code-border: #44403c;
  --aichat-code-fg: #e7e5e4;
  --aichat-code-muted: #a8a29e;
  display: flex;
  height: 100vh;
  background: transparent;
  font-family: var(--font-body);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
  z-index: 1;
}

/* apple-radical 皮肤的 :where(button) 会把 display 提成 inline-flex 并压过 hidden 属性，
   这里用 .aichat-app 前缀拉高优先级，保证桌面态与 hidden 态可靠隐藏 */
.aichat-app .aichat-mobile-sidebar-toggle,
.aichat-app .aichat-sidebar-scrim { display: none; }

/* ── Sidebar ── */
.aichat-sidebar {
  width: 280px;
  background: color-mix(in oklab, var(--bg-card, var(--bg)) 72%, transparent);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.aichat-sidebar-header {
  padding: 20px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aichat-back-hub {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 0;
  transition: color .15s;
}
.aichat-back-hub:hover { color: var(--text-primary); }

.aichat-new-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 16px;
  background: var(--amber);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.aichat-new-btn:hover { background: #e67e00; box-shadow: var(--shadow-card); }
.aichat-new-btn:active { transform: scale(.98); }
.aichat-new-btn:disabled { opacity: .6; cursor: wait; transform: none; }

.aichat-sessions { list-style: none; margin: 0; padding: 4px 8px; overflow-y: auto; flex: 1; }
.aichat-sessions::-webkit-scrollbar { width: 4px; }
.aichat-sessions::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.aichat-session-group-label { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 5px; color: var(--text-muted); font-size: 11px; font-weight: 650; letter-spacing: .03em; }
.aichat-session-group-label:first-child { padding-top: 8px; }
.aichat-session-group-label i { min-width: 18px; color: var(--text-muted); font-size: 10px; font-style: normal; font-weight: 500; text-align: right; }
.aichat-session-state { padding: 28px 12px; color: var(--text-muted); font-size: 12px; line-height: 1.65; text-align: center; }
.aichat-session-state button,
.aichat-state-action { margin-top: 8px; border: 0; background: transparent; color: var(--aichat-accent); font: inherit; font-weight: 600; cursor: pointer; }
.aichat-session-list-skeleton { display: grid; gap: 9px; padding: 10px 6px; }
.aichat-session-list-skeleton span { display: block; height: 46px; border-radius: var(--radius-md); background: var(--bg-elevated); animation: aichat-skeleton-pulse 1.4s ease-in-out infinite; }

.aichat-session-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: var(--radius-md);
  margin-bottom: 2px;
  transition: background .15s;
  position: relative;
  gap: 10px;
  animation: slideIn .2s ease-out;
}
.aichat-session-item:hover { background: var(--bg-elevated); }
.aichat-session-item.active { background: var(--bg-elevated); }
.aichat-session-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--amber);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.aichat-session-info { flex: 1; min-width: 0; }
.aichat-session-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aichat-session-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.aichat-archive-btn {
  opacity: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: opacity .15s, background .15s, color .15s;
  flex-shrink: 0;
}
.aichat-session-item:hover .aichat-archive-btn { opacity: 1; }
.aichat-archive-btn:hover { background: var(--red-dim); color: var(--red); }

/* ── Main ── */
.aichat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  position: relative;
}

/* ── Agent 工作台：会话执行结果的可复用素材 ── */
.aichat-workbench {
  width: 360px;
  flex: 0 0 360px;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  min-width: 0;
  overflow: hidden;
  transition: width .2s ease, flex-basis .2s ease;
  position: relative;
}
/* 拖拽手柄：工作台左侧边沿 */
.aichat-workbench-resizer {
  position: absolute;
  top: 0;
  left: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  transition: background .15s;
}
.aichat-workbench-resizer:hover,
.aichat-workbench-resizer--active {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
.aichat-workbench--collapsed .aichat-workbench-resizer { display: none; }
.aichat-workbench-header {
  min-height: 64px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
}
.aichat-workbench--collapsed { width: 0; flex-basis: 0; min-width: 0; border-left-width: 0; }
.aichat-workbench--collapsed .aichat-workbench-header h2,
.aichat-workbench--collapsed .aichat-workbench-tabs,
.aichat-workbench--collapsed .aichat-workbench-subtabs,
.aichat-workbench--collapsed .aichat-artifact-list,
.aichat-workbench--collapsed .aichat-canvas-empty,
.aichat-workbench--collapsed .aichat-skills-list { display: none; }
.aichat-workbench-header h2 { margin: 0; font-size: 16px; color: var(--text-primary); }
.aichat-workbench-tabs { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--bg-elevated); }
.aichat-workbench-tabs button,
.aichat-workbench-subtabs button {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: inherit;
}
.aichat-workbench-tabs button { padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.aichat-workbench-tabs button.active { color: var(--text-primary); background: var(--bg-card); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.aichat-workbench-subtabs { display: grid; grid-template-columns: 1fr 1fr; padding: 0 16px; border-bottom: 1px solid var(--border); }
/* hidden 属性需显式覆盖 display:grid，否则切换画布/技能时二级 tab 仍可见 */
.aichat-workbench-subtabs[hidden] { display: none; }
.aichat-workbench-subtabs button { padding: 13px 8px 11px; font-size: 12px; border-bottom: 2px solid transparent; }
.aichat-workbench-subtabs button.active { color: var(--text-primary); border-bottom-color: var(--amber); font-weight: 600; }

.aichat-agent-skill-explanations { flex-basis: 100%; display: grid; gap: 6px; margin-top: 4px; }
.aichat-agent-skill-explain { display: grid; gap: 2px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--bg-elevated) 85%, transparent); }
.aichat-agent-skill-explain strong { font-size: 12px; color: var(--text-primary); }
.aichat-agent-skill-explain span { font-size: 11px; color: var(--text-secondary); }
.aichat-agent-skill-explain small { font-size: 10px; color: var(--text-muted); overflow-wrap: anywhere; }

.aichat-memory-list { overflow-y: auto; padding: 12px; display: grid; align-content: start; gap: 10px; }
.aichat-memory-list[hidden] { display: none; }
.aichat-memory-intro { padding: 10px; border-radius: 8px; background: var(--bg-elevated); color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
.aichat-memory-card { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
.aichat-memory-card header { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--text-secondary); }
.aichat-memory-card header strong { color: var(--amber); }
.aichat-memory-card p { margin: 0; color: var(--text-primary); font-size: 13px; line-height: 1.5; }
.aichat-memory-card small { color: var(--text-muted); font-size: 10px; line-height: 1.4; }
.aichat-memory-card footer { display: flex; gap: 8px; }
.aichat-memory-card footer button, .aichat-memory-list [data-memory-action="reload"] { border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; background: var(--bg-elevated); color: var(--text-secondary); cursor: pointer; font-size: 11px; }
.aichat-artifact-list { flex: 1; overflow-y: auto; padding: 14px; background: var(--bg-deep); }
.aichat-skills-list { flex: 1; display: flex; flex-direction: column; padding: 0; background: var(--bg-deep); overflow: hidden; }
.aichat-skills-list[hidden] { display: none; }
/* 上半分栏：技能 */
.aichat-skills-upper { flex: 0 0 auto; max-height: 45%; overflow-y: auto; padding: 10px 14px 6px; border-bottom: 1px solid var(--border); }
/* 下半分栏：工具能力 */
.aichat-tools-lower { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px 14px; }
.aichat-skills-section-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.aichat-skills-section-hint { margin: -3px 0 9px; color: var(--text-muted); font-size: 10px; line-height: 1.5; }
.aichat-skills-items { display: flex; flex-direction: column; gap: 6px; }
.aichat-tools-items { display: flex; flex-direction: column; gap: 6px; }
/* 工具卡片 */
.aichat-tool-card { display: flex; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); }
.aichat-tool-card__icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--bg-elevated); font-size: 12px; }
.aichat-tool-card__body { flex: 1; min-width: 0; }
.aichat-tool-card__name { color: var(--text-primary); font-size: 12px; font-weight: 600; }
.aichat-tool-card--disabled { opacity: .58; }
.aichat-tool-card__state { margin-top: 2px; color: var(--text-muted); font-size: 10px; }
.aichat-tool-card__desc { margin-top: 1px; color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.aichat-tool-category-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin: 8px 0 4px; padding-top: 6px; border-top: 1px dashed var(--border); }
.aichat-tool-category-label:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.aichat-skill-row { display: flex; gap: 10px; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); }
.aichat-skill-row__icon { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--bg-elevated); font-size: 14px; }
.aichat-skill-row__body { flex: 1; min-width: 0; }
.aichat-skill-row__name { color: var(--text-primary); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aichat-skill-row__desc { margin-top: 2px; color: var(--text-muted); font-size: 11px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aichat-skill-row__tags { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.aichat-skill-tag { padding: 1px 6px; border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-muted); font-size: 10px; }
.aichat-artifact-empty { padding: 36px 20px; text-align: center; color: var(--text-muted); font-size: 13px; line-height: 1.7; }
.aichat-workbench-state { padding: 12px 8px; }
.aichat-workbench-state-action { color: var(--aichat-accent); }
.aichat-artifact-empty button { display: block; margin: 8px auto 0; border: 0; background: transparent; color: var(--aichat-accent); font: inherit; font-weight: 600; cursor: pointer; }
.aichat-artifact-card { margin-bottom: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.aichat-artifact-card__head { display: flex; align-items: flex-start; gap: 8px; }
.aichat-artifact-icon { font-size: 16px; line-height: 1.4; }
.aichat-artifact-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aichat-artifact-title { color: var(--text-primary); font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aichat-artifact-time { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.aichat-artifact-score-wrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.aichat-artifact-score { color: var(--text-primary); font-size: 21px; line-height: 1; font-weight: 750; }
.aichat-artifact-score-label { color: var(--text-muted); font-size: 10px; }
.aichat-artifact-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 7px 24px; }
.aichat-artifact-tag { padding: 2px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); background: var(--bg-elevated); font-size: 10px; }
.aichat-artifact-product { display: -webkit-box; margin: 0 0 11px; overflow: hidden; color: var(--text-primary); font-size: 12px; font-weight: 550; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.aichat-artifact-summary { margin: 11px 0; color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
.aichat-artifact-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.aichat-artifact-metric { min-width: 0; padding: 8px 5px; border-radius: var(--radius-md); background: var(--bg-elevated); text-align: center; }
.aichat-artifact-metric span { display: block; color: var(--text-muted); font-size: 10px; }
.aichat-artifact-metric strong { display: block; margin-top: 3px; color: var(--text-primary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aichat-artifact-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 10px; }
.aichat-artifact-status { color: var(--aichat-accent); font-weight: 650; }
.aichat-artifact-status--muted { color: var(--text-muted); }
.aichat-artifact-actions { display: inline-flex; align-items: center; gap: 6px; }
.aichat-artifact-action, .aichat-canvas-use { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text-primary); font-size: 12px; font-weight: 600; cursor: pointer; }
.aichat-artifact-action--secondary { color: var(--text-muted); font-size: 11px; }
.aichat-artifact-action:hover, .aichat-canvas-use:hover { border-color: var(--amber); color: var(--amber); }
.aichat-run-card { margin-bottom: 10px; padding: 13px; border: 1px solid var(--border); border-left: 3px solid var(--text-muted); border-radius: var(--radius-md); background: var(--bg-card); }
.aichat-run-card--running { border-left-color: var(--amber); }
.aichat-run-card--completed { border-left-color: #10b981; }
.aichat-run-card--fallback { border-left-color: #6366f1; }
.aichat-run-card--failed { border-left-color: var(--red); }
.aichat-run-card--cancelled { border-left-color: var(--text-muted); }
.aichat-run-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.aichat-run-card-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-size: 13px; }
.aichat-run-card-head span { flex: 0 0 auto; color: var(--text-secondary); font-size: 11px; }
.aichat-run-card p { margin: 7px 0 2px; color: var(--text-secondary); font-size: 12px; }
.aichat-run-card small { color: var(--text-muted); font-size: 11px; }
.aichat-canvas-empty { flex: 1; padding: 44px 24px; color: var(--text-muted); text-align: center; background: var(--bg-deep); }
.aichat-canvas-empty span { color: var(--text-primary); font-size: 14px; font-weight: 650; }
.aichat-canvas-empty p { font-size: 12px; line-height: 1.7; }
.aichat-canvas-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; text-align: left; }
.aichat-canvas-header button, .aichat-canvas-card button { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.aichat-canvas-header button:hover, .aichat-canvas-card button:hover { color: var(--red); }
.aichat-canvas-list { display: grid; gap: 9px; text-align: left; }
.aichat-canvas-card { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: start; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); }
.aichat-canvas-card strong { display: block; color: var(--text-primary); font-size: 12px; }
.aichat-canvas-card p { margin: 3px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }

@media (max-width: 900px) {
  .aichat-workbench { display: none; }
  .aichat-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 120;
    width: min(320px, 86vw);
    transform: translateX(-105%);
    visibility: hidden;
    pointer-events: none;
    box-shadow: 12px 0 32px rgba(0,0,0,.16);
    transition: transform .2s ease, visibility .2s ease;
  }
  .aichat-sidebar.aichat-sidebar--open { transform: translateX(0); visibility: visible; pointer-events: auto; }
  .aichat-app .aichat-mobile-sidebar-toggle {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 35;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
  }
  .aichat-app .aichat-sidebar-scrim:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: block;
    border: 0;
    background: rgba(15,23,42,.42);
  }
  /* header/role-cards/stream 的移动端补位规则统一置于文件尾部，避免重复声明 */
}

/* ── Message Stream ── */
.aichat-stream {
  flex: 1;
  overflow-y: auto;
  padding: 70px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-behavior: smooth;
}
.aichat-stream[hidden],
.aichat-role-cards[hidden],
.aichat-attachments-preview[hidden],
.aichat-input-send[hidden],
.aichat-input-stop[hidden] { display: none; }
.aichat-stream::-webkit-scrollbar { width: 6px; }
.aichat-stream::-webkit-scrollbar-track { background: transparent; }
.aichat-stream::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.aichat-stream::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

.aichat-new-msg-btn {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: var(--amber);
  color: #fff;
  border: none;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  z-index: 20;
  transition: opacity .2s, transform .2s;
  animation: aichat-new-msg-pop .25s ease-out;
}
.aichat-new-msg-btn:hover { background: #e67e00; transform: translateX(-50%) translateY(-1px); }
.aichat-new-msg-btn[hidden] { display: none; }
@keyframes aichat-new-msg-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Message Group ── */
.aichat-msg-group {
  display: flex;
  flex-direction: column;
  max-width: 82%;
}
.aichat-msg-group--enter {
  animation: msgIn .3s var(--ease-out);
}
.aichat-msg-group--user {
  align-self: flex-end;
  align-items: flex-end;
}
.aichat-msg-group--assistant {
  align-self: flex-start;
  align-items: flex-start;
}
.aichat-msg-group--assistant .aichat-msg-actions,
.aichat-msg-group--assistant .aichat-msg-meta {
  margin-left: 46px;
}
.aichat-msg-group--user .aichat-msg-actions,
.aichat-msg-group--user .aichat-msg-meta {
  margin-right: 46px;
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.aichat-msg {
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  position: relative;
  max-width: 100%;
}

.aichat-msg-user {
  /* 与 Apple skin 的冷蓝行动色保持一致，token 在 .aichat-app 皮肤段定义 */
  background: var(--chat-blue, var(--amber));
  color: #fff;
  border-bottom-right-radius: 4px;
}

.aichat-msg-assistant {
  background: color-mix(in oklab, var(--bg-card, var(--bg)) 80%, transparent);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

.aichat-msg-content {
  font-size: 14.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.aichat-msg-content h1, .aichat-msg-content h2, .aichat-msg-content h3 { margin: 20px 0 8px; color: var(--text-primary); line-height: 1.35; }
.aichat-msg-content h1 { font-size: 19px; }
.aichat-msg-content h2 { font-size: 17px; }
.aichat-msg-content h3 { font-size: 15px; }
.aichat-msg-content p { margin: 0 0 12px; }
.aichat-msg-content ul, .aichat-msg-content ol { margin: 0 0 12px; padding-left: 22px; }
.aichat-msg-content li + li { margin-top: 4px; }
.aichat-msg-content hr { margin: 18px 0; border: 0; border-top: 1px solid var(--border); }
.aichat-markdown-table-wrap { margin: 12px 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.aichat-markdown-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13px; }
.aichat-markdown-table-wrap th, .aichat-markdown-table-wrap td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.aichat-markdown-table-wrap th { background: var(--bg-elevated); color: var(--text-primary); font-weight: 600; }
.aichat-markdown-table-wrap tr:last-child td { border-bottom: 0; }

.aichat-msg-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}

.aichat-agent-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.aichat-agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  background: rgba(99,102,241,.10);
  color: var(--accent);
  border: 1px solid rgba(99,102,241,.20);
}
.aichat-agent-chip--state { background: rgba(99,102,241,.12); color: var(--accent); font-weight: 600; }
.aichat-agent-chip--skill { background: rgba(16,185,129,.10); color: #10b981; border-color: rgba(16,185,129,.20); }
.aichat-agent-chip--memory { background: rgba(245,158,11,.10); color: #f59e0b; border-color: rgba(245,158,11,.20); }
.aichat-agent-chip--quality-pass { background: rgba(16,185,129,.10); color: #059669; border-color: rgba(16,185,129,.20); }
.aichat-agent-chip--quality-partial { background: rgba(245,158,11,.10); color: #b45309; border-color: rgba(245,158,11,.20); }
.aichat-agent-chip--quality-fail { background: rgba(239,68,68,.10); color: #dc2626; border-color: rgba(239,68,68,.20); }
.aichat-agent-chip--quality-unavailable { background: rgba(107,114,128,.10); color: #6b7280; border-color: rgba(107,114,128,.20); }
.aichat-agent-activity { margin: 8px 0 12px; padding: 4px 0 2px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* AFV-003/007：气泡顶部持久告警条，失败不再只藏在折叠执行链里 */
.aichat-agent-notices { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 10px; }
.aichat-agent-notice { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid rgba(239,68,68,.25); border-radius: var(--radius-md, 8px); background: rgba(239,68,68,.06); font-size: 12px; line-height: 1.5; }
.aichat-agent-notice--fallback, .aichat-agent-notice--source_failure { border-color: rgba(245,158,11,.30); background: rgba(245,158,11,.07); }
.aichat-agent-notice__icon { flex: 0 0 auto; color: var(--red, #dc2626); }
.aichat-agent-notice--fallback .aichat-agent-notice__icon, .aichat-agent-notice--source_failure .aichat-agent-notice__icon { color: var(--amber, #f59e0b); }
.aichat-agent-notice__body { min-width: 0; color: var(--text-secondary); }
.aichat-agent-notice__body strong { color: var(--text-primary); font-weight: 600; }
.aichat-agent-notice__body small { display: block; margin-top: 2px; color: var(--text-muted); font-size: inherit; }
.aichat-agent-notice__more { padding: 2px 4px; color: var(--text-muted); font-size: 11px; }
.aichat-agent-activity__head { padding: 7px 0; color: var(--text-muted); font-size: 12px; }
.aichat-agent-activity__evidence { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 6px; }
.aichat-agent-activity__chip { display: inline-block; max-width: 100%; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in oklab, var(--success, #16a34a) 8%, transparent); color: var(--text-secondary); font-size: 11px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aichat-agent-activity__list { max-height: 58px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.aichat-agent-activity__list--expanded { max-height: 218px; }
.aichat-agent-activity__item { display: flex; align-items: flex-start; gap: 8px; padding: 5px 4px; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.aichat-agent-activity__icon { flex: 0 0 15px; color: var(--text-muted); text-align: center; }
.aichat-agent-activity__content { min-width: 0; }
.aichat-agent-activity__content strong { color: inherit; font-weight: 500; }
.aichat-agent-activity__content small { display: inline; margin-left: 6px; color: var(--text-muted); font-size: inherit; }
.aichat-agent-activity__item--tool_result .aichat-agent-activity__icon { color: #10b981; }
.aichat-agent-activity__item--tool_error .aichat-agent-activity__icon { color: var(--red); }
.aichat-agent-activity__item--source_failure .aichat-agent-activity__icon { color: var(--amber, #f59e0b); }
.aichat-agent-activity__item--response { color: var(--text-muted); }
.aichat-agent-activity__item--active { margin: 2px 0; padding: 6px 7px; border: 1px solid var(--amber); border-radius: 5px; background: rgba(245,158,11,.06); color: var(--text-primary); }
.aichat-agent-activity__item--active .aichat-agent-activity__icon { color: var(--amber); }
.aichat-agent-activity__expand { display: block; width: 100%; margin-top: 4px; padding: 4px 0; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 11px; text-align: center; }
.aichat-agent-activity__expand:hover { color: var(--accent); }
.aichat-agent-thoughts {
  margin: 6px 0 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  /* 基于前景色混合，亮暗两套主题下都能保持可见的浅底 */
  background: color-mix(in oklab, var(--text-primary) 5%, transparent);
  font-size: 12px;
  color: var(--text-secondary);
}
.aichat-agent-thoughts summary {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
}
.aichat-agent-thoughts ol { margin: 6px 0 0 18px; padding: 0; }
.aichat-agent-thoughts li { margin: 3px 0; line-height: 1.5; }

.aichat-msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.aichat-msg-img {
  max-width: 240px;
  max-height: 240px;
  border-radius: var(--radius-md);
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: transform .2s;
}
.aichat-msg-img:hover { transform: scale(1.02); }
.aichat-msg-file {
  font-size: 12px;
  color: var(--text-muted);
}
.aichat-finish { color: var(--amber); font-size: 11px; }

.aichat-process-hint {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.aichat-typing-dots--inline {
  display: inline-flex;
  gap: 3px;
  min-height: auto;
  padding: 0;
}
.aichat-typing-dots--inline span {
  width: 5px;
  height: 5px;
}
.aichat-agent-activity__item--process .aichat-agent-activity__icon { color: var(--text-muted); }
.aichat-agent-activity__item--fallback { color: var(--amber); }
.aichat-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
}
.aichat-typing-dots span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  opacity: .3;
  animation: typingBounce 1.4s ease-in-out infinite;
}
.aichat-typing-dots span:nth-child(2) { animation-delay: .2s; }
.aichat-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .3; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ── Input Bar ── */
.aichat-input {
  position: relative;
  border-top: 1px solid var(--border);
  padding: 12px 24px 16px;
  background: color-mix(in oklab, var(--bg-card, var(--bg)) 72%, transparent);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  flex-shrink: 0;
}

.aichat-input-card {
  background: color-mix(in oklab, var(--bg-input, var(--bg)) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: visible;
  transition: box-shadow .2s, border-color .2s;
}
.aichat-input-card:focus-within {
  box-shadow: 0 0 0 3px var(--amber-dim), var(--shadow-card);
  border-color: var(--amber);
}
.aichat-upload-state { display: flex; align-items: center; gap: 8px; min-width: 150px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-secondary); font-size: 11px; }
.aichat-upload-state::before { content: ""; width: 14px; height: 14px; flex: 0 0 auto; border: 2px solid var(--border); border-top-color: var(--amber); border-radius: 50%; animation: aichat-spin .8s linear infinite; }
.aichat-upload-state--error::before { content: "!"; display: grid; place-items: center; border: 0; animation: none; color: var(--red); font-weight: 800; }
@keyframes aichat-spin { to { transform: rotate(360deg); } }

.aichat-input-toolbar {
  display: flex;
  align-items: center;
  padding: 6px 10px 2px;
  gap: 1px;
}

.aichat-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  padding: 0 8px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.aichat-tool-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.aichat-tool-btn.active { background: var(--amber-dim); color: var(--amber); }

.aichat-tool-btn svg { display: block; }

.aichat-tool-btn--labeled {
  width: auto;
  padding: 0 8px;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
}
.aichat-tool-btn--labeled span {
  white-space: nowrap;
}

.aichat-tool-sep { width: 1px; height: 14px; background: var(--border); margin: 0 3px; flex-shrink: 0; }

.aichat-input-row {
  display: flex;
  align-items: flex-end;
  padding: 0 10px 6px;
  gap: 6px;
}

.aichat-input-textarea {
  flex: 1;
  resize: none;
  field-sizing: content;
  border: none;
  background: transparent;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
  min-height: 38px;
  max-height: 160px;
  overflow-y: auto;
  padding: 6px 0;
}
.aichat-input-textarea::placeholder { color: var(--text-muted); }

.aichat-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 10px 8px;
}

.aichat-input-counter {
  font-size: 11px;
  color: var(--text-secondary);
  transition: color .15s;
}
.aichat-counter-warn { color: var(--red); font-weight: 500; }

.aichat-input-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aichat-token-counter {
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  transition: color .15s;
  cursor: default;
  user-select: none;
}
.aichat-token-counter--warn { color: var(--amber); font-weight: 500; }
.aichat-token-counter--danger { color: var(--red); font-weight: 600; }
.aichat-token-counter--truncated::before {
  content: "✂ ";
  margin-right: 2px;
}

.aichat-input-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--amber);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: background .15s, transform .1s, box-shadow .15s;
  flex-shrink: 0;
}
.aichat-input-send:hover:not(:disabled) { background: #e67e00; transform: scale(1.05); }
.aichat-input-send:active:not(:disabled) { transform: scale(.94); }
.aichat-input-send:disabled { opacity: .35; cursor: not-allowed; }

/* ── Stop 按钮 ── */
.aichat-input-stop {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  border: none;
  background: var(--red-dim);
  color: var(--red);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  transition: background .15s, transform .1s;
  flex-shrink: 0;
}
.aichat-input-stop:hover { background: rgba(239,68,68,.2); transform: scale(1.03); }
.aichat-input-stop:active { transform: scale(.96); }

/* ── Role Modal ── */
.aichat-role-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26,26,26,.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: backdropIn .2s ease-out;
}

.aichat-role-modal-backdrop[hidden] { display: none; }
@keyframes backdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.aichat-role-modal {
  background: color-mix(in oklab, var(--bg-card, var(--bg)) 88%, transparent);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  width: min(480px, 92vw);
  max-height: min(640px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn .25s var(--ease-out);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(.96) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.aichat-role-modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.aichat-role-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.aichat-role-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 20px;
  padding: 4px;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.aichat-role-modal-close:hover { background: var(--bg-elevated); color: var(--text-primary); }

.aichat-role-list {
  list-style: none;
  margin: 0;
  padding: 8px 12px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
}

.aichat-role-list .aichat-role-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  width: 100%;
  min-height: 62px;
  height: auto;
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .12s;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.aichat-role-item:hover { background: var(--amber-dim); border-color: var(--amber-glow); }
.aichat-role-item.selected { background: var(--amber-dim); border-color: var(--amber); }
.aichat-role-item:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.aichat-role-icon {
  width: 32px;
  height: 32px;
  margin-top: 2px;
  border-radius: 9px;
  background: var(--amber-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.aichat-role-icon svg { width: 18px; height: 18px; }
.aichat-role-copy { min-width: 0; }

.aichat-role-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}
.aichat-role-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.aichat-role-provider {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 3px;
}

.aichat-role-modal-footer {
  padding: 12px 24px 16px;
  text-align: right;
}

.aichat-role-cancel {
  padding: 9px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s;
}
.aichat-role-cancel:hover { background: var(--bg-elevated); }

/* ── Attachment Preview ── */
.aichat-attachments-preview {
  display: flex;
  padding: 8px 14px;
  gap: 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
}
.aichat-tool-sep--push { margin-left: auto; }
.aichat-attachment-thumb {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--border);
  transition: border-color .15s;
}
.aichat-attachment-thumb:hover { border-color: var(--amber); }
.aichat-attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aichat-attachment-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
}
.aichat-attachment-thumb:hover .aichat-attachment-remove { opacity: 1; }
.aichat-attachment-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2px 4px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 9px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* ── Tool Call/Result Cards ── */
.aichat-msg-tool {
  align-self: flex-start;
}
.aichat-tool-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  max-width: 85%;
  overflow: hidden;
}
.aichat-tool-card--call {
  background: var(--amber-dim);
  border: 1px solid var(--amber-glow);
  color: var(--amber);
}
.aichat-tool-card--result {
  background: var(--green-dim);
  border: 1px solid rgba(16,185,129,.25);
  color: var(--green);
}
.aichat-tool-card--error {
  background: var(--red-dim);
  border: 1px solid rgba(239,68,68,.25);
  color: var(--red);
}
.aichat-tool-icon { font-size: 13px; flex-shrink: 0; }
.aichat-tool-name { font-weight: 600; flex-shrink: 0; }
.aichat-tool-status { font-size: 11px; opacity: .7; flex-shrink: 0; }
.aichat-tool-status--error { color: var(--red); opacity: 1; font-weight: 600; }
.aichat-tool-latency {
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 8px;
}
.aichat-tool-error {
  font-size: 12px;
  color: var(--red);
  background: var(--red-dim);
  padding: 6px 8px;
  border-radius: 6px;
  margin-top: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}
.aichat-tool-args {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.aichat-tool-result {
  font-size: 11px;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

/* ── Copy Button ── */
.aichat-copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: opacity .15s, background .15s, color .15s;
  z-index: 2;
}
.aichat-msg-content { position: relative; }
.aichat-msg-content:hover .aichat-copy-btn { opacity: 1; }
.aichat-copy-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.aichat-copy-copied { background: var(--green); color: #fff; border-color: var(--green); opacity: 1; }

/* ── Message Actions ── */
.aichat-msg-actions {
  display: flex;
  gap: 2px;
  margin-top: 6px;
}
.aichat-msg-group:hover .aichat-msg-actions { opacity: 1; }
.aichat-msg-action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.aichat-msg-action-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.aichat-msg-action-btn--active { font-weight: 600; color: var(--aichat-accent); }
.aichat-msg-action-btn svg { width: 13px; height: 13px; }

/* ── 复制下拉菜单 ── */
.aichat-copy-wrapper { position: relative; display: inline-block; }
.aichat-caret { font-size: 10px; opacity: .7; margin-left: 2px; }
.aichat-copy-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
  padding: 4px;
  z-index: 30;
  min-width: 140px;
}
.aichat-copy-menu[hidden] { display: none; }
.aichat-copy-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}
.aichat-copy-menu button:hover { background: var(--bg-elevated); }

/* ── Code Block ── */
.aichat-code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 14px;
  background: var(--aichat-code-header-bg);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: 11px;
  color: var(--aichat-code-muted);
  margin-top: 10px;
  margin-bottom: -1px;
}
.aichat-code-header + pre {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin-top: 0;
}
.aichat-code-copy {
  background: none;
  border: none;
  color: var(--aichat-code-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  transition: color .12s, background .12s;
}
.aichat-code-copy:hover { color: var(--aichat-code-fg); background: rgba(255,255,255,.06); }
.aichat-msg-content pre {
  margin: 12px 0;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--aichat-code-bg);
  color: var(--aichat-code-fg);
  font-size: 12.5px;
  line-height: 1.65;
  overflow-x: auto;
  border: 1px solid var(--aichat-code-border);
}
.aichat-msg-content pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
  border-radius: 0;
}
.aichat-msg-content code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: 5px;
}
.aichat-msg-user .aichat-msg-content code {
  background: rgba(255,255,255,.18);
  color: inherit;
}
.aichat-msg-content strong { font-weight: 600; }

/* ── Tag ── */
.aichat-tag {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
}
.aichat-tag--stop {
  background: var(--green-dim);
  color: var(--green);
}

/* ── Role Cards Grid ── */
.aichat-role-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  overflow-y: auto;
}

.aichat-role-cards-header {
  text-align: center;
  margin-bottom: 36px;
}

.aichat-role-cards-header h2 {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text-primary);
}

.aichat-role-cards-header p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

.aichat-role-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
  max-width: 960px;
  width: 100%;
}

.aichat-role-cards-grid--empty { margin-top: 18px; }

/* 角色卡是 button 元素：用 .aichat-app 前缀压过 apple-radical 的 :where(button) 基类，
   并显式重置其强加的 height/white-space/letter-spacing/gap */
.aichat-app .aichat-role-card {
  background: color-mix(in oklab, var(--bg-card, var(--bg)) 75%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  text-align: center;
  color: var(--text-primary);
  font: inherit;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  height: auto;
  gap: 0;
  white-space: normal;
  letter-spacing: normal;
}

.aichat-app .aichat-role-card:hover {
  border-color: var(--text-secondary);
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}
.aichat-role-card > * { min-width: 0; max-width: 100%; }
.aichat-app .aichat-role-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.aichat-app .aichat-role-card--loading { opacity: .68; pointer-events: none; cursor: wait; }
.aichat-role-card--loading::after { content: "正在创建会话…"; margin-top: 10px; color: var(--amber); font-size: 11px; font-weight: 600; }
.aichat-role-state { width: min(560px, 100%); padding: 42px 28px; border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--bg-card); color: var(--text-muted); text-align: center; }
.aichat-role-state strong { display: block; margin-bottom: 7px; color: var(--text-primary); font-size: 16px; }
.aichat-role-skeleton { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(900px, 100%); }
.aichat-role-skeleton span { height: 180px; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); animation: aichat-skeleton-pulse 1.4s ease-in-out infinite; }
.aichat-conversation-empty { margin: auto; max-width: 520px; padding: 28px; color: var(--text-muted); text-align: center; line-height: 1.75; }
.aichat-conversation-empty strong { display: block; margin-bottom: 6px; color: var(--text-primary); font-size: 17px; }
@keyframes aichat-skeleton-pulse { 0%,100% { opacity:.42; } 50% { opacity:.86; } }

.aichat-session-loading { display:flex; flex-direction:column; gap:16px; padding:24px; max-width:760px; margin:0 auto; width:100%; }
.aichat-session-skeleton-row { display:flex; gap:12px; align-items:flex-start; }
.aichat-session-skeleton-row--user { flex-direction:row-reverse; }
.aichat-session-skeleton-avatar { width:36px; height:36px; border-radius:50%; background:var(--aichat-border,#e5e7eb); flex-shrink:0; animation:aichat-skeleton-pulse 1.4s ease-in-out infinite; }
.aichat-session-skeleton-copy { flex:1; display:flex; flex-direction:column; gap:8px; }
.aichat-session-skeleton-copy--user { align-items:flex-end; }
.aichat-session-skeleton-line { border-radius:4px; background:var(--aichat-border,#e5e7eb); animation:aichat-skeleton-pulse 1.4s ease-in-out infinite; }
.aichat-session-skeleton-line--14 { height:14px; }
.aichat-session-skeleton-line--12 { height:12px; }
.aichat-session-skeleton-line--50 { width:50%; }
.aichat-session-skeleton-line--60 { width:60%; }
.aichat-session-skeleton-line--75 { width:75%; }
.aichat-session-skeleton-line--80 { width:80%; }
.aichat-session-skeleton-line--90 { width:90%; }
.aichat-session-skeleton-line--100 { width:100%; }
.aichat-session-skeleton-line--delay-15 { animation-delay:.15s; }
.aichat-session-skeleton-line--delay-30 { animation-delay:.3s; }

.aichat-role-card-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  padding: 12px;
  border-radius: 14px;
  background: var(--amber-dim);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aichat-role-card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.aichat-role-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.aichat-role-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.aichat-role-card-meta {
  font-size: 11px;
  color: var(--text-secondary);
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 自定义角色卡片 ── */
.aichat-app .aichat-role-card--custom {
  position: relative;
  background: linear-gradient(135deg, var(--secondary-dim), var(--amber-dim));
  border: 1.5px dashed var(--secondary-glow);
}
.aichat-app .aichat-role-card--custom:hover {
  border-color: var(--secondary);
}
.aichat-app .aichat-role-card--add {
  background: var(--bg-elevated);
  border: 1.5px dashed var(--text-secondary);
  transition: transform .15s, border-color .15s ease, background-color .15s ease, color .15s ease;
}
.aichat-app .aichat-role-card--add:hover {
  border-color: var(--amber);
  background: var(--amber-dim);
}
.aichat-role-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  background: var(--secondary-dim);
  color: var(--secondary);
}
.aichat-role-card-icon--custom {
  background: var(--secondary-dim);
  color: var(--secondary);
}
.aichat-role-card-icon--add {
  background: var(--surface-overlay-soft);
  color: var(--text-muted);
}
.aichat-role-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.aichat-app .aichat-role-card-edit {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  height: auto;
  padding: 2px 6px;
  border-radius: 4px;
}
.aichat-role-card-edit:hover {
  background: var(--bg-elevated);
  color: var(--amber);
}
.aichat-app .aichat-role-card-del {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
  z-index: 2;
}
.aichat-role-card--custom:hover .aichat-role-card-del {
  opacity: 1;
}
.aichat-role-card-del:hover {
  background: var(--red-dim);
  color: var(--red);
}

/* ── 自定义角色模态框 ── */
.aichat-custom-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26,26,26,.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.aichat-custom-modal-backdrop.show {
  display: flex;
}
.aichat-custom-modal {
  background: color-mix(in oklab, var(--bg-card, var(--bg)) 88%, transparent);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.aichat-custom-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.aichat-custom-modal-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.aichat-custom-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
}
.aichat-custom-modal-close:hover { color: var(--text-primary); }
.aichat-custom-form {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.aichat-custom-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aichat-custom-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.aichat-custom-field input,
.aichat-custom-field textarea {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}
.aichat-custom-field input:focus,
.aichat-custom-field textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-dim);
}
.aichat-custom-field--toggle label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.aichat-custom-field--toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--amber);
  cursor: pointer;
}
.aichat-custom-required { color: var(--red); }
.aichat-custom-hint {
  background: var(--amber-dim);
  color: var(--text-muted);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
  line-height: 1.5;
}
.aichat-custom-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
}
.aichat-custom-btn-cancel,
.aichat-custom-btn-save {
  padding: 9px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.aichat-custom-btn-save {
  background: var(--amber);
  color: #fff;
  border-color: var(--amber);
}
.aichat-custom-btn-save:hover {
  background: #e67e00;
}

/* ── Toast 通知 ── */
.aichat-toast-container {
  position: fixed;
  bottom: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}
.aichat-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  font-size: 13px;
  color: var(--text-primary);
  animation: aichatToastIn .35s var(--ease-out);
  pointer-events: auto;
}
.aichat-toast svg { width: 16px; height: 16px; flex-shrink: 0; }
.aichat-toast--success svg { color: var(--green); }
.aichat-toast--error svg { color: var(--red); }
.aichat-toast--leaving { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.aichat-clipboard-helper { position: fixed; left: -9999px; }
body.aichat-is-resizing { cursor: col-resize; user-select: none; }
@keyframes aichatToastIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* ── AlertDialog 确认弹窗 ── */
.aichat-alert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,26,26,.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  backdrop-filter: blur(4px);
  animation: aichatFadeIn .2s ease-out;
}
.aichat-alert-overlay.aichat-show { display: flex; }
@keyframes aichatFadeIn { from { opacity: 0; } to { opacity: 1; } }
.aichat-alert-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 400px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  animation: aichatScaleIn .25s var(--ease-out);
}
@keyframes aichatScaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.aichat-alert-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.aichat-alert-desc { font-size: 13.5px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; }
.aichat-alert-actions { display: flex; justify-content: flex-end; gap: 8px; }
.aichat-alert-btn {
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: background .12s;
}
.aichat-alert-btn:hover { background: var(--bg-elevated); }
.aichat-alert-btn--danger {
  background: var(--red);
  color: #fff;
  border-color: transparent;
}
.aichat-alert-btn--danger:hover { background: #b91c1c; }

/* ── D1 受控 Tool 审批弹窗（由 message-facade.js 在 approval_required 事件时动态挂载） ── */
.aichat-approval-modal { display: none; }
.aichat-approval-modal.show { display: block; }
.aichat-approval-backdrop {
  position: fixed; inset: 0;
  background: rgba(26,26,26,.5);
  z-index: 9999;
  backdrop-filter: blur(4px);
  animation: aichatFadeIn .2s ease-out;
}
.aichat-approval-dialog {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 420px;
  max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  z-index: 10000;
  animation: aichatScaleIn .25s var(--ease-out);
}
.aichat-approval-title { font-size: 17px; font-weight: 600; margin-bottom: 16px; }
.aichat-approval-tool { font-size: 14px; font-weight: 500; margin-bottom: 6px; word-break: break-all; }
.aichat-approval-args { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; word-break: break-all; max-height: 180px; overflow-y: auto; }
.aichat-approval-hint { font-size: 12.5px; color: var(--text-muted); margin-bottom: 20px; line-height: 1.6; }
.aichat-approval-actions { display: flex; justify-content: flex-end; gap: 8px; }
.aichat-approval-reject, .aichat-approval-confirm {
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: background .12s;
}
.aichat-approval-reject:hover { background: var(--bg-elevated); }
.aichat-approval-confirm {
  background: var(--red);
  color: #fff;
  border-color: transparent;
}
.aichat-approval-confirm:hover { background: #b91c1c; }

/* ── 消息头像 ── */
.aichat-msg-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.aichat-msg-group--user .aichat-msg-row { flex-direction: row-reverse; }

.aichat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  position: relative;
}
.aichat-avatar--user { background: var(--amber); color: #fff; }
.aichat-avatar--wang { background: var(--amber-dim); color: #d97706; border: 2px solid rgba(255,140,0,.3); }
.aichat-avatar--listing { background: var(--secondary-dim); color: var(--secondary); border: 2px solid rgba(99,102,241,.25); }
.aichat-avatar--ceo { background: rgba(124,58,237,.1); color: #7c3aed; border: 2px solid rgba(124,58,237,.25); }
.aichat-avatar--scorer { background: var(--green-dim); color: var(--green); border: 2px solid rgba(16,185,129,.25); }
.aichat-avatar--general { background: var(--bg-elevated); color: var(--text-secondary); border: 2px solid var(--border); }
.aichat-avatar--user::after { display: none; }
.aichat-avatar::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--bg-deep);
  background: var(--green);
}

/* ── 日期分割线 ── */
.aichat-date-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
}
.aichat-date-divider::before,
.aichat-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── 会话搜索框 ── */
.aichat-session-search {
  padding: 0 12px 8px;
}
.aichat-session-search input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.aichat-session-search input:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-dim);
  background-color: var(--bg-input);
}
.aichat-session-search input::placeholder { color: var(--text-muted); }

/* ── 活跃 / 已归档 切换 tabs ── */
.aichat-session-tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px 8px;
}
.aichat-session-tab {
  flex: 1;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.aichat-session-tab:hover { background: var(--bg-elevated); color: var(--text-primary); }
.aichat-session-tab.active {
  background: var(--bg-elevated);
  color: var(--amber);
}

/* ── 已归档会话标记 ── */
.aichat-session-archived-tag {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.aichat-session-item--archived { opacity: .65; }
.aichat-session-item--archived .aichat-session-title { font-style: italic; }

/* ── 会话列表头像 ── */
.aichat-session-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

/* ── Header ── */
.aichat-header {
  height: 52px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 12px;
  background: color-mix(in oklab, var(--bg-card, var(--bg)) 72%, transparent);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}
.aichat-header[hidden],
#aichat-input-area[hidden] { display: none; }
.aichat-header-title {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}
.aichat-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.aichat-header-badge .aichat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.aichat-header-actions {
  display: flex;
  gap: 2px;
}
.aichat-header-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
}
.aichat-header-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
/* 激活态：抽屉按钮工作台展开时高亮，与其他按钮保持圆角矩形风格一致 */
.aichat-header-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
/* 带文字标签的 header 按钮（技能市场等管理入口，区别于图标按钮） */
.aichat-header-btn-labeled {
  width: auto;
  height: 34px;
  padding: 0 12px;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border-subtle, rgba(255,255,255,.12));
  text-decoration: none;
}
/* 「标记沉淀」已选中：星标高亮，与工作台展开态一致的 accent 语义 */
.aichat-header-btn.is-marked,
.aichat-header-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.aichat-header-btn.is-marked:hover,
.aichat-header-btn[aria-pressed="true"]:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}

/* ── 图片灯箱 ── */
.aichat-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(26,26,26,.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: zoom-out;
}
.aichat-lightbox.aichat-show { display: flex; }
.aichat-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

/* 移动端规则置于组件样式之后，确保不会被桌面默认值覆盖。 */
@media (max-width: 900px) {
  .aichat-header { padding-left: 92px; }
  .aichat-role-cards { padding-top: 64px; }
  .aichat-stream { padding-top: 62px; }
}

@media (max-width: 480px) {
  .aichat-input { padding: 10px 10px 14px; }
  .aichat-input-toolbar { flex-wrap: wrap; padding: 8px 10px 2px; gap: 2px; }
  .aichat-tool-btn--labeled span { display: none; }
  .aichat-tool-btn--labeled { width: 34px; padding: 0; }
  .aichat-tool-sep { margin: 0 2px; }
  .aichat-input-footer { padding-inline: 10px; gap: 8px; }
  .aichat-shortcuts { display: none; }
  .aichat-header-badge { display: none; }
  .aichat-header-btn-labeled span { display: none; }
  .aichat-header-btn-labeled { width: 34px; padding: 0; }
  .aichat-role-cards-header h2 { font-size: 23px; }
  .aichat-role-cards-grid { grid-template-columns: 1fr; }
}

/* ── 拖拽上传覆盖层 ── */
.aichat-drag-overlay {
  position: absolute;
  inset: 0;
  background: var(--amber-dim);
  border: 2px dashed var(--amber);
  border-radius: var(--radius-lg);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  font-size: 14px;
  color: var(--amber);
  font-weight: 500;
  pointer-events: none;
}
.aichat-drag-overlay.aichat-show { display: flex; }

/* ── 快捷键提示 ── */
.aichat-shortcuts {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  gap: 12px;
}
.aichat-shortcuts kbd {
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* ── Marketplace glass workbench skin ─────────────────────────────
   参考三栏 AI 工作台：暖橙会话导航、冷蓝行动按钮、中央渐变画布。
   只覆盖 presentation 层，不改变会话、消息和 Agent 交互契约。 */
.aichat-app {
  --chat-warm: #f47a12;
  --chat-warm-soft: rgba(244, 122, 18, .09);
  --chat-warm-border: rgba(244, 122, 18, .26);
  --chat-blue: #1687ed;
  --chat-blue-hover: #0b78d8;
  --chat-panel: #fbfcff;
  --chat-panel-strong: rgba(255, 255, 255, .92);
  --chat-line: rgba(75, 91, 119, .13);
  --chat-shadow: 0 18px 48px rgba(68, 84, 112, .10);
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 34% 78%, rgba(255, 157, 83, .21), transparent 38%),
    radial-gradient(circle at 72% 78%, rgba(91, 155, 255, .20), transparent 40%),
    linear-gradient(135deg, #fbfcff 0%, #f4f7fc 100%);
}

.aichat-sidebar,
.aichat-main,
.aichat-workbench {
  border: 1px solid var(--chat-line);
  border-radius: 20px;
  box-shadow: var(--chat-shadow);
}

.aichat-sidebar {
  width: 268px;
  background: var(--chat-panel);
  border-right: 1px solid var(--chat-line);
}

.aichat-sidebar-header {
  padding: 16px 14px 13px;
  gap: 12px;
}

.aichat-sidebar-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
}

.aichat-back-hub {
  gap: 9px;
  padding: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 680;
  letter-spacing: -.01em;
}

.aichat-sidebar-brandmark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(244, 122, 18, .22);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 237, 220, .90));
  color: var(--chat-warm);
  box-shadow: 0 6px 16px rgba(244, 122, 18, .12);
}

.aichat-sidebar-titlebar [data-theme-toggle] {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--chat-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .62);
  color: var(--text-secondary);
  box-shadow: none;
}

.aichat-new-btn {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--chat-warm-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 246, 237, .92));
  color: var(--chat-warm);
  font-weight: 680;
  box-shadow: 0 8px 22px rgba(244, 122, 18, .10);
}

.aichat-new-btn:hover {
  border-color: rgba(244, 122, 18, .44);
  background: rgba(255, 245, 235, .98);
  color: #db6508;
  box-shadow: 0 10px 24px rgba(244, 122, 18, .14);
}

.aichat-session-search { padding: 0 11px 9px; }
.aichat-session-search input {
  height: 38px;
  box-sizing: border-box;
  padding: 8px 12px 8px 32px;
  border-color: var(--chat-line);
  border-radius: 13px;
  background-color: rgba(255, 255, 255, .66);
  font: 400 13px/1.4 var(--font-body);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
}
.aichat-session-search input:focus {
  border-color: rgba(244, 122, 18, .38);
  box-shadow: 0 0 0 3px rgba(244, 122, 18, .10);
}

.aichat-session-tabs {
  gap: 5px;
  margin: 0 11px 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 13px;
  background: rgba(241, 244, 249, .58);
}
.aichat-session-tab {
  padding: 6px 10px;
  border-color: transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
}
.aichat-session-tab.active {
  background: rgba(255, 255, 255, .92);
  color: var(--chat-warm);
  box-shadow: 0 4px 12px rgba(75, 91, 119, .08);
}

.aichat-sessions { padding: 4px 8px 12px; }
.aichat-session-group-label { padding: 14px 10px 6px; }
.aichat-session-item {
  min-height: 54px;
  box-sizing: border-box;
  margin-bottom: 3px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 13px;
}
.aichat-session-item:hover { background: rgba(255, 255, 255, .58); }
.aichat-session-item.active {
  border-color: var(--chat-warm-border);
  background: linear-gradient(90deg, rgba(255, 241, 228, .92), rgba(255, 249, 244, .72));
  box-shadow: 0 8px 20px rgba(244, 122, 18, .08);
}
.aichat-session-item.active::before {
  top: 10px;
  bottom: 10px;
  left: -1px;
  width: 3px;
  background: var(--chat-warm);
}
.aichat-session-avatar {
  width: 32px;
  height: 32px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.aichat-session-title { font-weight: 610; }

.aichat-main {
  background:
    radial-gradient(circle at 0% 70%, rgba(255, 166, 94, .18), transparent 43%),
    radial-gradient(circle at 100% 72%, rgba(93, 158, 255, .21), transparent 45%),
    rgba(249, 251, 255, .54);
}

.aichat-header {
  height: 62px;
  padding: 0 20px;
  border-bottom-color: var(--chat-line);
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 8px 24px rgba(74, 91, 122, .035);
}
.aichat-header-title {
  font-size: 15px;
  font-weight: 680;
  letter-spacing: -.01em;
}
.aichat-header-badge {
  padding: 6px 12px;
  border-color: var(--chat-line);
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 5px 14px rgba(75, 91, 119, .06);
}
.aichat-header-actions { gap: 6px; }
.aichat-header-btn,
.aichat-header-btn-labeled {
  border: 1px solid var(--chat-line);
  background: rgba(255, 255, 255, .65);
  color: var(--text-muted);
  box-shadow: 0 5px 14px rgba(75, 91, 119, .05);
}
.aichat-header-btn:hover {
  border-color: rgba(22, 135, 237, .20);
  background: rgba(255, 255, 255, .94);
  color: var(--text-primary);
}
.aichat-header-btn[aria-expanded="true"],
.aichat-header-btn.is-marked,
.aichat-header-btn[aria-pressed="true"] {
  border-color: rgba(22, 135, 237, .18);
  background: rgba(22, 135, 237, .09);
  color: var(--chat-blue);
}

.aichat-stream {
  padding: 34px clamp(22px, 3vw, 46px) 28px;
  gap: 24px;
}
.aichat-msg-group { max-width: min(82%, 760px); }
.aichat-msg { padding: 15px 18px; border-radius: 18px; }
.aichat-msg-assistant {
  border-color: rgba(75, 91, 119, .12);
  border-bottom-left-radius: 18px;
  background: rgba(255, 255, 255, .80);
  box-shadow: 0 12px 30px rgba(68, 84, 112, .08);
}
.aichat-msg-user {
  border: 1px solid rgba(22, 135, 237, .22);
  border-bottom-right-radius: 18px;
  background: linear-gradient(145deg, #2798f4, #147fdf);
  box-shadow: 0 10px 24px rgba(22, 135, 237, .17);
}
.aichat-msg-content { font-size: 14px; line-height: 1.78; }
.aichat-msg-row { gap: 13px; }
.aichat-avatar {
  width: 36px;
  height: 36px;
  border-width: 1px;
  box-shadow: 0 6px 16px rgba(68, 84, 112, .08);
}
.aichat-avatar--user { background: var(--chat-blue); }
.aichat-avatar--wang { background: rgba(255, 242, 229, .96); color: var(--chat-warm); border-color: rgba(244, 122, 18, .24); }
.aichat-msg-group--assistant .aichat-msg-actions,
.aichat-msg-group--assistant .aichat-msg-meta { margin-left: 49px; }
.aichat-msg-group--user .aichat-msg-actions,
.aichat-msg-group--user .aichat-msg-meta { margin-right: 49px; }
.aichat-msg-actions { gap: 6px; margin-top: 9px; }
.aichat-msg-action-btn {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(75, 91, 119, .10);
  border-radius: 10px;
  background: rgba(255, 255, 255, .62);
  color: var(--text-muted);
  box-shadow: 0 4px 12px rgba(68, 84, 112, .045);
}
.aichat-msg-action-btn:hover { background: rgba(255, 255, 255, .94); color: var(--text-primary); }
.aichat-copy-btn { border-color: var(--chat-line); background: rgba(255, 255, 255, .82); }

.aichat-input {
  padding: 12px clamp(16px, 2.2vw, 30px) 18px;
  border-top: 0;
  background: linear-gradient(180deg, transparent, rgba(247, 250, 255, .48));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.aichat-input-card {
  width: min(100%, 980px);
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, .76);
  border-radius: 24px;
  background: rgba(255, 255, 255, .72);
  box-shadow:
    0 20px 48px rgba(62, 81, 116, .13),
    inset 0 0 0 1px rgba(75, 91, 119, .08);
}
.aichat-input-card:focus-within {
  border-color: rgba(22, 135, 237, .26);
  box-shadow:
    0 20px 48px rgba(62, 81, 116, .14),
    0 0 0 4px rgba(22, 135, 237, .07);
}
.aichat-input-toolbar { padding: 10px 12px 3px; gap: 7px; }
.aichat-tool-btn {
  height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(75, 91, 119, .10);
  border-radius: 999px;
  background: rgba(255, 255, 255, .66);
  color: var(--text-muted);
  box-shadow: 0 4px 12px rgba(68, 84, 112, .045);
}
.aichat-tool-btn:hover { background: rgba(255, 255, 255, .96); color: var(--text-primary); }
/* 麦克风等预留能力：disabled 态需与可用按钮有明确视觉区分 */
.aichat-tool-btn:disabled,
#aichat-input-area .aichat-tool-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
  background: transparent;
  border-color: transparent;
}
/* 设置等「开发中」入口：保留点击 toast 提示，但外观降级避免误导 */
#aichat-header .aichat-header-btn[aria-disabled="true"] {
  opacity: .5;
  box-shadow: none;
}
#aichat-header .aichat-header-btn[aria-disabled="true"]:hover {
  border-color: var(--chat-line);
  background: rgba(255, 255, 255, .65);
  color: var(--text-muted);
}
.aichat-tool-btn.active {
  border-color: rgba(22, 135, 237, .18);
  background: rgba(22, 135, 237, .08);
  color: var(--chat-blue);
}
.aichat-tool-sep { display: none; }
.aichat-input-row {
  align-items: center;
  gap: 12px;
  padding: 4px 14px 4px 15px;
}
.aichat-input-textarea {
  min-height: 54px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  font: 400 14px/1.6 var(--font-body);
  box-shadow: none;
}
.aichat-input-footer { padding: 2px 15px 11px; }
.aichat-input-send {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(75, 91, 119, .10);
  background: rgba(255, 255, 255, .88);
  color: var(--chat-blue);
  box-shadow: 0 7px 18px rgba(68, 84, 112, .11);
}
.aichat-input-send:hover:not(:disabled) {
  border-color: rgba(22, 135, 237, .22);
  background: #fff;
  color: var(--chat-blue-hover);
  box-shadow: 0 9px 22px rgba(22, 135, 237, .15);
}
.aichat-input-send:disabled {
  background: rgba(255, 255, 255, .72);
  color: rgba(22, 135, 237, .70);
  box-shadow: 0 5px 14px rgba(68, 84, 112, .07);
  opacity: 1;
}
.aichat-shortcuts kbd { border-color: rgba(22, 135, 237, .14); background: rgba(22, 135, 237, .06); color: var(--chat-blue); }

.aichat-workbench {
  border-left: 1px solid var(--chat-line);
  background: var(--chat-panel);
}
.aichat-workbench--collapsed { width: 0; flex-basis: 0; border-width: 0; box-shadow: none; }
.aichat-workbench-header {
  min-height: 62px;
  padding: 0 14px;
  gap: 12px;
  border-bottom-color: var(--chat-line);
}
.aichat-workbench-header h2 { font-size: 15px; font-weight: 680; }
.aichat-workbench-tabs {
  flex: 1;
  justify-content: space-between;
  padding: 3px;
  border: 1px solid rgba(75, 91, 119, .08);
  background: rgba(242, 245, 250, .64);
}
.aichat-workbench-tabs button {
  padding: 5px 9px;
  border-color: transparent;
  background: transparent;
  color: var(--text-secondary);
  box-shadow: none;
}
.aichat-workbench-tabs button.active {
  background: rgba(255, 255, 255, .94);
  color: var(--chat-blue);
  box-shadow: 0 4px 12px rgba(68, 84, 112, .07);
}
.aichat-workbench-subtabs {
  gap: 6px;
  margin: 10px 12px 0;
  padding: 4px;
  border: 1px solid rgba(75, 91, 119, .10);
  border-radius: 13px;
  background: rgba(246, 248, 252, .58);
}
.aichat-workbench-subtabs button {
  padding: 7px 8px;
  border-bottom: 0;
  border-color: transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  box-shadow: none;
}
.aichat-workbench-subtabs button.active {
  border-bottom: 0;
  background: rgba(255, 255, 255, .92);
  color: var(--chat-warm);
  box-shadow: 0 4px 12px rgba(68, 84, 112, .06);
}
.aichat-artifact-list,
.aichat-skills-list,
.aichat-canvas-empty { background: transparent; }
.aichat-artifact-list { padding: 12px; }
.aichat-artifact-list > .aichat-artifact-empty {
  display: flex;
  min-height: 56%;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 42px 24px;
  color: var(--text-muted);
}
.aichat-artifact-list > .aichat-artifact-empty::before {
  content: "";
  width: 96px;
  height: 82px;
  margin-bottom: 22px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg width='112' height='94' viewBox='0 0 112 94' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='30' y1='34' x2='91' y2='88' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F8FBFF'/%3E%3Cstop offset='1' stop-color='%23DCEAFF'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='5' y='15' width='102' height='79' filterUnits='userSpaceOnUse'%3E%3CfeDropShadow dx='0' dy='6' stdDeviation='5' flood-color='%238EB6E8' flood-opacity='.24'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b)'%3E%3Cpath d='M17 37c0-5 4-9 9-9h20l8 9h32c5 0 9 4 9 9v35H17V37Z' fill='url(%23a)' stroke='%23C9DCF5'/%3E%3Cpath d='M30 20h39c4 0 7 3 7 7v30H30V20Z' fill='white' stroke='%23D6E4F6'/%3E%3Cpath d='M40 31h26M40 39h21M40 47h24' stroke='%23A9C3E5' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M12 51h88L92 81H20L12 51Z' fill='url(%23a)' stroke='%23C9DCF5'/%3E%3C/g%3E%3Ccircle cx='7' cy='32' r='3' fill='%232CA7F8'/%3E%3Ccircle cx='104' cy='29' r='4' stroke='%23FFBE73' stroke-width='2'/%3E%3C/svg%3E");
  filter: drop-shadow(0 12px 18px rgba(85, 129, 190, .10));
}
.aichat-artifact-card,
.aichat-run-card,
.aichat-memory-card,
.aichat-skill-row,
.aichat-tool-card {
  border-color: rgba(75, 91, 119, .11);
  background: rgba(255, 255, 255, .70);
  box-shadow: 0 8px 22px rgba(68, 84, 112, .055);
}

/* 组件 ID 锚点在 aichat.css（全局基础样式之后加载）中守住
   AI Chat 自己的颜色语义，无需额外的强制优先级。 */
#aichat-new-btn {
  border-color: var(--chat-warm-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 246, 237, .92));
  color: var(--chat-warm);
}
#aichat-new-btn:hover {
  border-color: rgba(244, 122, 18, .44);
  background: rgba(255, 245, 235, .98);
  color: #db6508;
}
#aichat-session-tabs .aichat-session-tab {
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
}
#aichat-session-tabs .aichat-session-tab.active {
  background: rgba(255, 255, 255, .92);
  color: var(--chat-warm);
}
#aichat-header .aichat-header-btn {
  border-color: var(--chat-line);
  background: rgba(255, 255, 255, .65);
  color: var(--text-muted);
}
#aichat-workbench-toggle,
#aichat-btn-clear,
#aichat-btn-settings,
#aichat-send-btn {
  padding: 0;
}
#aichat-workbench-toggle > svg,
#aichat-btn-clear > svg,
#aichat-btn-settings > svg,
#aichat-send-btn > svg {
  display: block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex: 0 0 18px;
}
#aichat-send-btn > svg {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex-basis: 20px;
}
#aichat-header .aichat-header-btn:hover {
  border-color: rgba(22, 135, 237, .20);
  background: rgba(255, 255, 255, .94);
  color: var(--text-primary);
}
#aichat-header .aichat-header-btn[aria-expanded="true"],
#aichat-header .aichat-header-btn.is-marked,
#aichat-header .aichat-header-btn[aria-pressed="true"] {
  border-color: rgba(22, 135, 237, .18);
  background: rgba(22, 135, 237, .09);
  color: var(--chat-blue);
}
#aichat-stream .aichat-msg-action-btn {
  border-color: rgba(75, 91, 119, .10);
  background: rgba(255, 255, 255, .62);
  color: var(--text-muted);
}
#aichat-input-area .aichat-tool-btn {
  border-color: rgba(75, 91, 119, .10);
  background: rgba(255, 255, 255, .66);
  color: var(--text-muted);
}
#aichat-input-area .aichat-tool-btn.active {
  border-color: rgba(22, 135, 237, .18);
  background: rgba(22, 135, 237, .08);
  color: var(--chat-blue);
}
#aichat-send-btn {
  border-color: rgba(75, 91, 119, .10);
  background: rgba(255, 255, 255, .88);
  color: var(--chat-blue);
}
#aichat-send-btn:hover:not(:disabled) {
  border-color: rgba(22, 135, 237, .22);
  background: #fff;
  color: var(--chat-blue-hover);
}
#aichat-send-btn:disabled {
  background: rgba(255, 255, 255, .72);
  color: rgba(22, 135, 237, .70);
  opacity: 1;
}
#aichat-workbench .aichat-workbench-tabs button,
#aichat-workbench .aichat-workbench-subtabs button {
  border-color: transparent;
  background: transparent;
  color: var(--text-secondary);
}
#aichat-workbench .aichat-workbench-tabs button.active {
  background: rgba(255, 255, 255, .94);
  color: var(--chat-blue);
}
#aichat-workbench .aichat-workbench-subtabs button.active {
  background: rgba(255, 255, 255, .92);
  color: var(--chat-warm);
}

[data-theme="dark"] .aichat-app {
  --chat-panel: #141b29;
  --chat-panel-strong: rgba(24, 31, 47, .94);
  --chat-line: rgba(255, 255, 255, .09);
  --chat-shadow: 0 18px 48px rgba(0, 0, 0, .26);
  --aichat-code-header-bg: #0b101c;
  --aichat-code-bg: #182236;
  --aichat-code-border: rgba(255, 255, 255, .13);
  --aichat-code-fg: #dde3ee;
  --aichat-code-muted: #93a0b5;
  background:
    radial-gradient(circle at 30% 78%, rgba(183, 92, 30, .17), transparent 38%),
    radial-gradient(circle at 74% 76%, rgba(35, 91, 180, .18), transparent 42%),
    #090e18;
}
[data-theme="dark"] .aichat-main {
  background:
    radial-gradient(circle at 0% 72%, rgba(195, 96, 31, .13), transparent 43%),
    radial-gradient(circle at 100% 74%, rgba(35, 99, 198, .16), transparent 45%),
    rgba(12, 18, 30, .72);
}
[data-theme="dark"] .aichat-sidebar-brandmark,
[data-theme="dark"] .aichat-header,
[data-theme="dark"] .aichat-header-btn,
[data-theme="dark"] .aichat-header-badge,
[data-theme="dark"] .aichat-new-btn,
[data-theme="dark"] .aichat-session-tab.active,
[data-theme="dark"] .aichat-workbench-tabs button.active,
[data-theme="dark"] .aichat-workbench-subtabs button.active,
[data-theme="dark"] .aichat-tool-btn,
[data-theme="dark"] .aichat-msg-action-btn {
  background: rgba(29, 37, 54, .88);
}
[data-theme="dark"] .aichat-msg-assistant,
[data-theme="dark"] .aichat-input-card,
[data-theme="dark"] .aichat-artifact-card,
[data-theme="dark"] .aichat-run-card,
[data-theme="dark"] .aichat-memory-card,
[data-theme="dark"] .aichat-skill-row,
[data-theme="dark"] .aichat-tool-card {
  background: rgba(24, 31, 47, .82);
}
[data-theme="dark"] .aichat-session-tabs,
[data-theme="dark"] .aichat-workbench-tabs,
[data-theme="dark"] .aichat-workbench-subtabs {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(8, 13, 24, .42);
}
[data-theme="dark"] .aichat-input-card { border-color: rgba(255, 255, 255, .11); }
html[data-design-skin="apple"][data-theme="dark"] .aichat-session-search input,
[data-theme="dark"] .aichat-session-search input { background-color: rgba(20, 27, 41, .80); }
[data-theme="dark"] .aichat-session-item.active { background: rgba(153, 74, 20, .20); }
[data-theme="dark"] #aichat-new-btn,
[data-theme="dark"] #aichat-header .aichat-header-btn,
[data-theme="dark"] #aichat-session-tabs .aichat-session-tab.active,
[data-theme="dark"] #aichat-input-area .aichat-tool-btn,
[data-theme="dark"] #aichat-stream .aichat-msg-action-btn,
[data-theme="dark"] #aichat-workbench .aichat-workbench-tabs button.active,
[data-theme="dark"] #aichat-workbench .aichat-workbench-subtabs button.active {
  background: rgba(29, 37, 54, .92);
}
/* 暗色覆盖补全：白色悬浮面/实体面在暗色下改用深色表面 */
[data-theme="dark"] .aichat-session-item:hover { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .aichat-sidebar-titlebar [data-theme-toggle] { background: rgba(29, 37, 54, .88); }
[data-theme="dark"] .aichat-new-btn:hover,
[data-theme="dark"] #aichat-new-btn:hover { background: rgba(153, 74, 20, .26); color: #ffb27a; }
[data-theme="dark"] .aichat-header-btn:hover,
[data-theme="dark"] #aichat-header .aichat-header-btn:hover { background: rgba(38, 48, 70, .94); color: var(--text-primary); }
[data-theme="dark"] .aichat-tool-btn:hover,
[data-theme="dark"] #aichat-input-area .aichat-tool-btn:hover { background: rgba(38, 48, 70, .96); color: var(--text-primary); }
[data-theme="dark"] .aichat-msg-action-btn:hover,
[data-theme="dark"] #aichat-stream .aichat-msg-action-btn:hover { background: rgba(38, 48, 70, .94); color: var(--text-primary); }
[data-theme="dark"] .aichat-copy-btn { background: rgba(29, 37, 54, .88); }
[data-theme="dark"] .aichat-input-send,
[data-theme="dark"] #aichat-send-btn { background: rgba(29, 37, 54, .92); }
[data-theme="dark"] .aichat-input-send:hover:not(:disabled),
[data-theme="dark"] #aichat-send-btn:hover:not(:disabled) { background: rgba(38, 48, 70, .98); }
[data-theme="dark"] #aichat-send-btn:disabled { background: rgba(24, 31, 47, .78); }
[data-theme="dark"] .aichat-input { background: linear-gradient(180deg, transparent, rgba(10, 15, 26, .45)); }
[data-theme="dark"] #aichat-header .aichat-header-btn[aria-disabled="true"]:hover {
  background: rgba(29, 37, 54, .92);
  color: var(--text-muted);
}

@media (max-width: 1220px) {
  .aichat-sidebar { width: 248px; }
  .aichat-workbench { width: 320px; flex-basis: 320px; }
  .aichat-workbench--collapsed { width: 0; flex-basis: 0; }
  .aichat-header-btn-labeled { padding: 0 10px; }
}

@media (max-width: 1020px) {
  .aichat-workbench { display: none; }
}

@media (max-width: 900px) {
  .aichat-app { gap: 0; padding: 0; }
  .aichat-main { border: 0; border-radius: 0; }
  .aichat-sidebar {
    width: min(320px, 86vw);
    border-radius: 0 20px 20px 0;
  }
  .aichat-header { height: 56px; padding-left: 94px; }
  .aichat-stream { padding-top: 28px; }
}

@media (max-width: 600px) {
  .aichat-header { gap: 7px; padding-right: 10px; }
  .aichat-header-actions { gap: 4px; }
  .aichat-header-btn-labeled span { display: none; }
  .aichat-header-btn-labeled { width: 36px; padding: 0; }
  .aichat-msg-group { max-width: 96%; }
  .aichat-stream { padding-inline: 13px; }
  .aichat-input { padding: 8px 8px 11px; }
  .aichat-input-card { border-radius: 20px; }
  .aichat-input-textarea { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .aichat-session-list-skeleton span,
  .aichat-role-skeleton span,
  .aichat-typing-dots span,
  .aichat-upload-state::before {
    animation: none;
  }
  .aichat-session-item,
  .aichat-msg-group--enter,
  .aichat-new-msg-btn { animation: none; }
}

.aichat-empty-hint {
  margin-top: 80px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}
.aichat-empty-hint a,
.aichat-stream-state-action { color: var(--aichat-accent); }
.aichat-stream-state-action {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
}

/* ── Interview demo bar ── */
.aichat-demo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px dashed color-mix(in srgb, var(--amber, #d97706) 55%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--amber, #d97706) 10%, transparent);
}
.aichat-demo-badge {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #92400e;
  background: #fef3c7;
  border-radius: 999px;
  padding: 2px 10px;
}
[data-theme="dark"] .aichat-demo-badge {
  color: #fde68a;
  background: #78350f;
}
.aichat-demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.aichat-demo-chip {
  appearance: none;
  border: 1px solid var(--border, #e7e5e4);
  background: var(--surface, #fff);
  color: var(--text-primary, #1c1917);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.4;
}
.aichat-demo-chip:hover {
  border-color: var(--amber, #d97706);
  color: #92400e;
}
[data-theme="dark"] .aichat-demo-chip:hover {
  color: #fde68a;
}