:root {
  color-scheme: light;
  --brand-50: #e8f0fe; --brand-100: #d2e3fc; --brand-300: #8ab4f8; --brand-500: #4285f4;
  --brand-600: #1a73e8; --brand-700: #0b57d0;
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
  --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-900: #111827;
  --bg: #ffffff; --surface: #ffffff; --border: var(--gray-200); --control-border: var(--gray-300);
  --fg: var(--gray-900); --fg-muted: var(--gray-600); --fg-faint: var(--gray-500);
  --accent-bg: #111827; --accent-fg: #ffffff;
  --chat-canvas: #f4f5f7; --chat-agent-bg: #ffffff; --chat-user-bg: #2563eb;
  --live: #16a34a;
  --warn: #9a6700; --warn-border: #d4a72c; --warn-bg: rgba(212, 167, 44, .08);
  --danger: #b91c1c; --danger-bg: #fef2f2;
  --radius-control: 6px; --radius-card: 12px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dark {
  color-scheme: dark;
  --bg: #000000; --surface: #0d0d0d; --border: #1f1f1f; --control-border: #303030;
  --fg: #f3f4f6; --fg-muted: #9ca3af; --fg-faint: #6b7280;
  --accent-bg: #f3f4f6; --accent-fg: #111827;
  --chat-canvas: #080b10; --chat-agent-bg: #1c2028; --chat-user-bg: #2563eb;
  --brand-600: #8ab4f8; --brand-700: #8ab4f8;
  --warn: #e2b93b; --warn-border: #8a6d1f; --warn-bg: rgba(226, 185, 59, .08);
  --danger: #f87171; --danger-bg: #450a0a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg); color: var(--fg);
  font-size: 14px; line-height: 1.5;
  min-height: 100vh;
}
body.auth-required { overflow: hidden; }
button { font-family: inherit; }

/* ---- Account gate: IP12 is a standalone app, so it owns a small login surface. ---- */
.auth-gate {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 76% 16%, rgba(231, 178, 76, .12), transparent 30%),
    rgba(8, 12, 19, .76);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.auth-gate[hidden] { display: none; }
.auth-card {
  width: min(440px, 100%); padding: 30px;
  border: 1px solid rgba(231, 178, 76, .24); border-radius: 22px;
  background: linear-gradient(150deg, #fff 0%, #fff 68%, #fff8e9 100%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .32);
  color: #111827;
}
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 30px; }
.auth-brand-mark {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid #f0d79f; border-radius: 12px; background: #fff9ed; color: #b37c16;
}
.auth-brand-mark svg { width: 22px; height: 22px; }
.auth-brand > span:last-child { display: grid; line-height: 1; }
.auth-brand strong { font-size: 16px; letter-spacing: .05em; }
.auth-brand small { margin-top: 7px; color: #9a6f1c; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.auth-checking-copy { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 14px; color: #6b7280; }
.auth-checking-copy[hidden] { display: none; }
.auth-checking-dot { width: 11px; height: 11px; border-radius: 50%; background: #e7b24c; box-shadow: 0 0 0 7px rgba(231, 178, 76, .14); animation: auth-pulse 1.2s ease-in-out infinite; }
.auth-checking-copy p { margin: 0; font-size: 14px; }
.auth-login-form { display: grid; gap: 14px; }
.auth-login-form[hidden] { display: none; }
.auth-kicker { margin: 0; color: #b37c16; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.auth-login-form h1 { margin: -2px 0 0; font-size: 28px; line-height: 1.28; letter-spacing: -.035em; }
.auth-subtitle { margin: -5px 0 7px; color: #6b7280; font-size: 14px; line-height: 1.7; }
.auth-field { display: grid; gap: 7px; color: #4b5563; font-size: 12px; font-weight: 700; }
.auth-field input {
  width: 100%; height: 50px; padding: 0 14px;
  border: 1px solid #dfe3e8; border-radius: 11px; outline: 0;
  background: #f9fafb; color: #111827; font: 15px inherit;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.auth-field input:focus { border-color: #d7a53f; background: #fff; box-shadow: 0 0 0 3px rgba(231, 178, 76, .14); }
.auth-message { min-height: 21px; margin: -2px 0; color: #b91c1c; font-size: 13px; text-align: center; }
.auth-message.ok { color: #15803d; }
.auth-submit {
  height: 50px; border: 0; border-radius: 11px; cursor: pointer;
  background: #e7b24c; color: #17130b; font-size: 15px; font-weight: 800;
  box-shadow: 0 12px 28px rgba(190, 132, 26, .22);
}
.auth-submit:hover { background: #efc462; }
.auth-submit:disabled { cursor: wait; opacity: .62; }
.auth-links { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 3px; }
.auth-links a { color: #6b7280; font-size: 12px; text-decoration: none; }
.auth-links a:first-child { color: #9a6700; font-weight: 700; }
.auth-links a:hover { text-decoration: underline; }
@keyframes auth-pulse { 50% { transform: scale(.72); opacity: .55; } }

/* ---- Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 20; height: 56px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
}
.nav-inner {
  max-width: 72rem; margin: 0 auto; height: 100%;
  padding: 0 16px; display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-dot { width: 10px; height: 10px; border-radius: 9999px; background: var(--brand-500); }
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.mobile-workbench-return { display: none; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.mode-badge {
  font-size: 12px; color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: 9999px; padding: 3px 10px;
  display: inline-flex; align-items: center; gap: 6px;
}
.mode-badge .dot { width: 7px; height: 7px; border-radius: 9999px; background: var(--gray-400); }
.mode-badge.live .dot { background: var(--live); }
/* 黄雀 CLI 授权徽标 */
.mode-badge.hq-badge.auth-ok { color: var(--fg-muted); }
.mode-badge.hq-badge.auth-bad { color: #d1242f; border-color: rgba(209, 36, 47, .55);
  background: rgba(209, 36, 47, .08); font-weight: 600; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-control);
  border: 1px solid transparent; background: transparent; color: var(--fg-muted);
  cursor: pointer; transition: color, background-color, border-color 150ms;
}
.icon-btn:hover { background: var(--gray-100); color: var(--fg); }
.dark .icon-btn:hover { background: #1f1f1f; }
.export-btn { width: auto; padding: 0 10px; font-size: 12px; white-space: nowrap; }

/* ---- Shell：一列进展 + 一列对话，业务操作永远是主角 ---- */
.shell { max-width: 72rem; margin: 0 auto; padding: 20px 16px 0;
  display: flex; gap: 24px; align-items: stretch; justify-content: center; }
.main-col { flex: 1 1 0; min-width: 0; max-width: 52rem; min-height: calc(100vh - 76px);
  display: flex; flex-direction: column; }

/* 报告、任务和路由共用一个侧栏，不再同时抢三份水平空间。 */
.workspace-rail {
  display: none; flex: 0 0 300px; align-self: flex-start; position: sticky; top: 72px;
  max-height: calc(100vh - 88px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; flex-direction: column; gap: 12px;
}
.workspace-rail:has(.report-pane:not([hidden]), .task-pane:not([hidden]), .tool-list > :not(.tool-empty)) {
  display: flex;
}
.workspace-rail-head { display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 2px; color: var(--fg); }
.workspace-rail-head span { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.workspace-rail-head small { color: var(--fg-faint); font-size: 11px; }
.report-pane, .task-pane { flex: none; min-width: 0; }
.task-pane {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); padding: 12px;
}
.task-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.task-title { font-size: 13px; font-weight: 700; color: var(--fg); }
.task-hint { font-size: 11px; color: var(--fg-faint); }
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-row {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  border: 1px solid var(--control-border); border-radius: 8px; padding: 8px 10px;
  background: var(--gray-50, #f9fafb); cursor: pointer; transition: border-color .15s;
}
.dark .task-row { background: #141414; }
.task-row:hover { border-color: var(--blue-500, #2563eb); }
.task-row.flash { animation: task-flash 1.6s ease; }
@keyframes task-flash { 0% { background: var(--blue-100, #dbeafe); } 100% { background: var(--gray-50, #f9fafb); } }
.dark .task-row.flash { animation-name: task-flash-dark; }
@keyframes task-flash-dark { 0% { background: #1e3a5f; } 100% { background: #141414; } }
.task-row-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start; gap: 3px 7px; }
.task-kind { font-size: 15px; }
.task-job { min-width: 0; font-size: 12px; font-weight: 700; color: var(--fg);
  overflow-wrap: anywhere; line-height: 1.4; }
.task-cost { font-size: 11px; color: var(--fg-faint); white-space: nowrap; }
.task-badge {
  grid-column: 2 / 4; justify-self: start;
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px;
  border: 1px solid var(--control-border); color: var(--fg-muted); white-space: nowrap;
}
.task-badge.st-running { color: #b45309; border-color: #f59e0b; }
.task-badge.st-done { color: #15803d; border-color: #22c55e; }
.task-badge.st-failed { color: #b91c1c; border-color: #ef4444; }
.task-badge.st-quote { color: #1d4ed8; border-color: #3b82f6; }
.task-err { font-size: 11px; color: #b91c1c; word-break: break-all; }
.task-refund { font-size: 11px; color: #15803d; }
.task-products { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.task-products a { font-size: 11px; color: var(--blue-500, #2563eb); }
.task-products img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--border); display: block; }
.task-empty { font-size: 12px; color: var(--fg-faint); }

/* ---- 返回最新对话：翻历史时右下角浮起 ---- */
.main-col { position: relative; }
.back-bottom {
  position: sticky; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: block; margin: -40px auto 0; z-index: 30;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--blue-600, #2563eb);
  border: none; border-radius: 999px; padding: 7px 16px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
}

/* 跳转高亮：点击任务面板后定位到的消息气泡闪一下 */
.msg.jump-flash .bubble { animation: msg-flash 2s ease; }
@keyframes msg-flash { 0% { box-shadow: 0 0 0 3px var(--blue-500, #2563eb); } 100% { box-shadow: none; } }

/* ---- Intro (empty state) ---- */
.intro {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 48px 0 40px;
}
.eyebrow {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand-600); margin: 0 0 14px; font-weight: 600;
}
.intro-title { font-size: 32px; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 10px; }
.intro-title span { color: var(--brand-600); }
.intro-sub { color: var(--fg-muted); max-width: 34rem; margin: 0 0 28px; }
.example-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%;
  max-width: 40rem;
}
.example-card {
  display: flex; align-items: center; gap: 10px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); padding: 14px 16px; cursor: pointer;
  color: var(--fg); transition: border-color 150ms;
}
.example-card:hover { border-color: var(--gray-400); }
.ex-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--brand-600); letter-spacing: .08em; }
.ex-text { flex: 1; font-size: 13px; color: var(--fg-muted); }
.ex-arrow { color: var(--fg-faint); }

/* ---- Chat ---- */
.chat-pane { display: flex; flex: 1 1 auto; flex-direction: column; }
.messages { display: flex; flex: 1 1 auto; flex-direction: column; gap: 14px; padding: 20px 16px 24px; min-height: 120px;
  border-radius: 16px; background: var(--chat-canvas); }
.msg { display: flex; flex-direction: column; max-width: 82%; scroll-margin-bottom: 96px; }
.msg.user { align-self: flex-end; }
.msg.assistant { align-self: flex-start; }
.bubble {
  padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.msg.user .bubble { background: var(--chat-user-bg); color: #fff; border-bottom-right-radius: 5px;
  box-shadow: 0 5px 14px rgba(37, 99, 235, .22); }
.msg.assistant .bubble { background: var(--chat-agent-bg); color: var(--fg); border: 1px solid var(--border);
  border-bottom-left-radius: 5px; box-shadow: 0 2px 8px rgb(15 23 42 / .06); }
.msg.msg-enter.user .bubble { transform-origin: 100% 100%;
  animation: chat-bubble-spring .34s cubic-bezier(.2, .9, .25, 1.25) both; }
@keyframes chat-bubble-spring {
  0% { opacity: 0; transform: translate3d(14px, 8px, 0) scale(.88); }
  62% { opacity: 1; transform: translate3d(-2px, -1px, 0) scale(1.025); }
  100% { opacity: 1; transform: none; }
}
.msg-meta { font-size: 11px; color: var(--fg-faint); margin-top: 4px; padding: 0 4px; }

/* 气泡内的图片（形象预览/生成的图直接显示） */
.bubble img { display: block; max-width: min(320px, 100%); border-radius: 10px; margin: 6px 0; border: 1px solid var(--control-border); }
.bubble img:hover { box-shadow: 0 2px 10px rgb(0 0 0 / .15); }

/* 采集等任务交付的图片贴条：缩略图网格，点开看原图 */
.msg-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin-top: 8px; max-width: min(480px, 100%); }
.msg-images a { display: block; }
.msg-images img { display: block; width: 100%; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--control-border); background: var(--gray-100); cursor: zoom-in; }
.dark .msg-images img { background: #1f1f1f; }
.msg-images img:hover { box-shadow: 0 2px 10px rgb(0 0 0 / .15); }
/* 坏图占位：源图加载失败时替代裂图图标 */
.img-broken { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  min-height: 48px; border-radius: 10px; border: 1px dashed var(--control-border);
  background: var(--gray-100); color: var(--gray-500); font-size: 12px; }
.dark .img-broken { background: #1f1f1f; }

/* 气泡内的音频试听 / 视频播放器 */
.bubble audio { display: block; width: min(340px, 100%); margin: 6px 0; }

/* 用户上传附件贴条（气泡下方）：图片/音频/视频直接可视化，不再只有文字（2026-09-13 老板实录） */
.msg-uploads { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-width: min(480px, 100%); }
.msg-uploads img { display: block; width: 100%; max-width: 220px; height: 120px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--control-border); background: var(--gray-100); cursor: zoom-in; }
.dark .msg-uploads img { background: #1f1f1f; }
.msg-uploads audio { width: min(340px, 100%); }
.msg-uploads .msg-upload-name { font-size: 12px; color: var(--fg-faint); margin-bottom: 2px; word-break: break-all; }
.msg-uploads .msg-video { position: relative; display: inline-block; max-width: min(220px, 100%);
  border-radius: 12px; overflow: hidden; border: 1px solid var(--control-border); background: #000; }
.msg-uploads .msg-video video { display: block; width: 100%; background: #000; }
.msg-uploads .msg-video .mv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 9999px; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; }
.msg-uploads .msg-video.playing .mv-play { display: none; }
.bubble video { display: block; max-width: min(240px, 100%); border-radius: 10px; margin: 6px 0; border: 1px solid var(--control-border); background: #000; }

/* 飞书式视频小卡片（2026-09-12 老板定调借鉴飞书）：小卡片 + 封面 + 居中播放钮，点开才播 */
.bubble .msg-video { position: relative; display: inline-block; max-width: min(220px, 100%);
  margin: 6px 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--control-border);
  background: #000; vertical-align: top; }
.bubble .msg-video video { display: block; width: 100%; max-width: none; margin: 0; border: 0;
  border-radius: 0; background: #000; }
.bubble .msg-video .mv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 9999px; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; }
.bubble .msg-video:hover { box-shadow: 0 2px 10px rgb(0 0 0 / .15); }
.bubble .msg-video.playing .mv-play { display: none; }

/* 站内成片内联播放器：下方附可见可点链接（打开原片），收在小卡片宽度内居中 */
.bubble .inline-media .media-link { font-size: 11px; margin: 2px 0 6px; word-break: break-all;
  color: var(--fg-faint); max-width: min(220px, 100%); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.bubble .inline-media .media-link a { color: var(--accent, #2f81f7); text-decoration: none; }
.bubble .inline-media .media-link a:hover { text-decoration: underline; }

/* 模板成片小样缩略图（2026-09-10 老板定调：小缩略图，不占满视觉空间，点开才播小样视频；
   2026-09-12 缩小到 80×142，与视频小卡片视觉对称） */
.bubble a.tpl-thumb { position: relative; display: inline-block; margin: 4px 8px 4px 0; vertical-align: top; }
.bubble a.tpl-thumb img { display: block; width: 80px; height: 142px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--control-border); background: #000; }
.bubble a.tpl-thumb::after { content: "▶"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 24px; height: 24px; line-height: 24px; text-align: center;
  font-size: 11px; color: #fff; background: rgba(0, 0, 0, .55); border-radius: 9999px;
  pointer-events: none; }
.bubble a.tpl-thumb:hover img { border-color: var(--accent, #2f81f7); }

/* 站内素材缩略图（消息内）：小图呈现，与模板小样一致的比例观感 */
.bubble img.thumb-inline { width: 96px; max-width: 96px; height: auto; max-height: 170px;
  object-fit: cover; border-radius: 10px; }

/* 飞书式链接卡片（2026-09-10 老板定调：带超链接的信息用气泡卡片发，像飞书一样；
   每条链接 = 图标 + 标题/域名 + 「打开」按钮，不再是一行行裸网址） */
.bubble a.link-card {
  display: flex; align-items: center; gap: 10px;
  max-width: min(380px, 100%);
  margin: 8px 0; padding: 9px 12px;
  border: 1px solid var(--control-border); border-radius: 10px;
  background: var(--surface); color: var(--fg); text-decoration: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.bubble a.link-card:hover {
  border-color: var(--brand-600);
  box-shadow: 0 2px 10px rgb(0 0 0 / .08);
}
.link-card .lc-ico {
  flex: none; width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50); font-size: 15px;
}
.link-card .lc-body { flex: 1; min-width: 0; }
.link-card .lc-tx {
  display: block; font-size: 13px; font-weight: 600; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-card .lc-host {
  display: block; margin-top: 1px; font-size: 11.5px; color: var(--fg-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-card .lc-go {
  flex: none; padding: 3px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--brand-600);
  border: 1px solid var(--brand-300);
}
.bubble a.link-card:hover .lc-go { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.dark .link-card .lc-ico { background: rgba(138, 180, 248, .14); }

.typing { display: inline-flex; gap: 4px; padding: 12px 4px; }
.typing span { width: 6px; height: 6px; border-radius: 9999px; background: var(--fg-faint); animation: blink 1.2s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ---- Composer ---- */
.composer-wrap { position: sticky; bottom: 0; background: linear-gradient(to bottom, transparent, var(--bg) 40%); padding-top: 16px; }
.net-banner { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; font-size: 13px;
  background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
[data-theme="dark"] .net-banner, .dark .net-banner { background: #3b2f12; color: #fcd34d; border-color: #6b5518; }
.composer {
  border: 1px solid var(--control-border); border-radius: var(--radius-card);
  background: var(--surface); padding: 10px 12px 8px;
}
.composer:focus-within { border-color: var(--gray-400); box-shadow: 0 0 0 2px rgb(156 163 175 / .3); }
.composer textarea {
  width: 100%; border: none; outline: none; resize: none; background: transparent;
  color: var(--fg); font-family: inherit; font-size: 14px; line-height: 1.5;
  min-height: 44px; max-height: none; padding: 2px 0;
}
.composer-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.kbd-hint { font-size: 11px; color: var(--fg-faint); }
.send-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9999px; border: none;
  background: var(--accent-bg); color: var(--accent-fg); cursor: pointer;
  transition: opacity 150ms;
}
.send-btn:hover { opacity: .9; }
.send-btn:disabled { opacity: .4; cursor: not-allowed; }
.disclaimer { font-size: 11px; color: var(--fg-faint); text-align: center; margin: 10px 0 0; }

/* ---- 执行明细：次要信息收进侧栏，默认折叠 ---- */
.tool-pane {
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); overflow: hidden;
}
.tool-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 11px 12px;
  cursor: pointer; list-style: none; }
.tool-head::-webkit-details-marker { display: none; }
.tool-heading { flex: 1; min-width: 0; }
.tool-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.tool-toggle { flex: none; color: var(--fg-faint); font-size: 11px; }
.tool-toggle::before { content: "展开"; }
.tool-pane[open] .tool-toggle::before { content: "收起"; }
.tool-body { border-top: 1px solid var(--border); padding: 8px 12px 12px; }
.tool-actions { display: flex; align-items: center; justify-content: space-between;
  color: var(--fg-faint); font-size: 11px; }
.tool-actions .icon-btn { width: 28px; height: 28px; }
.tool-pane:not([open]) .tool-empty, .tool-pane:not([open]) .trace-item:not(:first-child) { display: none; }
.tool-pane:not([open]) .trace-item:first-child { padding: 3px 0 0; border: 0; }
.tool-pane[open] .tool-list { margin-top: 8px; }
.tool-list { display: flex; flex-direction: column; gap: 8px; }
.tool-empty { font-size: 12px; color: var(--fg-faint); margin: 0; }
.tool-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; }
.tool-item .t-dot { width: 7px; height: 7px; border-radius: 9999px; margin-top: 5px; flex: none; }
.tool-item.ok .t-dot { background: var(--live); }
.tool-item.err .t-dot { background: var(--danger); }
.tool-item .t-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fg-muted); flex: none; }
.tool-item .t-detail { color: var(--fg-faint); word-break: break-all; }

/* ---- Focus / reduced motion ---- */
:focus-visible { outline: 3px solid rgb(107 114 128 / .4); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .shell { flex-direction: column; gap: 0; }
  .main-col { order: 1; flex: none; width: 100%; max-width: none; min-height: 0; }
  .workspace-rail { order: 2; position: static; flex: none; width: 100%; max-height: none;
    overflow: visible; margin-top: 18px; }
  .composer-wrap { position: static; }
  .report-pane .report-box { margin: 18px 0 4px; }
}
@media (max-width: 640px) {
  .auth-gate { align-items: flex-end; padding: 12px; background: rgba(8, 12, 19, .68); }
  .auth-card { width: 100%; padding: 24px 20px calc(22px + env(safe-area-inset-bottom)); border-radius: 22px; }
  .auth-brand { margin-bottom: 24px; }
  .auth-checking-copy { min-height: 210px; }
  .auth-login-form h1 { font-size: 25px; }
  .auth-field input, .auth-submit { height: 52px; }
  .auth-links { align-items: flex-start; }
  .intro { padding: 32px 0 28px; }
  .intro-title { font-size: 26px; }
  .example-grid { grid-template-columns: 1fr; }
  .messages { padding: 16px 12px 20px; border-radius: 14px; }
  .msg { max-width: 90%; }
  .kbd-hint { display: none; }
}

/* ---- Report box ---- */
.report-box {
  margin: 18px 0 4px; border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); padding: 12px 16px;
  border-left: 4px solid var(--blue-500, #2563eb);
}
.report-pane .report-box { margin: 0; }
.report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report-title { font-size: 13px; font-weight: 600; }
.report-status { font-size: 12px; color: var(--fg-muted); }
.report-phase { font-size: 12px; color: var(--fg-faint); margin-top: 6px; }
.report-links { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.report-link {
  font-size: 12px; font-weight: 500; text-decoration: none;
  color: var(--blue-500, #2563eb); border: 1px solid var(--control-border);
  border-radius: 6px; padding: 4px 10px;
}
.report-link:hover { background: var(--gray-50, #f9fafb); }
.dark .report-link:hover { background: #1a1a1a; }

/* ---- Report confirm & module rows ---- */
.report-confirm {
  margin-top: 10px; width: 100%;
  font-size: 13px; font-weight: 600;
  color: #ffffff; background: var(--blue-500, #2563eb);
  border: none; border-radius: 8px; padding: 9px 12px; cursor: pointer;
}
.report-confirm:hover { filter: brightness(1.08); }
.report-confirm:disabled { opacity: .55; cursor: wait; }
.report-mod {
  margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px;
}
.report-mod-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.report-mod-head span:first-child { font-size: 12.5px; font-weight: 600; }
.report-mod-status { font-size: 11.5px; color: var(--fg-muted); text-align: right; }
.report-mod .report-links { margin-top: 6px; }

/* ---- 历史会话面板（v3/v4 共用）---- */
.hist-wrap { position: relative; }
.hist-panel { position: absolute; right: 0; top: 36px; width: 320px; max-height: 420px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); z-index: 50; }
.hist-item { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--border); color: var(--fg); }
.hist-item:hover { background: rgba(128, 128, 128, 0.08); }
.hist-item:last-child { border-bottom: 0; }
.hist-main { flex: 1 1 auto; min-width: 0; display: block; padding: 4px 0; background: none; border: 0;
  color: inherit; cursor: pointer; font-size: 13px; font-family: inherit; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-del { flex: 0 0 auto; width: 22px; height: 22px; line-height: 18px; text-align: center;
  border-radius: 6px; border: 0; background: none; color: var(--fg-faint); font-size: 15px;
  cursor: pointer; opacity: 0; transition: opacity 150ms, background 150ms; }
.hist-item:hover .hist-del, .hist-del:focus-visible { opacity: 1; }
.hist-del:hover { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
@media (pointer: coarse) { .hist-del { opacity: 1; } }
.hist-preview { color: var(--fg-muted); font-size: 12px; margin-top: 2px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.hist-meta { color: var(--fg-faint); font-size: 11px; float: right; margin-left: 8px; }
.hist-current { border-left: 3px solid var(--brand-600); }
.hist-empty { padding: 14px; color: var(--fg-faint); font-size: 12px; }

/* ---- 历史面板：多选批量删除 + 删除确认「不再提醒」（2026-09-12）---- */
.hist-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.hist-head-title { font-size: 12px; color: var(--fg-faint); flex: 1 1 auto; }
/* 管理按钮复用 .asset-manage-btn 的样式；这里只去掉它在素材面板里的 margin-left:auto */
.hist-head .asset-manage-btn { margin: 0; }
.hist-pick { flex: 0 0 auto; width: 20px; height: 20px; line-height: 18px; text-align: center;
  border-radius: 6px; border: 1px solid var(--border); background: var(--bg);
  color: var(--fg-muted); font-size: 12px; cursor: pointer; }
/* 选中待删用红色，和「当前会话」的蓝色左边框一眼分得开 —— 同素材面板的既有约定，少误删 */
.hist-item.hist-manage-picked { background: rgb(220 38 38 / .07); }
.hist-item.hist-manage-picked .hist-pick { background: var(--red-600, #dc2626);
  border-color: var(--red-600, #dc2626); color: #fff; }
.hist-restore-confirm { display: block; width: 100%; text-align: left; font-size: 11px;
  padding: 6px 10px; border: 0; border-bottom: 1px solid var(--border); background: none;
  color: var(--fg-faint); cursor: pointer; }
.hist-restore-confirm:hover { color: var(--red-600, #dc2626); }

/* 删除确认弹窗：原生 confirm() 加不了勾选框，所以自建 <dialog> */
.hist-confirm-dialog { width: min(92vw, 380px); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; background: var(--surface); color: var(--fg); box-shadow: 0 12px 40px rgb(0 0 0 / .18); }
.hist-confirm-dialog::backdrop { background: rgb(0 0 0 / .45); }
.hcd-title { display: block; font-size: 15px; margin-bottom: 8px; }
.hcd-detail { font-size: 13px; line-height: 1.6; color: var(--fg-muted); margin-bottom: 12px; }
.hcd-skip { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-muted);
  margin-bottom: 14px; cursor: pointer; }
.hcd-skip input { width: 14px; height: 14px; margin: 0; cursor: pointer; }
.hcd-actions { display: flex; justify-content: flex-end; gap: 8px; }
.hcd-btn { font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg); cursor: pointer; }
.hcd-danger { background: var(--red-600, #dc2626); border-color: transparent; color: #fff; }

/* ---- v4 交互卡片（形象/音色/文案点选）与输入框贴图 ---- */
.widget-box { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); }
.widget-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.widget-hint { font-size: 12px; color: var(--fg-faint); margin-bottom: 10px; }
/* 「等你回复」待办卡片：醒目、可读、不可错过 */
.widget-box.action-box { border: 1.5px solid var(--brand-600);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, .12); }
.widget-box.action-box .widget-title { color: var(--brand-600); font-size: 14px; }
.widget-box.action-box .widget-hint { font-size: 13px; color: var(--fg);
  line-height: 1.7; white-space: pre-wrap; margin-bottom: 6px; }
.widget-box.action-box .action-foot { font-size: 11.5px; color: var(--fg-faint); }
.widget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.widget-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--bg); cursor: pointer; transition: border-color .15s, transform .1s; }
.widget-card:hover { border-color: var(--brand-600); }
.widget-card.picked { border: 2px solid var(--brand-600); padding: 0; background: var(--brand-50, #eef5ff);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, .12); }
.widget-card.picked .wc-name { color: var(--brand-700, #1a5fd0); font-weight: 600; }
.widget-card.picked .wc-act button.pick { background: var(--brand-600, #1a73e8); color: #fff; border-color: var(--brand-600, #1a73e8); }
.widget-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: #eee; }
.widget-card .wc-name { font-size: 12px; padding: 5px 6px 1px; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.widget-card .wc-sub { font-size: 11px; color: var(--fg-muted); padding: 1px 6px 2px; line-height: 1.3; }
.widget-card .wc-act { display: flex; gap: 6px; padding: 4px 6px 7px; }
.widget-card .wc-act button { flex: 1; font-size: 11px; padding: 4px 0; border-radius: 6px;
  border: 1px solid var(--border); background: none; color: var(--fg); cursor: pointer; }
.widget-card .wc-act button:hover { border-color: var(--brand-600); }
.widget-card .wc-act button.pick { border-color: var(--brand-600); color: var(--brand-700, var(--brand-600)); }
.widget-list { display: flex; flex-direction: column; gap: 8px; }
.widget-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); cursor: pointer; }
.widget-row:hover { border-color: var(--brand-600); }
.widget-row.picked { border: 2px solid var(--brand-600); background: var(--brand-50, #eef5ff);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, .12); }
.widget-row.picked .wr-name { color: var(--brand-700, #1a5fd0); }
.widget-row.picked .wr-actions button.pick { background: var(--brand-600, #1a73e8); color: #fff; border-color: var(--brand-600, #1a73e8); }
.widget-row .wr-main { flex: 1; min-width: 0; }
.widget-row .wr-thumb { display: block; width: 108px; height: 61px; object-fit: cover; border-radius: 8px; border: 1px solid var(--control-border); margin-bottom: 4px; }
.widget-row .wr-name { font-size: 13px; font-weight: 600; }
.widget-row .wr-sub { font-size: 12px; color: var(--fg-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.widget-row .wr-actions { display: flex; gap: 6px; }
.widget-row .wr-actions button { font-size: 12px; padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--border); background: none; color: var(--fg); cursor: pointer; }
.widget-row .wr-actions button.pick { border-color: var(--brand-600); color: var(--brand-700, var(--brand-600)); }
.widget-row .wr-actions button:hover { border-color: var(--brand-600); }
.approval-box .widget-row { flex-direction: column; align-items: stretch; cursor: default; }
.approval-box .wr-name { overflow-wrap: anywhere; line-height: 1.6; max-height: 5.2em; overflow-y: auto; }
.approval-box .wr-actions { flex-wrap: wrap; }
.approval-box .wr-actions button { min-height: 44px; flex: 1 1 120px; }
.approval-box button:disabled { opacity: .65; cursor: wait; }
@media (max-width: 640px) {
  .nav { height: auto; }
  .nav-inner { min-height: 56px; height: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; }
  .mobile-workbench-return { min-height: 44px; padding: 0 10px 0 6px; display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--border); border-radius: var(--radius-control); color: var(--fg); background: var(--surface);
    text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; }
  .mobile-workbench-return:active { background: var(--gray-100); }
  .dark .mobile-workbench-return:active { background: #1f1f1f; }
  .brand { min-width: 0; }
  .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand-dot { flex-shrink: 0; }
  .nav-right { grid-column: 1 / -1; width: 100%; gap: 4px; flex-wrap: wrap; }
  .nav-right .mode-badge { white-space: nowrap; flex-shrink: 0; font-size: 11px; padding: 3px 6px; }
  .nav-right .icon-btn { flex-shrink: 0; }
}
.widget-row .wr-body { display: none; margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: var(--surface); font-size: 12.5px; color: var(--fg-muted); white-space: pre-wrap; }
.widget-row .wr-body.open { display: block; }
/* 多选卡（2026-09-13）：勾选行 + 确认选择条，本应多选的问题不再拆单选卡 */
.widget-row.multi-row { cursor: pointer; }
.widget-row.multi-on { border-color: var(--brand-600); background: var(--brand-50, #eef5ff); }
.widget-row.multi-on .wr-name { color: var(--brand-700, #1a5fd0); }
.widget-row .multi-check { font-size: 16px; line-height: 1; color: var(--fg-muted); min-width: 18px; text-align: center; }
.widget-row.multi-on .multi-check { color: var(--brand-600); }
.widget-multi-footer { display: flex; justify-content: flex-end; padding: 8px 10px 10px; }
.widget-multi-footer button.multi-confirm { font-size: 13px; padding: 7px 18px; border-radius: 8px;
  border: 1px solid var(--brand-600); background: var(--brand-600, #1a73e8); color: #fff; cursor: pointer; }
.widget-multi-footer button.multi-confirm:disabled { opacity: .5; cursor: not-allowed; }
.upload-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; flex-wrap: wrap; }
.upload-chip { position: relative; width: 52px; height: 52px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface); }
.upload-chip:has(.upload-chip-icon) { width: auto; height: auto; min-width: 120px; max-width: 220px;
  padding: 5px 26px 5px 6px; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.upload-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-chip-icon { font-size: 16px; flex: none; }
.upload-chip-name { font-size: 11.5px; color: var(--fg-muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; flex: 1; }
.upload-chip .chip-play { border: 1px solid var(--border); background: none; border-radius: 999px;
  width: 20px; height: 20px; font-size: 10px; line-height: 1; cursor: pointer; color: var(--fg);
  flex: none; padding: 0; }
.upload-chip .chip-play:hover { border-color: var(--brand-600); color: var(--brand-600); }
.upload-chip .rm { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; line-height: 14px;
  text-align: center; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 10px;
  border: 0; cursor: pointer; padding: 0; z-index: 2; }
.upload-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; border: 1px solid var(--border); background: none; color: var(--fg); cursor: pointer;
  font-size: 18px; line-height: 1; }
.upload-btn:hover { border-color: var(--brand-600); color: var(--brand-600); background: var(--surface); }

/* ---- 素材库面板：＋号展开，浮在输入框上方 ---- */
.composer { position: relative; }
.asset-panel {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 30;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 14px 16px; box-shadow: 0 12px 32px rgb(0 0 0 / .14);
  max-height: min(460px, 62vh);
}
.asset-panel[hidden], .asset-upload-progress[hidden], .asset-more[hidden] { display: none; }
.asset-panel-head { display: flex; align-items: center; justify-content: space-between; }
.asset-panel-title { font-size: 13px; font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
.asset-tabs { display: flex; gap: 6px; padding: 2px 2px 10px; }
.asset-tab { font-size: 12px; line-height: 1; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--fg-muted);
  cursor: pointer; transition: all 120ms; }
.asset-tab:hover { border-color: var(--brand-600); color: var(--brand-600); }
.asset-tab-active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.asset-tab-active:hover { color: #fff; }
.asset-src { font-size: 10px; line-height: 1; padding: 2px 6px; border-radius: 5px; width: fit-content; }
.asset-src.upload { background: var(--gray-100); color: var(--fg-faint); }
.dark .asset-src.upload { background: #1f1f1f; }
.asset-src.agent { background: rgb(26 115 232 / .14); color: var(--brand-600); }
.asset-panel-count { font-size: 11px; font-weight: 400; color: var(--fg-faint); }
.asset-panel-close { border: none; background: none; color: var(--fg-muted); font-size: 18px;
  line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.asset-panel-close:hover { color: var(--fg); background: var(--gray-100); }
.dark .asset-panel-close:hover { background: #1f1f1f; }
.asset-quota { display: flex; flex-direction: column; gap: 4px; }
.asset-quota-bar { height: 6px; border-radius: 9999px; background: var(--gray-100); overflow: hidden; }
.dark .asset-quota-bar { background: #1f1f1f; }
.asset-quota-fill { height: 100%; width: 0; border-radius: 9999px; background: var(--brand-600);
  transition: width 300ms var(--ease); }
.asset-quota-text { font-size: 11px; color: var(--fg-faint); }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px; overflow-y: auto; padding: 2px; flex: 1 1 auto; min-height: 0; }
.asset-card { position: relative; display: flex; flex-direction: column; gap: 5px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; padding: 6px; background: var(--bg);
  transition: border-color 150ms, transform 150ms, box-shadow 150ms; }
.asset-card:hover { border-color: var(--brand-600); transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(0 0 0 / .08); }
.asset-card.asset-busy { opacity: .55; pointer-events: none; }
.asset-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block;
  background: var(--gray-100); }
.dark .asset-card img { background: #1f1f1f; }
.asset-icon { display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
  font-size: 26px; border-radius: 8px; background: var(--gray-100); }
.dark .asset-icon { background: #1f1f1f; }
.asset-kind { position: absolute; top: 10px; left: 10px; font-size: 10px; line-height: 1;
  padding: 3px 6px; border-radius: 6px; background: rgb(0 0 0 / .55); color: #fff;
  pointer-events: none; }
.asset-name { font-size: 11px; color: var(--fg); line-height: 1.3; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all;
  min-height: calc(1.3em * 2); }
.asset-size { font-size: 10px; color: var(--fg-faint); }
.asset-del { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; line-height: 16px;
  text-align: center; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 11px;
  border: 0; cursor: pointer; padding: 0; opacity: 0; transition: opacity 150ms; }
.asset-card:hover .asset-del, .asset-del:focus-visible { opacity: 1; }
@media (pointer: coarse) { .asset-del { opacity: 1; } } /* 触屏没有 hover，删除钮常显 */
.asset-pick { position: absolute; top: 6px; right: 28px; width: 18px; height: 18px; line-height: 16px;
  text-align: center; border-radius: 5px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px;
  border: 0; cursor: pointer; padding: 0; opacity: .75; transition: opacity 150ms; }
.asset-card:hover .asset-pick, .asset-pick:focus-visible { opacity: 1; }
.asset-card.asset-picked { border-color: var(--blue-500, #2563eb); box-shadow: 0 0 0 2px var(--blue-200, #dbeafe); }
.asset-card.asset-picked .asset-pick { background: var(--blue-600, #2563eb); opacity: 1; }
.asset-select-bar { display: flex; align-items: center; gap: 8px; flex: none; padding: 8px;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.asset-select-bar[hidden] { display: none; }
.asset-select-count { font-size: 12px; color: var(--fg-muted); margin-right: auto; }
.asset-select-go { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; border: 0;
  background: var(--blue-600, #2563eb); color: #fff; cursor: pointer; }
.asset-select-go:hover { filter: brightness(1.06); }
.asset-select-cancel { font-size: 12px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg-muted); cursor: pointer; }
.asset-select-cancel:hover { color: var(--fg); }
.asset-empty { grid-column: 1 / -1; font-size: 12px; color: var(--fg-faint); padding: 18px 4px; }
.asset-more { flex: none; font-size: 12px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg-muted); cursor: pointer; }
.asset-more:hover { border-color: var(--brand-600); color: var(--brand-600); background: var(--surface); }
.asset-upload-progress { display: flex; flex-direction: column; gap: 4px; }
.asset-upload-progress-name { font-size: 11px; color: var(--fg-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.asset-upload-progress-bar { height: 6px; border-radius: 9999px; background: var(--gray-100); overflow: hidden; }
.dark .asset-upload-progress-bar { background: #1f1f1f; }
.asset-upload-progress-fill { height: 100%; width: 0; border-radius: 9999px; background: var(--live);
  transition: width 150ms linear; }
.asset-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.asset-panel-hint { font-size: 11px; color: var(--fg-faint); }
.asset-upload-new { flex: none; font-size: 12px; padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--brand-600); background: none; color: var(--brand-600); cursor: pointer; }
.asset-upload-new:hover { background: var(--brand-50); }
.dark .asset-upload-new:hover { background: rgb(138 180 248 / .12); }

/* ---- 素材库打通：主站资产 + 管理模式批量删除（2026-09-11） ---- */
/* 主站来的资产用第三种颜色区分，避免和「我上传的 / AI 成片」混淆 */
.asset-src.site { background: rgb(16 163 127 / .14); color: #0f9d76; }
/* 管理入口：与关闭按钮同排的次要按钮 */
.asset-manage-btn { margin-left: auto; margin-right: 6px; font-size: 12px; padding: 4px 10px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--bg);
  color: var(--fg-muted); cursor: pointer; }
.asset-manage-btn:hover { border-color: var(--red-600, #dc2626); color: var(--red-600, #dc2626); }
.asset-manage-btn.active { background: var(--red-600, #dc2626); border-color: var(--red-600, #dc2626); color: #fff; }
.asset-manage-btn.active:hover { color: #fff; filter: brightness(1.06); }
/* 管理模式的选中态用红色：和「挑素材做视频」的蓝色一眼分得开，少误删 */
.asset-card.asset-manage-picked { border-color: var(--red-600, #dc2626);
  box-shadow: 0 0 0 2px var(--red-200, #fecaca); }
.asset-card.asset-manage-picked .asset-pick { background: var(--red-600, #dc2626); opacity: 1; }
.asset-select-go.asset-danger { background: var(--red-600, #dc2626); }
.asset-select-go.asset-danger:disabled { background: var(--gray-300, #d1d5db); cursor: not-allowed; filter: none; }
.asset-upload-retry { align-self: flex-start; font-size: 11px; padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--red-600, #dc2626); background: none; color: var(--red-600, #dc2626); cursor: pointer; }
.asset-upload-retry[hidden] { display: none; }
.asset-upload-retry:hover { background: rgb(220 38 38 / .08); }

/* ---- 处理中状态气泡（实时进度：耗时/工具/六态/报告阶段） ---- */
.bubble.status-bubble { border: 1px solid var(--border); background: var(--surface);
  border-radius: 12px; padding: 10px 14px; max-width: min(520px, 100%); }
.sb-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.sb-pulse { width: 8px; height: 8px; border-radius: 9999px; background: var(--brand-600);
  animation: sb-breathe 1.2s ease-in-out infinite; }
@keyframes sb-breathe { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
.sb-elapsed { font-size: 11px; font-weight: 400; color: var(--fg-muted); }
.sb-body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.sb-line { font-size: 12.5px; color: var(--fg-muted); }
.sb-line code { background: var(--surface); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 6px; font-size: 11.5px; }
.sb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-chip { font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--fg-muted); }
.sb-chip.state-completed { color: #3fb950; border-color: #3fb950; }
.sb-chip.state-running { color: #58a6ff; border-color: #58a6ff; }
.sb-chip.state-needs_user_input { color: #d29922; border-color: #d29922; }
.sb-chip.state-needs_approval { color: #f0883e; border-color: #f0883e; }
.sb-chip.state-failed { color: #f85149; border-color: #f85149; }

/* ---- 气泡内具象渲染：路由轨迹 / 执行明细（工具+参数）/ 产物链接 ---- */
.msg-extras { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.x-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.x-chip { font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--fg-muted); }
.x-chip.state-completed { color: #3fb950; border-color: #3fb950; }
.x-chip.state-running { color: #58a6ff; border-color: #58a6ff; }
.x-chip.state-needs_user_input { color: #d29922; border-color: #d29922; }
.x-chip.state-needs_approval { color: #f0883e; border-color: #f0883e; }
.x-chip.state-failed { color: #f85149; border-color: #f85149; }
.tool-detail { border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--surface); font-size: 12.5px; }
.tool-detail summary { padding: 7px 10px; cursor: pointer; color: var(--fg-muted);
  user-select: none; }
.tool-detail summary:hover { color: var(--fg); }
.tool-steps { border-top: 1px solid var(--border); display: flex; flex-direction: column; }
.tool-step { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px;
  border-bottom: 1px solid var(--border); font-size: 12px; }
.tool-step:last-child { border-bottom: 0; }
.tool-step .ts-ok { color: #3fb950; font-size: 12px; line-height: 1.4; }
.tool-step .ts-ok.ts-no { color: #f85149; }
.tool-step .ts-name { font-weight: 600; white-space: nowrap; color: var(--fg); }
.tool-step .ts-args { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--fg-muted); word-break: break-all; }
.x-dlv { font-size: 12.5px; color: var(--fg-muted); }
.x-link { display: inline-block; margin-left: 4px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--brand-600); color: var(--brand-700, var(--brand-600));
  text-decoration: none; font-size: 12px; }
.x-link:hover { background: var(--brand-600); color: #fff; }
.typing-hint { font-size: 12px; color: var(--fg-muted); }

/* ---- 音色合并面板：我的 / 系统 标签切开，一块搞定 ---- */
.voice-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.voice-tab { padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: none; color: var(--fg-muted); font-size: 12.5px; cursor: pointer; }
.voice-tab:hover { border-color: var(--brand-600); color: var(--fg); }
.voice-tab.active { background: var(--brand-600, #1a73e8); border-color: var(--brand-600, #1a73e8);
  color: #fff; font-weight: 600; }
.voice-empty { font-size: 12.5px; color: var(--fg-muted); padding: 8px 2px; }
.wr-aud { width: 100%; margin-top: 6px; height: 32px; }
.wr-name { line-height: 1.4; }

/* ---- 底部总览卡已改为消息流内的一次性「出片配置卡」（左脸/中声/右文案 + 绿色按钮）---- */
/* ---- 卡片标题行 + × 关闭（每张素材卡都能关掉）---- */
.widget-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.widget-head .widget-title { flex: 1; min-width: 0; }
.widget-close { flex: none; width: 20px; height: 20px; line-height: 18px; text-align: center;
  border-radius: 50%; border: 1px solid transparent; background: none; color: var(--fg-faint);
  font-size: 13px; cursor: pointer; padding: 0; }
.widget-close:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
/* 旧卡收起（纪律3）：只剩标题行，点标题可再展开 */
.widget-box.collapsed > :not(.widget-head) { display: none; }
.widget-box.collapsed { opacity: .72; }
.widget-box.collapsed .widget-head { cursor: pointer; }
.widget-box.collapsed .widget-title::after { content: " ▸ 已收起，点击展开"; font-size: 11px;
  font-weight: 400; color: var(--fg-faint); }
/* 向导纪律（2026-09-12）：已答的卡组收起后挂「已选」徽标，标题后缀让位给徽标 */
.widget-picked-badge { flex: none; font-size: 11.5px; font-weight: 600; color: #1a7f37;
  white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.widget-box.answered.collapsed .widget-title::after { content: " ▸ 点击改选"; }
/* 待办/报价卡头部：未收起时也可点标题收起（光标提示） */
.approval-box .widget-head, .action-box .widget-head { cursor: pointer; }
/* 头部右侧的费用/有效期摘要行 */
.wr-head-sub { font-size: 12px; color: var(--fg-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* ---- 出片配置卡（一次性附件）：左脸 · 中声 · 右文案 + 大绿色确认按钮 ---- */
.summary-card { margin: 10px 0; border: 1.5px solid #1a7f37; border-radius: 12px;
  background: var(--surface); box-shadow: 0 2px 12px rgba(26, 127, 55, .14); overflow: hidden;
  align-self: flex-start; width: min(600px, 100%); }
.summary-card .sum-head { display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.summary-card .sum-title { font-size: 13px; font-weight: 600; }
.summary-card .sum-slots { display: flex; gap: 8px; padding: 10px 12px 8px; flex-wrap: wrap; }
.summary-card .sum-slot { flex: 1 1 0; min-width: 108px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--bg); }
.summary-card .sum-slot-empty { color: var(--fg-faint); font-size: 12px; border-style: dashed;
  background: transparent; }
.summary-card .sum-slot-required { color: var(--warn); font-weight: 600;
  border: 1px dashed var(--warn-border); background: var(--warn-bg); }
.summary-card .sum-slot-body { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.summary-card .sum-avatar { width: 40px; height: 53px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--control-border); flex: none; }
.summary-card .sum-ic { font-size: 16px; flex: none; }
.summary-card .sum-name { font-size: 12.5px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.summary-card .sum-x { flex: none; width: 18px; height: 18px; line-height: 16px; text-align: center;
  border-radius: 50%; border: 1px solid var(--border); background: none; color: var(--fg-faint);
  font-size: 11px; cursor: pointer; padding: 0; }
.summary-card .sum-x:hover { border-color: var(--danger); color: var(--danger); }
.summary-card .sum-foot { padding: 0 12px 12px; }
.summary-card .sum-go { width: 100%; padding: 12px 16px; border: 0; border-radius: 10px;
  background: #1a7f37; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
  letter-spacing: .02em; }
.summary-card .sum-go:hover:not(:disabled) { background: #166b2e; }
.summary-card .sum-go:disabled { background: var(--control-border, #d0d7de); color: var(--fg-faint);
  cursor: not-allowed; }
.summary-card.submitted .sum-go { background: #166b2e; }
.summary-card.collapsed > :not(.sum-head) { display: none; }
.summary-card.collapsed { opacity: .85; }
.summary-card.collapsed .sum-title::after { content: " ▸ 已收起，点击展开"; font-size: 11px;
  font-weight: 400; color: var(--fg-faint); }

/* ---- 报告模块5/6：点开直接看内容（不给下载链接） ---- */
.report-content { margin-top: 6px; }
.report-view-btn { font-size: 12px; font-weight: 600; color: var(--blue-500, #2563eb);
  border: 1px solid var(--control-border); border-radius: 6px; padding: 5px 12px;
  background: none; cursor: pointer; }
.report-view-btn:hover { background: var(--gray-50, #f9fafb); }
.dark .report-view-btn:hover { background: #1a1a1a; }
.report-view-btn:disabled { opacity: .6; cursor: wait; }
.report-md { margin-top: 8px; max-height: 380px; overflow-y: auto; white-space: pre-wrap;
  word-break: break-word; font-size: 12.5px; line-height: 1.7; color: var(--fg-muted);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--gray-50, #f9fafb); }
.report-md::-webkit-scrollbar { width: 8px; }
.report-md::-webkit-scrollbar-thumb { background: var(--control-border); border-radius: 4px; }
.report-md::-webkit-scrollbar-track { background: transparent; }
.dark .report-md { background: #141414; }
.report-md img, .report-md audio, .report-md video { display: block;
  max-width: min(320px, 100%); margin: 6px 0; }
.report-md h1, .report-md h2, .report-md h3, .report-md h4, .report-md h5, .report-md h6 {
  margin: 10px 0 6px; font-weight: 700; line-height: 1.4; color: var(--fg); }
.report-md h1 { font-size: 16px; }
.report-md h2 { font-size: 14.5px; }
.report-md h3 { font-size: 13.5px; }
.report-md h4, .report-md h5, .report-md h6 { font-size: 13px; }
.report-md p { margin: 6px 0; }
.report-md ul, .report-md ol { margin: 6px 0 6px 20px; padding: 0; }
.report-md li { margin: 2px 0; }
.report-md table { border-collapse: collapse; margin: 8px 0; width: 100%; font-size: 12px; }
.report-md th, .report-md td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }
.report-md th { background: var(--gray-50, #f9fafb); }
.dark .report-md th { background: #1a1a1a; }
.report-md blockquote { margin: 8px 0; padding: 4px 10px; border-left: 3px solid var(--control-border);
  color: var(--fg-muted); }
.report-md pre { margin: 8px 0; padding: 8px 10px; background: var(--gray-50, #f9fafb);
  border-radius: 6px; overflow-x: auto; font-size: 12px; }
.dark .report-md pre { background: #1a1a1a; }
.report-md hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }

/* ---- 恢复历史失败：重试/开新会话按钮 ---- */
.restore-retry-row { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.restore-retry-btn { font-size: 13px; font-weight: 600; color: var(--fg);
  border: 1px solid var(--control-border); border-radius: 8px; padding: 6px 14px;
  background: var(--surface); cursor: pointer; }
.restore-retry-btn:hover { border-color: var(--blue-500, #2563eb); color: var(--blue-500, #2563eb); }

/* ==================== IP12 交互原型接入（已验收视觉） ==================== */

/* ---- 统一 SVG 功能图标（复用原型 symbol sprite；装饰图标 aria-hidden，按钮有文字/aria-label） ---- */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon {
  width: 16px; height: 16px; flex: 0 0 16px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -3px;
}
.ui-icon.large { width: 18px; height: 18px; flex-basis: 18px; }
.icon-label { display: inline-flex; align-items: center; gap: 6px; }

/* ---- 右上角「＋ 新建对话」：桌面全文字，手机紧凑图标（保留可访问名称） ---- */
.new-chat-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid var(--control-border); border-radius: var(--radius-control);
  background: var(--surface); color: var(--fg); cursor: pointer;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.new-chat-btn:hover { border-color: var(--brand-600); color: var(--brand-600); }
.new-chat-btn svg { flex: none; }

/* ---- 创作能力首轮引导面板：新会话且无真实用户消息时显示，受理后平滑收起 ---- */
.capability-launcher {
  width: min(610px, 100%);
  margin: 0 auto 14px;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(43 39 35 / .05);
  transform-origin: center top;
  transition: height .28s ease, opacity .2s ease, transform .28s ease,
              margin .28s ease, padding .28s ease, border-width .28s ease;
}
.capability-launcher[hidden] { display: none; }
.capability-launcher.leaving {
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  opacity: 0;
  transform: translateY(-8px) scale(.985);
  pointer-events: none;
}
.capability-launcher h3 { margin: 0 0 14px; text-align: center; font-size: 17px; letter-spacing: -.02em; }
.capability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.capability-card {
  min-width: 0; min-height: 62px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface);
  text-align: left; cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.capability-card:hover { transform: translateY(-1px); border-color: var(--gray-400); box-shadow: 0 6px 14px rgb(42 38 34 / .07); }
.capability-thumb {
  width: 44px; height: 44px;
  object-fit: contain; padding: 4px;
  border-radius: 10px;
  background: var(--gray-50, #faf7f3);
}
.dark .capability-thumb { background: #1a1a1a; }
.capability-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; font-size: 13px; }
.capability-tag { padding: 3px 6px; border-radius: 6px; color: #d5663c; background: #fff0e8; font-size: 9px; font-weight: 750; letter-spacing: .06em; }
.dark .capability-tag { background: #3a2319; }
.capability-more { display: block; margin: 12px auto 0; border: 0; background: transparent; color: var(--fg-faint); cursor: pointer; font-size: 12px; }
.capability-more:hover { color: var(--brand-600); }

/* ---- 输入框顶部拖拽横条：鼠标+触摸向上拖大，双击恢复 ---- */
.resize-handle {
  position: absolute; top: 3px; left: 50%; z-index: 3;
  width: 58px; height: 16px; padding: 0;
  border: 0; background: transparent;
  cursor: ns-resize; touch-action: none;
  transform: translateX(-50%);
}
.resize-handle::before {
  content: ""; display: block;
  width: 34px; height: 4px; margin: 5px auto 0;
  border-radius: 999px; background: var(--control-border);
  transition: width .15s ease, background .15s ease;
}
.resize-handle:hover::before, .resize-handle.dragging::before { width: 44px; background: var(--brand-600); }

/* ---- 已选项标签条：输入框上方可移除 ---- */
.selection-strip { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 2px 6px; }
.selection-strip[hidden] { display: none; }
.chip {
  display: flex; align-items: center; gap: 7px;
  min-height: 31px; padding: 5px 8px 5px 9px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--gray-50, #faf7f4);
  font-size: 12px; color: var(--fg-muted);
}
.dark .chip { background: #1a1a1a; }
.chip b { color: var(--fg); font-weight: 650; }
.chip .ui-icon { width: 14px; height: 14px; flex-basis: 14px; }
.chip button {
  width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--control-border); color: var(--fg-muted);
  cursor: pointer; line-height: 18px;
}
.chip button:hover { background: var(--danger); color: #fff; }

/* ---- 附件上传进度条（复用 /api/v4/upload 的 XHR 进度） ---- */
.upload-progress { padding: 6px 2px 0; color: var(--fg-muted); font-size: 12px; }
.upload-progress[hidden] { display: none; }
.upload-track { height: 4px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: var(--gray-100); }
.dark .upload-track { background: #1f1f1f; }
.upload-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--brand-600); transition: width .25s ease; }

/* ---- 输入框 ＋ 菜单（一级固定四项）与二级选择器 ---- */
.creation-menu {
  position: absolute; left: 8px; bottom: 52px; z-index: 32;
  width: 210px; padding: 7px;
  border: 1px solid var(--border); border-radius: 13px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgb(47 38 31 / .14), 0 3px 12px rgb(47 38 31 / .08);
  transform-origin: left bottom;
  animation: menu-in .16s ease-out;
}
.creation-menu[hidden], .picker[hidden] { display: none; }
@keyframes menu-in {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.menu-item {
  width: 100%; gap: 11px; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: 9px; background: transparent;
  text-align: left; cursor: pointer;
  display: flex; align-items: center;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--gray-100); outline: none; }
.dark .menu-item:hover, .dark .menu-item:focus-visible { background: #1f1f1f; }
.menu-icon { width: 21px; display: grid; place-items: center; }
.menu-label { flex: 1; font-weight: 600; font-size: 14px; }
.chevron { color: var(--fg-faint); font-size: 18px; }

.picker {
  position: absolute; left: 8px; bottom: 52px; z-index: 32;
  width: 360px; max-height: 430px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgb(47 38 31 / .14), 0 3px 12px rgb(47 38 31 / .08);
  animation: menu-in .16s ease-out;
}
.picker-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.picker-head button {
  width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: var(--gray-100); cursor: pointer;
  display: grid; place-items: center;
}
.dark .picker-head button { background: #1f1f1f; }
.picker-head button .ui-icon { transform: rotate(90deg); }
.picker-head strong { flex: 1; font-size: 14px; }
.picker-head span { color: var(--fg-faint); font-size: 12px; }
.picker-list { display: grid; gap: 7px; max-height: 360px; padding: 10px; overflow-y: auto; }
.pick-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 58px; padding: 9px 10px;
  border: 1px solid transparent; border-radius: 11px;
  background: var(--gray-50, #faf9f7); cursor: pointer;
  text-align: left; font: inherit; color: var(--fg);
}
.dark .pick-row { background: #161616; }
.pick-row:hover { border-color: var(--gray-300); background: var(--surface); }
.pick-row.selected { border-color: var(--brand-300); background: var(--brand-50, #eef5ff); }
.dark .pick-row.selected { background: rgb(26 115 232 / .14); }
.pick-main { min-width: 0; gap: 10px; display: flex; align-items: center; }
.pick-thumb {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 11px; object-fit: contain; padding: 3px;
  background: var(--gray-100);
}
.dark .pick-thumb { background: #1f1f1f; }
.pick-avatar {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center;
  border-radius: 11px; color: #fff;
  background: linear-gradient(140deg, #2d3344, #7b6f69);
  font-weight: 700; font-size: 13px;
}
.pick-copy { min-width: 0; }
.pick-copy strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-copy small { display: block; margin-top: 4px; color: var(--fg-muted); font-size: 11px; }
.pick-action {
  flex: 0 0 auto; padding: 6px 9px;
  border: 1px solid var(--control-border); border-radius: 8px;
  color: var(--fg-muted); background: var(--surface);
  font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.pick-action .ui-icon { width: 13px; height: 13px; flex-basis: 13px; }
.selected .pick-action { border-color: var(--brand-600); color: var(--brand-700, var(--brand-600)); }
.picker-empty { font-size: 12.5px; color: var(--fg-muted); padding: 8px 4px; }

/* ---- 更多创作能力弹窗（原生 dialog） ---- */
.cap-more-dialog {
  width: min(480px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid var(--border); border-radius: 16px;
  color: var(--fg); background: var(--surface);
  box-shadow: 0 18px 48px rgb(47 38 31 / .14);
}
.cap-more-dialog::backdrop { background: rgba(25, 24, 23, .28); backdrop-filter: blur(3px); }
.cap-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cap-dialog-head strong { font-size: 15px; }
.cap-dialog-close { width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--gray-100); color: var(--fg-muted); cursor: pointer; }
.dark .cap-dialog-close { background: #1f1f1f; }
.cap-dialog-body { max-height: 60vh; padding: 12px 16px; overflow: auto; }
.cap-more-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cap-more-row:last-child { border-bottom: 0; }
.cap-more-row small { display: block; margin-top: 3px; color: var(--fg-muted); font-size: 12px; }
.cap-more-pick { flex: none; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--brand-600); background: none; color: var(--brand-600); cursor: pointer; }
.cap-more-pick:hover { background: var(--brand-50); }
.dark .cap-more-pick:hover { background: rgb(138 180 248 / .12); }

/* ---- 气泡双向回弹：用户右下、Agent 左下（比用户晚约 190ms），只对新消息 ---- */
.msg.msg-enter.user .bubble { transform-origin: 100% 100%;
  animation: chat-bubble-spring .48s cubic-bezier(.2, .88, .28, 1.18) both; }
.msg.msg-enter.assistant .bubble { transform-origin: 8% 100%;
  animation: chat-bubble-spring-left .52s cubic-bezier(.2, .88, .28, 1.18) .19s both; }
@keyframes chat-bubble-spring {
  0% { opacity: 0; transform: translate3d(14px, 12px, 0) scale(.88); }
  56% { opacity: 1; transform: translate3d(-2px, -2px, 0) scale(1.035); }
  78% { transform: translate3d(1px, 1px, 0) scale(.992); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes chat-bubble-spring-left {
  0% { opacity: 0; transform: translate3d(-14px, 12px, 0) scale(.88); }
  56% { opacity: 1; transform: translate3d(2px, -2px, 0) scale(1.035); }
  78% { transform: translate3d(-1px, 1px, 0) scale(.992); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* ---- 桌面固定一屏：中间聊天区独立滚动，侧栏独立滚动；手机端整页自然滚动 ---- */
@media (min-width: 901px) {
  body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
  .shell { flex: 1 1 0; min-height: 0; padding-top: 0; }
  .main-col { min-height: 0; overflow: hidden; }
  .intro { overflow-y: auto; }
  .chat-pane { min-height: 0; }
  .messages { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
  .composer-wrap { position: static; padding-top: 8px; }
  .back-bottom { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); margin: 0; }
  .capability-launcher { max-height: 62vh; overflow-y: auto; }
}

/* ---- 移动端：恢复整页自然滚动，无双层滚动陷阱 ---- */
@media (max-width: 900px) {
  body { display: block; height: auto; overflow: visible; }
  .main-col { overflow: visible; }
  .intro { overflow: visible; }
  .messages { overflow: visible; }
  .back-bottom { position: sticky; bottom: 14px; transform: translateX(-50%); margin: -40px auto 0; }
}
@media (max-width: 760px) {
  .creation-menu, .picker {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%; max-height: 62vh;
    border-radius: 19px 19px 0 0;
    box-shadow: 0 -20px 50px rgb(31 29 27 / .2);
    z-index: 60;
  }
  .creation-menu { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
  .menu-item { min-height: 51px; }
  .picker-list { max-height: calc(62vh - 58px); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .new-chat-btn { width: 38px; padding: 0; justify-content: center; }
  .new-chat-btn .new-chat-text { display: none; }
  .capability-launcher { padding: 14px; }
  .capability-grid { grid-template-columns: 1fr; }
}

/* ---- 样音现场录制弹层（2026-09-12 口播克隆）---- */
.sample-rec-dialog { width: min(92vw, 440px); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; background: var(--surface); color: var(--fg); box-shadow: 0 12px 40px rgb(0 0 0 / .18); }
.sample-rec-dialog::backdrop { background: rgb(0 0 0 / .45); }
.sample-rec-dialog form { margin: 0; }
.srec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.srec-close { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--fg-muted); padding: 2px 6px; }
.srec-label { font-size: 13px; color: var(--fg-muted); margin-bottom: 8px; }
.srec-script { font-size: 16px; line-height: 1.7; padding: 12px; border-radius: 10px;
  background: var(--gray-100); border: 1px solid var(--border); margin-bottom: 8px; }
.dark .srec-script { background: #1f1f1f; }
.srec-status { font-size: 12px; color: var(--fg-muted); min-height: 1.4em; margin-bottom: 8px; }
.sample-rec-dialog audio { width: 100%; margin-bottom: 10px; }
.srec-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.srec-actions button { font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg); cursor: pointer; }
.srec-actions button:disabled { opacity: .45; cursor: not-allowed; }
.srec-actions #srec-submit { background: var(--blue-600, #2563eb); border-color: transparent; color: #fff; }

/* 素材面板音频条目：卡片内试听按钮 */
.asset-play { position: absolute; left: 10px; bottom: 42px; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; line-height: 1; padding: 5px 8px; border-radius: 7px; border: 0; cursor: pointer;
  background: var(--blue-600, #2563eb); color: #fff; opacity: 0; transition: opacity 150ms; }
.asset-card:hover .asset-play, .asset-play:focus-visible { opacity: 1; }
@media (pointer: coarse) { .asset-play { opacity: 1; } }