/* ============================================================ 灵犀 · Design System v0.41 —— 浅色 Linear 风控制台 白底 + 黑灰文字 + 单一蓝色强调 + 极少量紫色（仅 AI / 项目经理标识）。 深色作为可切换主题保留：。 纯前端换肤：所有 id / JS 契约保持不变。 参考实测规范 landing-assets/design-spec.md（浅色版翻译）： 发丝边框 rgba(0,0,0,.07)、卡片圆角 8-10px、按钮胶囊、微交互 150ms、 零 emoji 图标（全内联 SVG 1.6px 描边）、零紫色大渐变。 ============================================================ */ :root { color-scheme: light; /* —— 表面（白 → 极浅灰四级，几乎零色偏）—— */ --bg: #FFFFFF; --bg-subtle: #FAFAFB; --surface: #FFFFFF; --surface-2: #F4F4F6; --surface-3: #EAEAEE; --elev: #FFFFFF; --overlay-bg: rgba(24, 24, 27, .28); /* —— 描边（发丝级，绝不用 1px solid #ccc 实线感）—— */ --border: rgba(0, 0, 0, .07); --border-strong: rgba(0, 0, 0, .12); --border-accent: rgba(75, 110, 245, .42); /* —— 文字 —— */ --text: #18181B; --muted: #6B6D76; --faint: #7E808A; /* 三级文字：白底对比 ≈3.9:1，比 #9497A1 更耐读 */ --on-accent: #FFFFFF; /* —— 单一强调色：蓝（与公众号排版主题同源）—— */ --accent: #4B6EF5; --accent-hover: #3F5FE0; --accent-soft: rgba(75, 110, 245, .09); --accent-ring: rgba(75, 110, 245, .16); /* —— 紫：只作 AI / 项目经理标识用，克制 —— */ --ai: #6D4AE0; --ai-soft: rgba(109, 74, 224, .10); --ai-border: rgba(109, 74, 224, .26); /* —— 语义色 —— */ --danger: #D64545; --danger-soft: rgba(214, 69, 69, .08); --ok: #12855C; --warn: #9A6B12; /* —— 代码块：两个主题都保持深底（可读性 + 工程感）—— */ --code-bg: #17181C; --code-text: #E7E8EC; --code-border: rgba(255, 255, 255, .10); /* v0.83：收款二维码的衬底。**深浅两个主题都是白的**，这是唯一一个刻意不跟随 主题翻转的表面色——二维码要被摄像头扫，深色衬底会让识别率掉下去；这是功能 正确性，不是配色偏好。写成 token 而不是就地 #fff，是为了让这个例外只有一处 可改、也只有一处需要解释。 */ --qr-paper: #FFFFFF; /* —— 七团队 + 项目经理 + 自建：白底可读的低饱和色相（沿用原色相，降饱和/压亮度）—— */ --daily: #2F8F6B; --daily-rgb: 47, 143, 107; --finance: #9A6B12; --finance-rgb: 154, 107, 18; --ecommerce: #B05C2E; --ecommerce-rgb: 176, 92, 46; --image: #AC4B84; --image-rgb: 172, 75, 132; --research: #1B7A92; --research-rgb: 27, 122, 146; --media: #6D4AE0; --media-rgb: 109, 74, 224; /* v0.47 B：小红书团队自己的徽章色（小红书品牌红，压到白底可读的低饱和档）。 */ --xiaohongshu: #C9333F; --xiaohongshu-rgb: 201, 51, 63; --education: #3665C4; --education-rgb: 54, 101, 196; --video: #1F8A7C; --video-rgb: 31, 138, 124; /* v0.57：变化检测团队——测绘/遥感味的橄榄绿，与 video 的青绿拉开距离。 */ --change: #5E7A38; --change-rgb: 94, 122, 56; /* v0.68：机械设计团队——工业蓝灰（工程蓝图的色调）。与 research 的青蓝 (#1B7A92)、education 的宝蓝 (#3665C4) 明度/饱和度都拉开，不撞色。 */ --cad: #4A6B8A; --cad-rgb: 74, 107, 138; --pm: #6D4AE0; --pm-rgb: 109, 74, 224; --custom: #4B6EF5; --custom-rgb: 75, 110, 245; --tint: .09; /* 徽章底色透明度 */ --tint-bd: .22; /* 徽章描边透明度 */ /* —— 圆角：结构锐利、交互圆润 —— */ --r-xs: 6px; --r-sm: 8px; --r: 10px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* —— 阴影：极轻，不发光 —— */ --sh-1: 0 1px 2px rgba(16, 17, 26, .05); --sh-2: 0 2px 8px rgba(16, 17, 26, .07), 0 1px 2px rgba(16, 17, 26, .04); --sh-3: 0 16px 44px rgba(16, 17, 26, .14), 0 2px 8px rgba(16, 17, 26, .06); --ring: 0 0 0 3px var(--accent-ring); --ease: cubic-bezier(.4, 0, .2, 1); --t: .15s; } [data-theme="dark"] { color-scheme: dark; --bg: #0B0B0D; --bg-subtle: #0F0F12; --surface: #141417; --surface-2: #1A1A1F; --surface-3: #232329; --elev: #17171B; --overlay-bg: rgba(4, 4, 6, .66); --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .15); --border-accent: rgba(124, 140, 255, .48); --text: #ECECEE; --muted: #9A9AA6; --faint: #7B7B87; --on-accent: #FFFFFF; --accent: #7C8CFF; --accent-hover: #93A0FF; --accent-soft: rgba(124, 140, 255, .15); --accent-ring: rgba(124, 140, 255, .24); --ai: #A78BFA; --ai-soft: rgba(167, 139, 250, .16); --ai-border: rgba(167, 139, 250, .34); --danger: #E97A73; --danger-soft: rgba(233, 122, 115, .12); --ok: #4EC98A; --warn: #D8AC5E; --code-bg: #0E0E11; --code-text: #E7E8EC; --code-border: rgba(255, 255, 255, .08); --qr-paper: #FFFFFF; /* 见浅色主题处的说明：二维码衬底不跟随主题 */ --daily: #6CC0A0; --daily-rgb: 108, 192, 160; --finance: #D2AB6B; --finance-rgb: 210, 171, 107; --ecommerce: #D68F6B; --ecommerce-rgb: 214, 143, 107; --image: #D38CB2; --image-rgb: 211, 140, 178; --research: #6CB4C6; --research-rgb: 108, 180, 198; --media: #A892E2; --media-rgb: 168, 146, 226; --xiaohongshu: #E8737E; --xiaohongshu-rgb: 232, 115, 126; --education: #7FA8E6; --education-rgb: 127, 168, 230; --video: #5FB3A8; --video-rgb: 95, 179, 168; --change: #9CB86A; --change-rgb: 156, 184, 106; --cad: #8FB0CE; --cad-rgb: 143, 176, 206; --pm: #A78BFA; --pm-rgb: 167, 139, 250; --custom: #8F9AE8; --custom-rgb: 143, 154, 232; --tint: .15; --tint-bd: .30; --sh-1: 0 1px 2px rgba(0, 0, 0, .35); --sh-2: 0 4px 14px rgba(0, 0, 0, .38); --sh-3: 0 18px 50px rgba(0, 0, 0, .55); } * { box-sizing: border-box; } ::selection { background: var(--accent-ring); color: var(--text); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } html, body { height: 100%; } body { margin: 0; min-height: 100vh; display: flex; color: var(--text); background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.6; } button, input, textarea, select { font-family: inherit; } /* 内联图标系统：单一线性风格，1.6px 描边，随文字颜色 */ .ic { width: 16px; height: 16px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ic-sm { width: 14px; height: 14px; } /* ---------------- 左侧栏（Linear 窄栏）---------------- */ #sidebar { width: 236px; flex-shrink: 0; background: var(--bg-subtle); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: relative; z-index: 40; } #sidebar .side-head { padding: 14px 14px 12px; display: flex; align-items: center; gap: 9px; } .logo-mark { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); box-shadow: var(--sh-1); } .logo-mark img, .login-logo img, .welcome-badge img { width: 100%; height: 100%; display: block; object-fit: contain; transform: scale(1.12); } #sidebar .side-head h1 { font-size: 14.5px; margin: 0; font-weight: 600; letter-spacing: .02em; } #sidebar .side-head .sub { font-size: 11.5px; color: var(--faint); display: block; margin-top: 1px; } #newBtn { margin: 2px 12px 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; font-weight: 500; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--sh-1); transition: background var(--t) var(--ease), border-color var(--t) var(--ease); display: flex; align-items: center; justify-content: flex-start; gap: 7px; } #newBtn:hover { background: var(--surface-2); border-color: var(--border-strong); } #newBtn:active { background: var(--surface-3); } /* Codex 式左上角工作入口：高频功能与会话列表同属导航，不再横塞在顶栏。 */ .side-tools { display: flex; flex-direction: column; gap: 2px; margin: 0 8px 8px; padding: 0 0 8px; border-bottom: 1px solid var(--border); } .side-tools .tool-btn { width: 100%; display: flex; justify-content: flex-start; padding: 7px 10px; color: var(--muted); font-size: 13px; } .side-tools .tool-btn .ic { color: var(--faint); } .side-tools .tool-btn:hover .ic { color: var(--text); } .side-tools .tool-btn .lbl { display: inline; } .side-section-label { padding: 0 16px 4px; color: var(--faint); font-size: 11px; font-weight: 500; letter-spacing: .04em; } #sessionList { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 14px; } /* Codex 式侧栏底座：偏好与管理统一落在左下，避免和当前会话操作混在顶栏。 */ .side-footer { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-top: 1px solid var(--border); background: var(--bg-subtle); } .side-footer .tool-btn { width: 100%; display: flex; justify-content: flex-start; padding: 7px 10px; color: var(--muted); font-size: 13px; } .side-footer .tool-btn .ic { color: var(--faint); } .side-footer .tool-btn:hover .ic { color: var(--text); } .side-footer .tool-btn .lbl { display: inline; } .side-settings { width: 100%; } /* 桌面端从侧栏向右、贴着底部展开；内容过多时只滚动菜单本身。 */ .side-settings .dropdown { left: calc(100% + 8px); right: auto; top: auto; bottom: 0; min-width: 220px; max-height: calc(100vh - 20px); overflow-y: auto; } .sess-item { position: relative; padding: 7px 10px; border-radius: var(--r-xs); cursor: pointer; font-size: 13px; color: var(--muted); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background var(--t) var(--ease), color var(--t) var(--ease); } .sess-item:hover { background: var(--surface-2); color: var(--text); } .sess-item.active { background: var(--surface-3); color: var(--text); font-weight: 500; } /* ---------------- 主区 ---------------- */ #main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); } header { padding: 0 16px; height: 48px; flex: none; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--bg); position: sticky; top: 0; z-index: 30; } .head-left { display: flex; align-items: center; gap: 8px; min-width: 0; } header .sub { color: var(--muted); font-size: 12.5px; } .menu-btn { display: none; background: transparent; color: var(--muted); border: none; border-radius: var(--r-xs); width: 30px; height: 30px; cursor: pointer; flex-shrink: 0; align-items: center; justify-content: center; padding: 0; transition: background var(--t) var(--ease), color var(--t) var(--ease); } .menu-btn:hover { background: var(--surface-2); color: var(--text); } .head-actions { display: flex; align-items: center; gap: 2px; min-width: 0; } /* 工具栏按钮：无边框幽灵态（不再是一排 chips） */ .hk-open, .tool-btn { background: transparent; color: var(--muted); border: none; border-radius: var(--r-xs); padding: 6px 9px; cursor: pointer; font-size: 13px; flex-shrink: 0; transition: background var(--t) var(--ease), color var(--t) var(--ease); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .hk-open:hover, .tool-btn:hover { background: var(--surface-2); color: var(--text); } .hk-open:active, .tool-btn:active { background: var(--surface-3); } .icon-only { padding: 6px; } .head-sep { width: 1px; height: 18px; background: var(--border); margin: 0 5px; flex: none; } /* 设置下拉 */ .menu-wrap { position: relative; } .dropdown { position: absolute; right: 0; top: calc(100% + 6px); min-width: 188px; background: var(--elev); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-3); padding: 5px; z-index: 60; display: none; animation: popIn .13s var(--ease); } .menu-wrap.open .dropdown { display: block; } .menu-wrap.open > .tool-btn { background: var(--surface-2); color: var(--text); } @keyframes popIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .menu-item { display: flex; align-items: center; gap: 9px; width: 100%; background: transparent; border: none; color: var(--text); padding: 7px 9px; border-radius: var(--r-xs); font-size: 13px; cursor: pointer; text-align: left; transition: background var(--t) var(--ease), color var(--t) var(--ease); } .menu-item:hover { background: var(--surface-2); } .menu-item .ic { color: var(--faint); } .menu-item:hover .ic { color: var(--muted); } .menu-sep { height: 1px; background: var(--border); margin: 5px -5px; } #logoutBtn { color: var(--muted); } #logoutBtn:hover { background: var(--danger-soft); color: var(--danger); } #logoutBtn:hover .ic { color: var(--danger); } /* 主题切换：按当前主题只显示一个图标 */ .ic-moon { display: block; } .ic-sun { display: none; } [data-theme="dark"] .ic-moon { display: none; } [data-theme="dark"] .ic-sun { display: block; } /* 身份徽标 */ #whoami { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); min-width: 0; } #whoami .who-name { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .role-badge { font-size: 11px; padding: 1px 7px; border-radius: var(--r-xs); font-weight: 500; flex-shrink: 0; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); } .role-badge.tenant { color: var(--accent); background: var(--accent-soft); border-color: var(--border-accent); } .role-badge.superadmin { color: var(--finance); background: rgba(var(--finance-rgb), var(--tint)); border-color: rgba(var(--finance-rgb), var(--tint-bd)); } .bind-code { font-size: 11.5px; color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 1px 8px; cursor: default; white-space: nowrap; background: var(--bg-subtle); } .bind-code b { color: var(--text); letter-spacing: .06em; font-weight: 600; } /* 已开通团队条 */ #teamStrip { padding: 8px 20px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); } /* 手机端横向滚动时，条目一律不许被压扁成竖排（flex-wrap:nowrap 下必须 flex:none）。 */ #teamStrip .strip-label { margin-right: 2px; color: var(--faint); white-space: nowrap; flex: none; } #teamStrip .tag { flex: none; } #teamStrip .strip-custom { color: var(--muted); margin-left: 6px; white-space: nowrap; flex: none; } /* ---------------- 聊天区 ---------------- */ #chat { flex: 1; overflow-y: auto; padding: 28px 24px 10px; display: flex; flex-direction: column; gap: 20px; max-width: 824px; width: 100%; margin: 0 auto; } /* #empty：欢迎面板（renderWelcomePanel 注入 innerHTML，display:none/block 契约不变） */ .empty { color: var(--muted); margin: 6vh auto 0; max-width: 760px; width: 100%; font-size: 14px; line-height: 1.7; padding: 0 2px 20px; } .welcome-badge { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 12px; background: #fff; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--sh-1); } .welcome-title { text-align: center; font-size: 20px; font-weight: 600; color: var(--text); margin: 0 0 8px; letter-spacing: .01em; } .welcome-sub { text-align: center; font-size: 13.5px; line-height: 1.7; color: var(--muted); max-width: 480px; margin: 0 auto 28px; } .welcome-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; margin-bottom: 20px; } .welcome-card { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: 14px 15px 13px; text-align: left; box-shadow: var(--sh-1); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); display: flex; flex-direction: column; } .welcome-card:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--sh-2); } .welcome-card-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .welcome-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .welcome-card-name { font-weight: 600; font-size: 13.5px; color: var(--text); } .welcome-card-desc { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0 0 11px; } .welcome-examples { display: flex; flex-direction: column; gap: 6px; margin-top: auto; } .welcome-ex-btn { text-align: left; background: var(--bg-subtle); border: 1px solid var(--border); color: var(--muted); border-radius: var(--r-xs); padding: 7px 10px; font-size: 12px; line-height: 1.45; cursor: pointer; transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease); font-family: inherit; } .welcome-ex-btn:hover { border-color: var(--border-accent); background: var(--accent-soft); color: var(--text); } .welcome-foot { text-align: center; font-size: 11.5px; color: var(--faint); margin-top: 4px; line-height: 1.7; } .msg { display: flex; flex-direction: column; gap: 6px; max-width: 84%; animation: msgIn .28s var(--ease); } @keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .msg.user { align-self: flex-end; align-items: flex-end; } .msg.assistant { align-self: flex-start; } .bubble { padding: 11px 15px; border-radius: var(--r-lg); line-height: 1.72; word-break: break-word; font-size: 14.5px; } .user .bubble { background: var(--accent-soft); border: 1px solid var(--border-accent); color: var(--text); white-space: pre-wrap; border-bottom-right-radius: 4px; } .assistant .bubble { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-1); border-bottom-left-radius: 4px; } .bubble h1, .bubble h2, .bubble h3 { margin: .7em 0 .35em; line-height: 1.35; font-weight: 600; } .bubble h1 { font-size: 1.24em; } .bubble h2 { font-size: 1.14em; } .bubble h3 { font-size: 1.04em; } .bubble p { margin: .45em 0; } .bubble p:first-child { margin-top: 0; } .bubble p:last-child { margin-bottom: 0; } .bubble ul, .bubble ol { margin: .45em 0; padding-left: 1.4em; } .bubble li { margin: .2em 0; } .bubble strong { color: var(--text); font-weight: 600; } .bubble a { color: var(--accent); } /* P2-2：==高亮== 的落地样式。浏览器自带的 默认是「黄底黑字」，在本控制台 的深色气泡里刺眼且读不动，所以按主题色重画一版：低饱和底 + 保持正文字色。 */ .bubble mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; padding: .5px 3px; border-radius: 3px; } .bubble code { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: .5px 5px; border-radius: 5px; font-family: "SFMono-Regular", "Cascadia Code", Consolas, monospace; font-size: .87em; } .bubble pre { background: var(--code-bg); color: var(--code-text); padding: 13px 15px; border-radius: var(--r-sm); margin: .7em 0; overflow-x: auto; border: 1px solid var(--code-border); } .bubble pre code { background: none; border: none; padding: 0; color: inherit; font-size: .86em; line-height: 1.65; } /* v0.45：宽表外包 .tbl-wrap 负责横向滚动。table 用 min-width:100% + 单元格不换行， 窄表仍撑满气泡宽度，宽表则按内容自然撑宽触发滚动，不会被硬挤成竖排文字。 */ .bubble .tbl-wrap { overflow-x: auto; max-width: 100%; margin: .7em 0; -webkit-overflow-scrolling: touch; } .bubble table { border-collapse: collapse; width: auto; min-width: 100%; font-size: .92em; } .bubble th, .bubble td { border: 1px solid var(--border); padding: 7px 11px; text-align: left; white-space: nowrap; } .bubble th { background: var(--surface-2); font-weight: 600; } .bubble tr:nth-child(even) td { background: var(--bg-subtle); } .bubble tbody tr:hover td { background: var(--surface-2); } /* 团队徽章：低饱和着色软徽章 + 同色圆点（零 emoji） */ .tag { font-size: 11.5px; padding: 2px 9px 2px 8px; border-radius: var(--r-xs); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; border: 1px solid var(--border); color: var(--muted); background: var(--surface-2); } .tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; opacity: .9; } .msg > .tag { align-self: flex-start; } .tag.daily { color: var(--daily); background: rgba(var(--daily-rgb), var(--tint)); border-color: rgba(var(--daily-rgb), var(--tint-bd)); } .tag.finance { color: var(--finance); background: rgba(var(--finance-rgb), var(--tint)); border-color: rgba(var(--finance-rgb), var(--tint-bd)); } .tag.ecommerce { color: var(--ecommerce); background: rgba(var(--ecommerce-rgb), var(--tint)); border-color: rgba(var(--ecommerce-rgb), var(--tint-bd)); } .tag.image { color: var(--image); background: rgba(var(--image-rgb), var(--tint)); border-color: rgba(var(--image-rgb), var(--tint-bd)); } .tag.research { color: var(--research); background: rgba(var(--research-rgb), var(--tint)); border-color: rgba(var(--research-rgb), var(--tint-bd)); } .tag.media { color: var(--media); background: rgba(var(--media-rgb), var(--tint)); border-color: rgba(var(--media-rgb), var(--tint-bd)); } .tag.xiaohongshu { color: var(--xiaohongshu); background: rgba(var(--xiaohongshu-rgb), var(--tint)); border-color: rgba(var(--xiaohongshu-rgb), var(--tint-bd)); } .tag.education { color: var(--education); background: rgba(var(--education-rgb), var(--tint)); border-color: rgba(var(--education-rgb), var(--tint-bd)); } .tag.video { color: var(--video); background: rgba(var(--video-rgb), var(--tint)); border-color: rgba(var(--video-rgb), var(--tint-bd)); } .tag.change { color: var(--change); background: rgba(var(--change-rgb), var(--tint)); border-color: rgba(var(--change-rgb), var(--tint-bd)); } .tag.cad { color: var(--cad); background: rgba(var(--cad-rgb), var(--tint)); border-color: rgba(var(--cad-rgb), var(--tint-bd)); } /* 紫色 = AI / 项目经理标识（全站唯一紫用途） */ .tag.pm { color: var(--ai); background: var(--ai-soft); border-color: var(--ai-border); } .tag.custom { color: var(--custom); background: rgba(var(--custom-rgb), var(--tint)); border-color: rgba(var(--custom-rgb), var(--tint-bd)); } /* 思考中 */ .thinking .bubble { color: var(--muted); } .thinking .bubble::after { content: ''; display: inline-block; width: 14px; text-align: left; animation: dots 1.3s steps(4, end) infinite; } @keyframes dots { 0%{content:'';} 25%{content:'·';} 50%{content:'··';} 75%{content:'···';} } /* 步骤级进度：已完成打勾 / 当前项高亮。有清单时关掉省略号动画。 */ .thinking .bubble.has-steps::after { content: none; animation: none; } .prog-steps { display: flex; flex-direction: column; gap: 5px; } .prog-step { display: flex; align-items: baseline; gap: 8px; line-height: 1.5; } .prog-step .prog-mark { flex: none; width: 1em; text-align: center; font-size: 12px; } .prog-step.done { color: var(--muted); } .prog-step.done .prog-mark { color: var(--ok); } .prog-step.active { color: var(--text); font-weight: 500; } .prog-step.active .prog-mark { color: var(--ai); } .prog-step .prog-secs { color: var(--faint); font-weight: 400; font-size: 12px; } /* 富输出：图片 / 视频 / 来源 / 下载 */ /* v0.71 交付文件列表：工程图 / 三维模型这类「拿走用」的产物，直接在气泡里给下载。 */ .msg-files { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .msg-files-head { font-size: 12.5px; color: var(--text-dim); letter-spacing: .01em; } .file-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); text-decoration: none; font-size: 13px; transition: border-color .15s, background .15s; } .file-chip:hover { border-color: var(--accent); background: var(--surface-3); } .file-ext { flex: none; min-width: 46px; text-align: center; padding: 2px 6px; border-radius: 5px; background: rgba(var(--cad-rgb), .16); color: var(--cad); font-size: 11px; font-weight: 600; letter-spacing: .03em; } .file-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msg-images, .msg-videos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .msg-images img { max-width: 260px; max-height: 260px; border-radius: var(--r-sm); cursor: zoom-in; border: 1px solid var(--border); background: var(--surface-2); box-shadow: var(--sh-1); transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); } .msg-images img:hover { box-shadow: var(--sh-2); border-color: var(--border-strong); } .msg-videos video { max-width: 320px; max-height: 320px; border-radius: var(--r-sm); border: 1px solid var(--border); background: #000; box-shadow: var(--sh-1); } .sources { margin-top: 4px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 14px; } .sources .sources-h { color: var(--faint); font-size: 11.5px; margin-bottom: 5px; font-weight: 600; letter-spacing: .04em; } .sources ol { margin: 0; padding-left: 1.3em; } .sources li { margin: .2em 0; font-size: 13px; } .sources a { color: var(--accent); text-decoration: none; word-break: break-all; } .sources a:hover { text-decoration: underline; } .doc-actions { margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; } .task-receipt { margin-top: 8px; padding: 12px 13px; border: 1px solid var(--border-accent); border-radius: var(--r); background: var(--accent-soft); display: flex; flex-direction: column; align-items: flex-start; gap: 9px; } .task-receipt-head { color: var(--accent); font-size: 13px; font-weight: 650; } .task-receipt-grid { width: 100%; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 12px; font-size: 12px; line-height: 1.55; } .task-receipt-grid span { color: var(--muted); } .task-receipt-grid b { color: var(--text); font-weight: 500; overflow-wrap: anywhere; } .doc-btn { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-xs); padding: 6px 12px; font-size: 12.5px; text-decoration: none; cursor: pointer; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--sh-1); } .doc-btn:hover { border-color: var(--border-strong); background: var(--surface-2); } /* v0.47 B：内容资产的两个动作是