/* ============================================================ 跨域 AI 团队 · Radium 未来空间 UI 设计关键词：3D 磨砂玻璃面板 + 实景场景嵌入 + 局部霓虹渐变光 负面词：廉价扁平 / 信息拥挤 ============================================================ */ /* ============================================================================ DESIGN SYSTEM · v2 (2026-09-04) ---------------------------------------------------------------------------- 结构：原语层 (oklch 色阶/尺度) → 语义层 (surface/text/border/accent…) → 兼容层 (保留 v1 全部 29 个变量名与值，旧代码零改动) 主题：:root = 暗色（默认）；[data-theme='light'] = 浅色 ========================================================================== */ :root { /* ---------------------------------------------------------------- 1. 色相原语 */ /* 品牌青（基准 #00cae0 → oklch(76.8% .132 208.6)） */ --brand-h: 208.6; --brand-50: oklch(96.5% 0.035 var(--brand-h)); --brand-100: oklch(93.0% 0.062 var(--brand-h)); --brand-200: oklch(89.0% 0.090 var(--brand-h)); --brand-300: oklch(84.5% 0.118 var(--brand-h)); --brand-400: oklch(80.5% 0.132 var(--brand-h)); --brand-500: oklch(76.8% 0.132 var(--brand-h)); /* = #00cae0 */ --brand-600: oklch(68.0% 0.120 var(--brand-h)); --brand-700: oklch(58.0% 0.104 var(--brand-h)); --brand-800: oklch(46.0% 0.084 var(--brand-h)); --brand-900: oklch(34.0% 0.062 var(--brand-h)); /* 中性冷灰（基准 #0e1116 面，色相 260） */ --neutral-h: 258; --neutral-0: oklch(100% 0 0); --neutral-50: oklch(97.5% 0.006 var(--neutral-h)); --neutral-100: oklch(94.5% 0.010 var(--neutral-h)); --neutral-200: oklch(87.0% 0.014 var(--neutral-h)); --neutral-300: oklch(78.0% 0.018 var(--neutral-h)); --neutral-400: oklch(68.0% 0.021 var(--neutral-h)); --neutral-500: oklch(56.7% 0.027 var(--neutral-h)); /* = #6b7886 */ --neutral-600: oklch(45.2% 0.028 var(--neutral-h)); /* = #4b5765 */ --neutral-700: oklch(35.0% 0.024 var(--neutral-h)); --neutral-800: oklch(27.5% 0.025 var(--neutral-h)); /* = #202834 */ --neutral-850: oklch(22.5% 0.022 var(--neutral-h)); /* = #161c26 */ --neutral-900: oklch(17.7% 0.011 var(--neutral-h)); /* = #0e1116 */ --neutral-950: oklch(12.5% 0.010 var(--neutral-h)); /* 功能色 */ --success-h: 160.5; --success-500: oklch(77.3% 0.174 var(--success-h)); --success-600: oklch(64.0% 0.150 var(--success-h)); --success-soft: oklch(77.3% 0.174 var(--success-h) / 0.14); --warn-h: 60.7; --warn-400: oklch(84.7% 0.127 72.8); --warn-500: oklch(78.5% 0.154 var(--warn-h)); --warn-600: oklch(66.0% 0.140 var(--warn-h)); --warn-soft: oklch(78.5% 0.154 var(--warn-h) / 0.14); --danger-h: 25.0; --danger-500: oklch(63.0% 0.190 var(--danger-h)); --danger-600: oklch(54.0% 0.175 var(--danger-h)); --danger-soft: oklch(63.0% 0.190 var(--danger-h) / 0.14); --info-h: 250.0; --info-500: oklch(70.0% 0.130 var(--info-h)); --info-soft: oklch(70.0% 0.130 var(--info-h) / 0.14); /* ---------------------------------------------------------------- 2. 语义层 */ /* 表面：0=应用底 1=卡片 2=抬升/悬停 3=浮层(弹窗/抽屉) */ --surface-0: oklch(15.5% 0.012 var(--neutral-h)); --surface-1: oklch(20.3% 0.018 var(--neutral-h) / 0.72); --surface-2: oklch(25.0% 0.022 var(--neutral-h) / 0.82); --surface-3: oklch(28.5% 0.024 var(--neutral-h) / 0.94); --surface-inset: oklch(13.0% 0.010 var(--neutral-h) / 0.60); --surface-glass: oklch(100% 0 0 / 0.04); --surface-glass-strong: oklch(100% 0 0 / 0.07); --surface-blur: 18px; /* 文本：1=主 2=次 3=弱 4=极弱/禁用 */ --fg-1: oklch(94.6% 0.010 var(--neutral-h)); --fg-2: oklch(84.0% 0.018 var(--neutral-h)); --fg-3: oklch(72.3% 0.025 var(--neutral-h)); --fg-4: oklch(56.7% 0.027 var(--neutral-h)); --fg-muted: oklch(45.2% 0.028 var(--neutral-h)); --fg-on-accent: oklch(12.0% 0.030 var(--brand-h)); /* 描边 */ --border-subtle: oklch(100% 0 0 / 0.06); --border: oklch(100% 0 0 / 0.09); --border-strong: oklch(100% 0 0 / 0.16); --border-accent: oklch(76.8% 0.132 var(--brand-h) / 0.42); --ring: oklch(84.5% 0.118 var(--brand-h) / 0.55); --ring-w: 2px; /* 强调/交互 */ --accent: var(--brand-500); --accent-hover: var(--brand-400); --accent-active: var(--brand-600); --accent-soft: oklch(76.8% 0.132 var(--brand-h) / 0.14); --accent-softer: oklch(76.8% 0.132 var(--brand-h) / 0.08); --accent-fg: var(--fg-on-accent); /* ---------------------------------------------------------------- 3. 尺度 */ /* 4pt 节奏 */ --space-0: 0px; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px; --space-10: 20px; --space-12: 24px; --space-16: 32px; --space-20: 40px; --space-24: 48px; --space-32: 64px; /* 圆角梯度 */ --r-xs: 6px; --r-sm2: 8px; --r-sm: 12px; --r-md: 14px; --r-md2: 18px; --r-lg: 20px; --r-lg2: 26px; --r-xl: 32px; --r-full: 999px; /* 阴影梯度（暗底用加深 + 微量品牌光） */ --sh-1: 0 1px 2px oklch(0% 0 0 / 0.30), 0 2px 6px oklch(0% 0 0 / 0.20); --sh-2: 0 4px 12px oklch(0% 0 0 / 0.34), 0 2px 4px oklch(0% 0 0 / 0.24); --sh-3: 0 18px 44px oklch(0% 0 0 / 0.45), 0 6px 16px oklch(0% 0 0 / 0.30); --sh-4: 0 28px 76px oklch(0% 0 0 / 0.55), 0 10px 26px oklch(0% 0 0 / 0.38); --sh-glow: 0 0 0 1px oklch(76.8% 0.132 var(--brand-h) / 0.28), 0 0 26px oklch(76.8% 0.132 var(--brand-h) / 0.22); --sh-inset: inset 0 1px 0 oklch(100% 0 0 / 0.06); /* 动效 */ --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; --dur-4: 380ms; --dur-5: 560ms; --ease-out: cubic-bezier(0.16, 1, 0.30, 1); /* 出场：快速启动、缓慢收尾 */ --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* 轻微回弹 */ /* 排版 */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 19px; --fs-2xl: 24px; --fs-3xl: 30px; --lh-tight: 1.25; --lh-snug: 1.4; --lh-normal: 1.6; --lh-relaxed: 1.75; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; /* 层级 */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-dropdown: 300; --z-overlay: 400; --z-modal: 500; --z-popover: 600; --z-toast: 700; --z-top: 900; /* 布局 */ --header-h: 56px; --sidebar-w: clamp(240px, 19vw, 320px); --dock-w: 44px; --panel-w: clamp(360px, 30vw, 460px); --fab-size: 44px; --composer-min-h: 52px; --composer-max-h: 180px; /* ============================================================ 4. 兼容层 ===== 以下为 v1 遗留变量名。全站 2000+ 处引用，保持原值不动， 确保本次 token 重构对既有样式零破坏。新代码请改用上面的语义层。 */ --bg: #0e1116; --bg-2: #0b0e13; --sidebar-bg: rgba(18, 23, 31, 0.72); --panel: rgba(22, 28, 38, 0.62); --panel-hover: rgba(32, 40, 52, 0.82); --glass: rgba(255, 255, 255, 0.04); --glass-strong: rgba(255, 255, 255, 0.07); --brand: #00cae0; --brand-2: #00e5ff; --brand-glow: rgba(0, 229, 224, 0.35); --brand-soft: rgba(0, 229, 224, 0.14); --manager: #ff9f43; --manager-2: #ffbf69; --online: #00d68f; --text: #e8eef4; --text-soft: #c2ccd6; --text-dim: #9aa7b5; --text-light: #6b7886; --text-faint: #4b5765; --stroke: rgba(255, 255, 255, 0.08); --stroke-strong: rgba(255, 255, 255, 0.14); --shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 6px 16px rgba(0, 0, 0, 0.3); --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.55), 0 10px 28px rgba(0, 0, 0, 0.4); --glow: 0 0 28px rgba(0, 229, 224, 0.25); --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --ease: cubic-bezier(0.22, 0.8, 0.26, 1); } /* ============================================================================ 浅色主题 —— 只需翻转语义层，兼容层同步映射，旧样式自动跟随 ========================================================================== */ :root[data-theme='light'] { color-scheme: light; --surface-0: oklch(98.4% 0.004 var(--neutral-h)); --surface-1: oklch(100% 0 0 / 0.86); --surface-2: oklch(100% 0 0 / 0.94); --surface-3: oklch(100% 0 0 / 0.98); --surface-inset: oklch(95.5% 0.006 var(--neutral-h)); --surface-glass: oklch(20% 0.02 var(--neutral-h) / 0.03); --surface-glass-strong: oklch(20% 0.02 var(--neutral-h) / 0.055); --fg-1: oklch(21.0% 0.020 var(--neutral-h)); --fg-2: oklch(34.0% 0.024 var(--neutral-h)); --fg-3: oklch(48.0% 0.026 var(--neutral-h)); --fg-4: oklch(62.0% 0.022 var(--neutral-h)); --fg-muted: oklch(74.0% 0.016 var(--neutral-h)); --border-subtle: oklch(20% 0.02 var(--neutral-h) / 0.07); --border: oklch(20% 0.02 var(--neutral-h) / 0.11); --border-strong: oklch(20% 0.02 var(--neutral-h) / 0.18); --accent: oklch(58.0% 0.118 var(--brand-h)); --accent-hover: oklch(52.0% 0.112 var(--brand-h)); --accent-active: oklch(46.0% 0.100 var(--brand-h)); --accent-soft: oklch(58.0% 0.118 var(--brand-h) / 0.10); --accent-softer: oklch(58.0% 0.118 var(--brand-h) / 0.055); --fg-on-accent: oklch(100% 0 0); --sh-1: 0 1px 2px oklch(20% 0.02 var(--neutral-h) / 0.06); --sh-2: 0 2px 8px oklch(20% 0.02 var(--neutral-h) / 0.09), 0 1px 2px oklch(20% 0.02 var(--neutral-h) / 0.05); --sh-3: 0 12px 32px oklch(20% 0.02 var(--neutral-h) / 0.13), 0 4px 10px oklch(20% 0.02 var(--neutral-h) / 0.07); --sh-4: 0 24px 60px oklch(20% 0.02 var(--neutral-h) / 0.18), 0 8px 20px oklch(20% 0.02 var(--neutral-h) / 0.10); --sh-inset: inset 0 1px 0 oklch(100% 0 0 / 0.7); /* v1 兼容层浅色映射 */ --bg: #f6f8fa; --bg-2: #eef1f5; --sidebar-bg: rgba(255, 255, 255, 0.82); --panel: rgba(255, 255, 255, 0.78); --panel-hover: rgba(255, 255, 255, 0.95); --glass: rgba(15, 25, 40, 0.035); --glass-strong: rgba(15, 25, 40, 0.06); --brand: #0798ad; --brand-2: #00a6bd; --brand-glow: rgba(7, 152, 173, 0.25); --brand-soft: rgba(7, 152, 173, 0.10); --text: #101720; --text-soft: #33414f; --text-dim: #5a6875; --text-light: #7b8895; --text-faint: #a3aeb9; --stroke: rgba(15, 25, 40, 0.10); --stroke-strong: rgba(15, 25, 40, 0.18); --shadow: 0 12px 32px rgba(20, 32, 48, 0.12), 0 4px 10px rgba(20, 32, 48, 0.06); --shadow-lg: 0 24px 60px rgba(20, 32, 48, 0.16), 0 8px 20px rgba(20, 32, 48, 0.09); --glow: 0 0 24px rgba(7, 152, 173, 0.18); } /* 无障碍：尊重系统降低动效偏好 */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; --dur-5: 0ms; } } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); overflow: hidden; -webkit-font-smoothing: antialiased; touch-action: manipulation; /* 消除移动端 300ms 点击延迟与双击缩放干扰 */ -webkit-tap-highlight-color: transparent; /* 去除 iOS 点击灰色高亮 */ } /* 未来空间背景：柔和渐变 + 悬浮玻璃光斑 */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse at 12% 18%, rgba(0, 229, 224, 0.14) 0%, transparent 45%), radial-gradient(ellipse at 88% 22%, rgba(0, 202, 224, 0.10) 0%, transparent 40%), radial-gradient(ellipse at 55% 85%, rgba(0, 229, 224, 0.10) 0%, transparent 48%), linear-gradient(160deg, #0e1116 0%, #0b0e13 50%, #090c11 100%); } body::after { content: ''; position: fixed; inset: 0; z-index: -1; opacity: 0.4; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); pointer-events: none; } /* ============================================================ 布局 ============================================================ */ .app { display: flex; width: 100vw; height: 100vh; height: 100dvh; /* dvh：手机地址栏收展不跳 */ min-width: 0; overflow: hidden; /* 防止缩放/拉伸出现横向滚动条破版 */ } /* ============================================================ 左侧边栏（磨砂玻璃面板） ============================================================ */ .sidebar { width: var(--sidebar-w); /* 流式：随视口缩放，替代固定 290px */ background: var(--sidebar-bg); backdrop-filter: blur(24px) saturate(150%); border-right: 1px solid var(--stroke); box-shadow: 8px 0 40px rgba(0,0,0,0.24); display: flex; flex-direction: column; z-index: 10; } .sidebar-header { padding: 18px 16px 14px; border-bottom: 1px solid var(--stroke); background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%); } .brand { display: flex; align-items: center; gap: 12px; } .brand-avatar { width: 44px; height: 44px; border-radius: var(--r-md); flex-shrink: 0; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 8px 24px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.35); } .brand-meta { min-width: 0; } .brand-name { font-size: 15px; font-weight: 800; letter-spacing: 0.2px; color: var(--text); } .brand-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .brand-badge { font-size: 9px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); padding: 2px 7px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 197, 151, 0.25); } .brand-version { font-size: 11px; color: var(--text-dim); font-weight: 600; } .sidebar-body { flex: 1; overflow-y: auto; padding: 14px 12px; } .sidebar-section { margin-bottom: 18px; } .section-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; margin-bottom: 9px; font-size: 11px; font-weight: 800; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; } .section-head .count { background: var(--glass-strong); color: var(--text-soft); padding: 2px 8px; border-radius: 10px; font-size: 10px; letter-spacing: 0; border: 1px solid var(--stroke); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); } .new-session { width: 22px; height: 22px; border-radius: 8px; border: none; background: var(--glass-strong); color: var(--text-soft); font-size: 15px; line-height: 1; cursor: pointer; transition: all 0.16s var(--ease); box-shadow: 0 2px 6px rgba(0,0,0,0.04); } .new-session:hover { background: var(--brand-soft); color: var(--brand); box-shadow: 0 0 12px var(--brand-glow); } /* Agent 列表 */ .agent-list { display: flex; flex-direction: column; gap: 1px; } .agent-list.compact { gap: 0px; } .agent-group { margin-bottom: 6px; } .agent-group-title { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 800; color: var(--text-light); letter-spacing: 0.7px; text-transform: uppercase; padding: 7px 8px 3px; } .agent-group-title .count { background: var(--glass-strong); color: var(--text-soft); padding: 1px 6px; border-radius: 8px; font-size: 9px; letter-spacing: 0; border: 1px solid var(--stroke); } .agent-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; transition: all 0.16s var(--ease); background: transparent; border: 1px solid transparent; } .agent-item:hover { background: var(--panel-hover); border-color: var(--stroke); box-shadow: 0 4px 14px rgba(0,0,0,0.20); transform: translateY(-1px); } .agent-item.core-item { padding: 5px 7px; } .agent-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.05)); border: 1px solid var(--stroke-strong); position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 3px 10px rgba(0,0,0,0.24); transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease); } .agent-avatar:hover { transform: scale(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 4px 14px rgba(99,102,241,0.28); } .agent-avatar.small { width: 24px; height: 24px; } .agent-avatar::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 7px; height: 7px; border-radius: 50%; background: var(--online); border: 2px solid var(--panel-hover); box-shadow: 0 0 0 1px rgba(255,255,255,0.22); } .ai-avatar { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-sprite { background-image: url('avatars/sprite.png'); background-repeat: no-repeat; background-size: 800% 700%; background-position: 0% 0%; border-radius: 50%; } .agent-info { min-width: 0; } .agent-name { font-size: 12px; font-weight: 700; color: var(--text-soft); } .agent-role { font-size: 10px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .core-badge { display: inline-block; margin-left: 4px; vertical-align: middle; font-size: 8px; font-weight: 800; line-height: 1; color: #fff; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); padding: 1px 4px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 197, 151, 0.22); } .core-badge.shared { background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%); color: #334155; box-shadow: 0 2px 6px rgba(148, 163, 184, 0.22); } .core-badge.admin { background: linear-gradient(135deg, #6366f1 0%, #a5b4fc 100%); box-shadow: 0 2px 6px rgba(99, 102, 241, 0.22); } /* 核心骨干悬浮详情提示 */ #coreTooltip { position: fixed; z-index: 9999; max-width: 290px; max-height: 70vh; overflow-y: auto; padding: 12px 14px; border-radius: var(--r-md); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.04); backdrop-filter: blur(18px) saturate(150%); color: var(--text); font-size: 12px; line-height: 1.6; pointer-events: auto; } #coreTooltip.pinned { border-color: var(--brand); box-shadow: var(--shadow-lg), 0 0 0 2px rgba(99,102,241,0.45); } #coreTooltip .cp-close { position: absolute; top: 6px; right: 7px; width: 18px; height: 18px; line-height: 16px; text-align: center; border: none; border-radius: 50%; cursor: pointer; background: rgba(0,0,0,0.06); color: var(--text-soft); font-size: 14px; padding: 0; transition: background 0.14s var(--ease); } #coreTooltip .cp-close:hover { background: rgba(0,0,0,0.14); color: var(--text); } #coreTooltip.pinned { padding-right: 30px; } .cp-detail { background: transparent; border: none; padding: 0; margin: 0; } .cp-row { margin: 5px 0; display: flex; gap: 7px; line-height: 1.55; word-break: break-word; } .cp-row > span { flex: 0 0 auto; min-width: 36px; max-width: 80px; color: var(--brand); font-weight: 800; } .cp-row span + * { color: var(--text-soft); flex: 1 1 auto; } /* 会话列表 */ .session-list { display: flex; flex-direction: column; gap: 4px; } .session-item { padding: 7px 9px; border-radius: 9px; font-size: 12px; color: var(--text-soft); cursor: pointer; transition: all 0.16s var(--ease); display: flex; align-items: center; gap: 8px; position: relative; background: var(--panel); border: 1px solid var(--stroke); } .session-item .s-icon { font-size: 10px; opacity: 0.65; flex-shrink: 0; } .session-item .s-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .session-item .s-actions { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity 0.14s var(--ease); } .session-item:hover .s-actions { opacity: 1; } .session-item:hover { background: var(--panel-hover); border-color: var(--stroke); box-shadow: 0 3px 12px rgba(0,0,0,0.16); } .session-item.active { background: var(--glass-strong); color: var(--text); font-weight: 700; border-color: var(--stroke-strong); box-shadow: 0 0 0 1px var(--brand-soft), 0 4px 14px rgba(0, 197, 151, 0.08); } .session-item.pinned { background: rgba(0, 197, 151, 0.06); } .session-item.pinned .s-icon { color: var(--brand); opacity: 1; } .s-btn { width: 20px; height: 20px; border-radius: 5px; border: none; background: transparent; color: var(--text-dim); font-size: 11px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.14s var(--ease); } .s-btn:hover { background: var(--glass-strong); color: var(--text); box-shadow: 0 2px 6px rgba(0,0,0,0.04); } .session-item .s-edit { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--stroke-strong); border-radius: 5px; padding: 2px 6px; color: var(--text); font-size: 11px; outline: none; } .session-item .s-thumb { width: 30px; height: 30px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--panel); border: 1px solid var(--stroke); display: flex; align-items: center; justify-content: center; } .session-item .s-thumb img, .session-item .s-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; } .session-item .s-thumb .s-thumb-placeholder { font-size: 11px; opacity: 0.55; } /* 用户信息 */ .sidebar-footer { padding: 12px 14px; border-top: 1px solid var(--stroke); background: rgba(255,255,255,0.04); backdrop-filter: blur(12px); } .user-card { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 8px; border-radius: var(--r-sm); transition: all 0.16s var(--ease); background: var(--glass); border: 1px solid var(--stroke); } .user-card:hover { background: var(--panel-hover); box-shadow: 0 4px 14px rgba(0,0,0,0.20); } .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-2)); display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 4px 12px var(--brand-glow); } .user-name { font-size: 13px; font-weight: 700; color: var(--text-soft); } .user-status { font-size: 11px; color: var(--text-dim); margin-top: 1px; } /* ============================================================ 右侧会话详情面板 —— LingkeAI celan-panel 风格滑出浮层 桌面：position:fixed 脱离文档流，主聊天区恒满宽； 默认收起(translateX(100%))，点「详情」从右滑入磨砂深底浮层。 ============================================================ */ .detail-panel { position: fixed; right: 0; top: 0; bottom: 0; width: clamp(320px, 26vw, 460px); /* 浮层宽度，随视口缩放 */ background: rgba(22, 24, 30, 0.82); /* 对齐 LingkeAI celan 磨砂深底 */ backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border-left: 1px solid rgba(255,255,255,0.08); box-shadow: -16px 0 48px rgba(0,0,0,0.60); display: flex; flex-direction: column; z-index: 60; transform: translateX(0); /* 展开态：贴右滑入 */ transition: transform 0.30s var(--ease), opacity 0.30s var(--ease); } /* 桌面默认收起：滑出屏外，主聊天区补满（.main flex:1 自动承接） */ .detail-panel.collapsed { transform: translateX(100%); opacity: 0; pointer-events: none; } .detail-header { padding: 16px 16px 12px; border-bottom: 1px solid var(--stroke); background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .detail-head-main { min-width: 0; } .detail-title { font-size: 17px; font-weight: 800; letter-spacing: 0.2px; color: var(--text); } .detail-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; } #detailClose { flex-shrink: 0; font-size: 15px; } .detail-tabs { display: flex; gap: 6px; padding: 14px 18px 0; border-bottom: 1px solid var(--stroke); } .detail-tab { flex: 1; padding: 10px 12px; border-radius: 10px 10px 0 0; background: transparent; border: none; color: var(--text-dim); font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.16s var(--ease); } .detail-tab:hover { color: var(--text-soft); } .detail-tab.active { background: var(--panel); color: var(--text); box-shadow: 0 -4px 14px rgba(0,0,0,0.16); border: 1px solid var(--stroke); border-bottom: none; } .detail-body { flex: 1; overflow-y: auto; padding: 18px; } .detail-pane { display: none; } .detail-pane.active { display: block; } .detail-section { margin-bottom: 18px; } .detail-section-title { font-size: 12px; font-weight: 800; color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 11px; } .detail-member-list { display: flex; flex-direction: column; gap: 8px; } /* 右侧「成员」标签页整体与左侧边栏/成员按钮重复，隐藏以简化面板 */ #tabMembers, #paneMembers { display: none !important; } .detail-member { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--panel); border: 1px solid var(--stroke); cursor: pointer; transition: all 0.18s var(--ease); box-shadow: 0 3px 10px rgba(0,0,0,0.12); } .detail-member:hover { border-color: var(--stroke-strong); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.24); } .detail-member.selected { border-color: var(--brand); background: rgba(0, 229, 168, 0.10); box-shadow: 0 0 18px var(--brand-glow); } .detail-member.active { box-shadow: 0 0 0 1px rgba(0, 214, 143, 0.5), 0 0 14px rgba(0, 214, 143, 0.15); } .dm-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; } .dm-info { min-width: 0; } .dm-name { font-size: 14px; font-weight: 800; color: var(--text-soft); display: flex; align-items: center; gap: 6px; } .dm-role { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .dm-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--online); animation: pulse 1.4s ease-in-out infinite; box-shadow: 0 0 8px var(--online); } .detail-chain { display: flex; flex-direction: column; gap: 10px; } .chain-row { display: flex; align-items: flex-start; gap: 11px; } .chain-label { width: 68px; flex-shrink: 0; font-size: 12px; color: var(--text-dim); padding-top: 5px; font-weight: 700; } .chain-agents { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; } .chain-chip { display: flex; align-items: center; gap: 6px; padding: 6px 11px 6px 7px; border-radius: 22px; background: var(--panel); border: 1px solid var(--stroke); font-size: 13px; color: var(--text-soft); font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.16); } .chain-chip img, .chain-chip svg { width: 19px; height: 19px; border-radius: 50%; } .detail-record-list { display: flex; flex-direction: column; gap: 12px; } .detail-empty { font-size: 14px; color: var(--text-dim); text-align: center; padding: 38px 16px; line-height: 1.6; } .detail-record { background: var(--panel); border: 1px solid var(--stroke); border-radius: var(--r-sm); padding: 12px 14px; box-shadow: 0 3px 12px rgba(0,0,0,0.12); } .dr-time { font-size: 11px; color: var(--text-light); margin-bottom: 7px; font-weight: 600; } .dr-content { font-size: 13px; color: var(--text-soft); line-height: 1.65; } .dr-content p { margin: 5px 0; } /* ============================================================ 主聊天区 ============================================================ */ .main { flex: 1; display: flex; flex-direction: column; background: transparent; position: relative; min-width: 0; /* 允许主区在窄屏收缩，避免撑破 flex 容器 */ transition: margin-left 0.28s var(--ease); } /* 生成面板已改为内嵌停靠（位于聊天输入框下方），不再让主区位移 */ .main-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--stroke); background: rgba(255,255,255,0.05); backdrop-filter: blur(18px) saturate(150%); z-index: 5; } .chat-title { display: flex; align-items: center; gap: 13px; } .chat-avatar { width: 44px; height: 44px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 8px 24px var(--brand-glow); } .chat-name { font-size: 16px; font-weight: 800; color: var(--text); } .chat-status { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--online); box-shadow: 0 0 0 3px rgba(0, 214, 143, 0.18); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%,100%{ box-shadow: 0 0 0 3px rgba(0,214,143,.18);} 50%{ box-shadow: 0 0 0 7px rgba(0,214,143,.06);} } .main-actions { display: flex; align-items: center; gap: 10px; } .icon-btn { width: 38px; height: 38px; border-radius: 12px; cursor: pointer; background: var(--glass-strong); border: 1px solid var(--stroke); color: var(--text-dim); font-size: 15px; display: flex; align-items: center; justify-content: center; transition: all 0.16s var(--ease); box-shadow: 0 3px 10px rgba(0,0,0,0.16); } .icon-btn:hover { color: var(--brand); border-color: var(--brand-2); background: rgba(255,255,255,0.07); box-shadow: 0 0 14px var(--brand-glow); } /* 顶部固定「充值」按钮：参考 LingkeAI 深色胶囊风格，⚡闪电图标 + 白色文字 */ .top-recharge-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; cursor: pointer; flex: 0 0 auto; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .3px; background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%); box-shadow: 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08); transition: filter .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease); } .top-recharge-btn:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.12); } .top-recharge-btn:active { transform: translateY(0); } .top-recharge-btn svg { width: 15px; height: 15px; stroke: #fbbf24; } /* 侧边栏底部的「充值算力」入口（参考第三方站，放在个人中心区域） */ .sidebar-recharge { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; margin-top: 10px; padding: 0 14px; cursor: pointer; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .3px; background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%); box-shadow: 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08); transition: filter .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease); } .sidebar-recharge:hover { filter: brightness(1.12); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.12); } .sidebar-recharge:active { transform: translateY(0); } .sidebar-recharge svg { width: 15px; height: 15px; stroke: #fbbf24; } .sidebar-balance { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 700; color: #fbbf24; background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.22); } .sidebar-balance::before { content: '⚡'; font-size: 11px; line-height: 1; } /* ============================================================ 聊天流 ============================================================ */ .chat-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px 12px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; } .msg { display: flex; gap: 13px; max-width: 88%; align-items: flex-start; animation: msgIn 0.45s var(--ease) both; } @keyframes msgIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .msg.user { align-self: flex-end; flex-direction: row-reverse; } .msg.system { align-self: center; max-width: 92%; } .msg .avatar { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 17px; background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.05)); border: 1px solid var(--stroke-strong); margin-top: 2px; box-shadow: 0 4px 14px rgba(0,0,0,0.24); } .msg.user .avatar { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); border-color: rgba(0, 229, 168, 0.45); color: #fff; box-shadow: 0 6px 20px var(--brand-glow); } .msg .body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .msg .speaker { font-size: 11.5px; font-weight: 700; color: var(--text-dim); padding-left: 3px; } .msg .bubble { background: var(--panel); border: 1px solid var(--stroke); padding: 14px 17px; border-radius: var(--r-md); border-top-left-radius: 6px; font-size: 14px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; color: var(--text-soft); box-shadow: var(--shadow); backdrop-filter: blur(10px); } .msg.user .bubble { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff; border: none; border-radius: var(--r-md); border-top-right-radius: 6px; font-weight: 500; box-shadow: 0 8px 26px var(--brand-glow); } .msg.system .bubble { background: rgba(255,255,255,0.04); border: 1px dashed var(--stroke-strong); color: var(--text-dim); font-size: 11px; text-align: center; padding: 6px 15px; border-radius: 20px; box-shadow: none; backdrop-filter: blur(8px); } .msg.plan .avatar, .msg.manager .avatar { background: linear-gradient(135deg, var(--manager) 0%, var(--manager-2) 100%); border-color: rgba(255, 159, 67, 0.4); box-shadow: 0 6px 18px rgba(255, 159, 67, 0.22); } .msg.plan .speaker, .msg.manager .speaker { color: #d97706; } .msg.plan .bubble, .msg.manager .bubble { background: rgba(255, 243, 230, 0.82); border-color: rgba(255, 191, 105, 0.35); backdrop-filter: blur(8px); color: #1f2937; } .msg.plan .bubble h1, .msg.manager .bubble h1, .msg.plan .bubble h2, .msg.manager .bubble h2, .msg.plan .bubble h3, .msg.manager .bubble h3, .msg.plan .bubble strong, .msg.manager .bubble strong, .msg.plan .bubble code, .msg.manager .bubble code, .msg.plan .bubble pre code, .msg.manager .bubble pre code, .msg.plan .bubble th, .msg.manager .bubble th { color: #1f2937; } .msg.plan .bubble code, .msg.manager .bubble code { background: rgba(0, 197, 151, 0.18); } .msg.plan .bubble pre, .msg.manager .bubble pre { background: rgba(0,0,0,0.10); border-color: rgba(0,0,0,0.12); } .msg.plan .bubble pre code, .msg.manager .bubble pre code { background: transparent; } .msg.plan .bubble th, .msg.manager .bubble th { background: rgba(0, 229, 168, 0.18); } .msg.plan .bubble table, .msg.manager .bubble table { border-color: rgba(0,0,0,0.10); background: rgba(255,255,255,0.35); } .msg.plan .bubble td, .msg.manager .bubble td { border-bottom-color: rgba(0,0,0,0.08); } .msg.plan .bubble tr:hover td, .msg.manager .bubble tr:hover td { background: rgba(0, 229, 168, 0.10); } .msg.plan .bubble blockquote, .msg.manager .bubble blockquote { color: #1f2937; background: rgba(0, 229, 168, 0.12); } .msg.plan .bubble hr, .msg.manager .bubble hr { border-top-color: rgba(0,0,0,0.12); } .msg .badge { display: inline-block; font-size: 9px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--manager) 0%, var(--manager-2) 100%); padding: 1px 7px; border-radius: 6px; margin-left: 5px; vertical-align: middle; box-shadow: 0 2px 8px rgba(255, 159, 67, 0.22); } /* 思考过程（可折叠） */ .reasoning { background: rgba(255,255,255,0.04); border: 1px dashed var(--stroke-strong); border-radius: var(--r-sm); overflow: hidden; font-size: 12.5px; color: var(--text-dim); backdrop-filter: blur(8px); } .reasoning-toggle { padding: 8px 14px; font-size: 11px; font-weight: 700; color: var(--text-dim); cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; transition: all 0.16s var(--ease); } .reasoning-toggle:hover { background: rgba(0, 229, 168, 0.08); color: var(--brand); } .reasoning-toggle span { font-size: 10px; color: var(--text-light); } .reasoning-body { padding: 0 14px; max-height: 0; overflow: hidden; transition: max-height 0.28s var(--ease), padding 0.28s var(--ease); } .reasoning.expanded .reasoning-body { padding: 10px 14px 14px; max-height: 2000px; } /* 表格 / 代码块 */ .bubble table { width: 100%; border-collapse: collapse; margin: 11px 0; font-size: 12.5px; border: 1px solid var(--stroke-strong); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.04); } .bubble th, .bubble td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--stroke-strong); } .bubble th { background: rgba(0, 229, 168, 0.10); color: var(--text); font-weight: 800; } .bubble tr:last-child td { border-bottom: none; } .bubble tr:hover td { background: rgba(0, 229, 168, 0.04); } .bubble code { background: rgba(0, 197, 151, 0.10); padding: 2px 6px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; color: #5eead4; } .bubble pre { background: rgba(255,255,255,0.24); border: 1px solid var(--stroke-strong); padding: 12px; border-radius: 12px; overflow-x: auto; margin: 10px 0; backdrop-filter: blur(6px); } .bubble pre code { background: transparent; padding: 0; color: var(--text-soft); } .bubble h1, .bubble h2, .bubble h3 { color: var(--text); margin: 14px 0 8px; font-weight: 800; } .bubble h1 { font-size: 17px; } .bubble h2 { font-size: 15px; } .bubble h3 { font-size: 13.5px; } .bubble ul, .bubble ol { padding-left: 20px; margin: 8px 0; } .bubble li { margin: 4px 0; } .bubble strong { color: var(--text); } .bubble blockquote { border-left: 3px solid var(--brand); margin: 10px 0; padding: 4px 14px; color: var(--text-dim); background: rgba(0, 229, 168, 0.06); border-radius: 0 10px 10px 0; } .bubble p { margin: 7px 0; line-height: 1.7; } .bubble hr { border: none; border-top: 1px solid var(--stroke-strong); margin: 12px 0; } /* 流式光标 */ .cursor::after { content: '▌'; animation: blink 1.05s steps(2) infinite; color: var(--brand); margin-left: 2px; font-weight: 300; } @keyframes blink { 0%,50%{opacity:1} 50.01%,100%{opacity:0.15} } /* 正在输入 */ .typing { display: flex; gap: 5px; align-items: center; padding: 4px 2px; } .typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-light); animation: bounce 1.3s infinite ease-in-out; } .typing span:nth-child(2) { animation-delay: 0.18s; } .typing span:nth-child(3) { animation-delay: 0.36s; } @keyframes bounce { 0%,60%,100%{ transform: translateY(0); opacity:0.4 } 30%{ transform: translateY(-5px); opacity:1 } } /* ============================================================ 欢迎语（3D 玻璃面板） ============================================================ */ .welcome { align-self: center; text-align: center; max-width: 92%; margin: 6px 0 4px; animation: msgIn 0.55s var(--ease) both; } .welcome .w-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-lg); padding: 28px 30px; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.18); backdrop-filter: blur(22px) saturate(160%); position: relative; overflow: hidden; } /* 装饰性霓虹光球 */ .welcome .w-card::before { content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 229, 168, 0.35) 0%, transparent 70%); filter: blur(16px); pointer-events: none; } .welcome .w-card::after { content: ''; position: absolute; bottom: -30px; left: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 70%); filter: blur(14px); pointer-events: none; } .welcome .w-emoji { font-size: 40px; position: relative; z-index: 1; } .welcome .w-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; position: relative; z-index: 1; box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .welcome .w-title { font-size: 19px; font-weight: 900; margin-top: 12px; color: var(--text); position: relative; z-index: 1; } .welcome .w-desc { font-size: 13px; color: var(--text-dim); margin-top: 11px; line-height: 1.75; position: relative; z-index: 1; } .welcome .w-desc b { color: var(--text-soft); font-weight: 800; } .welcome .w-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; position: relative; z-index: 1; } .welcome .w-tag { font-size: 11px; padding: 5px 12px; border-radius: 22px; background: rgba(0, 229, 168, 0.12); color: #5eead4; font-weight: 700; border: 1px solid rgba(0, 229, 168, 0.22); box-shadow: 0 2px 8px rgba(0, 197, 151, 0.08); } /* 快捷开始：让登录后首屏更饱满、可立即行动 */ .welcome .w-quick { margin-top: 20px; } .welcome .w-quick-label { font-size: 12px; font-weight: 700; color: var(--text-dim); letter-spacing: .06em; margin-bottom: 10px; } .welcome .w-quick-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; } .welcome .w-chip { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 9px 16px; border-radius: 999px; color: #cfe9e4; background: rgba(255,255,255,0.04); border: 1px solid rgba(0,229,224,0.28); transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease), color .16s var(--ease); } .welcome .w-chip:hover { background: rgba(0,229,224,0.12); border-color: rgba(0,229,224,0.55); color: #eafff9; transform: translateY(-1px); } .welcome .w-chip:active { transform: translateY(0) scale(0.98); } /* ============================================================ 媒体产出卡片 ============================================================ */ .media-holder { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; } .media-card { border: 1px solid rgba(0, 197, 151, 0.25); border-radius: var(--r-md); overflow: hidden; background: rgba(255,255,255,0.05); max-width: min(200px, 100%); box-shadow: 0 6px 20px rgba(0, 197, 151, 0.08); backdrop-filter: blur(8px); cursor: pointer; transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease); } .media-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 197, 151, 0.16); } .media-card img { display: block; width: 100%; height: auto; } /* 内联媒体：会话重载/历史回放时，从交付文本中提取的裸媒体 URL 渲染为实际媒体 */ .media-inline { border-radius: var(--r-md); overflow: hidden; max-width: min(180px, 100%); background: rgba(255,255,255,0.05); border: 1px solid rgba(0,197,151,0.18); box-shadow: 0 6px 20px rgba(0,197,151,0.08); } .media-inline-img { display: block; width: 100%; height: auto; max-height: 180px; object-fit: cover; } .media-inline-video, .media-inline-audio { display: block; width: 100%; margin-top: 0; } .media-audio { display: block; width: 100%; margin-top: 8px; } .media-video { display: block; padding: 13px 16px; color: #5eead4; font-weight: 800; text-decoration: none; background: rgba(0, 229, 168, 0.10); transition: background 0.16s var(--ease); } .media-video:hover { background: rgba(0, 229, 168, 0.18); } /* 内联视频播放器卡片（视频输出展示优化：聊天内直接播放，首帧作缩略图） */ .media-card-video { max-width: 280px; } .media-video-inline { display: block; width: 100%; aspect-ratio: 9/16; object-fit: cover; background: #0a0d13; border-radius: 0; outline: none; } .media-video-inline[src$=".mov"], .media-video-inline[src$=".webm"] { aspect-ratio: auto; max-height: 360px; } .media-dl { float: right; margin-left: 8px; color: var(--text-dim); font-weight: 800; text-decoration: none; padding: 0 4px; border-radius: 6px; line-height: 1.2; } .media-dl:hover { color: #5eead4; background: rgba(0,229,168,0.12); } .media-cap { padding: 8px 12px; font-size: 11.5px; color: var(--text-dim); line-height: 1.45; font-weight: 600; } .media-downgrade { padding: 6px 12px; font-size: 11px; font-weight: 700; color: #b45309; background: rgba(245, 158, 11, 0.10); border-top: 1px solid rgba(245, 158, 11, 0.18); } .media-fail { margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-size: 12px; color: #b91c1c; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.18); } /* 生成进度占位卡片（参考豆包风格） */ .gen-progress-card { max-width: 260px; border-radius: var(--r-md); overflow: hidden; background: rgba(255,255,255,0.05); border: 1px solid rgba(0,197,151,0.18); box-shadow: 0 6px 20px rgba(0,197,151,0.08); margin-top: 10px; } .gen-progress-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; color: var(--text-soft); font-weight: 600; } .gen-progress-head .spin { width: 14px; height: 14px; border: 2px solid rgba(0,197,151,0.2); border-top-color: var(--brand); border-radius: 50%; animation: gen-spin 0.8s linear infinite; } @keyframes gen-spin { to { transform: rotate(360deg); } } .gen-progress-placeholder { position: relative; width: 100%; aspect-ratio: 1 / 1; background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(14,165,233,0.22), rgba(236,72,153,0.22)); background-size: 200% 200%; animation: gen-shimmer 2.2s ease infinite; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; } @keyframes gen-shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .gen-progress-placeholder svg { width: 32px; height: 32px; color: rgba(255,255,255,0.9); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); } .gen-progress-text { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.07); text-shadow: 0 1px 3px rgba(0,0,0,0.15); } .gen-progress-detail { padding: 8px 12px; font-size: 11px; color: var(--text-dim); line-height: 1.5; border-top: 1px solid rgba(0,197,151,0.1); } .gen-progress-detail b { color: var(--text); font-weight: 700; } /* 右侧产物预览 */ .detail-empty { padding: 24px 14px; text-align: center; color: var(--text-dim); font-size: 12px; line-height: 1.6; } .artifact-media { display: block; max-width: 100%; width: auto; height: auto; max-height: 46vh; object-fit: contain; margin: 0 auto; border-radius: var(--r-md); background: rgba(0, 0, 0, 0.03); border: 1px solid var(--stroke); } .artifact-meta { margin-top: 12px; padding: 10px 12px; font-size: 12px; color: var(--text-soft); line-height: 1.6; background: var(--panel); border-radius: 12px; border: 1px solid var(--stroke); } /* ============================================================ 调试信息卡 ============================================================ */ .dbg-card { align-self: center; max-width: 92%; width: 440px; margin: 5px auto; background: var(--panel); border: 1px solid var(--stroke); border-radius: 14px; font-size: 12px; overflow: hidden; box-shadow: var(--shadow); backdrop-filter: blur(10px); } .dbg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; cursor: pointer; color: var(--text-dim); user-select: none; } .dbg-head:hover { color: var(--text); } .dbg-sum { font-size: 11px; color: var(--brand); font-weight: 700; } .dbg-toggle { transition: transform 0.2s var(--ease); } .dbg-card.open .dbg-toggle { transform: rotate(180deg); } .dbg-body { max-height: 0; overflow: hidden; transition: max-height 0.25s var(--ease); padding: 0 14px; } .dbg-card.open .dbg-body { max-height: 420px; padding: 5px 14px 12px; } .dbg-row { display: grid; grid-template-columns: 1fr 56px 70px; gap: 7px; padding: 3px 0; color: var(--text-soft); } .dbg-row span:last-child, .dbg-row span:nth-child(2) { text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; } .dbg-h { color: var(--text-dim); border-bottom: 1px solid var(--stroke); margin-bottom: 2px; font-weight: 700; } .dbg-foot { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--stroke); color: var(--text-dim); font-size: 11px; } /* ============================================================ 输入区 ============================================================ */ .chat-composer { border-top: 1px solid var(--stroke); background: rgba(255,255,255,0.05); backdrop-filter: blur(18px) saturate(150%); padding: 12px 22px 14px; /* 主区由 flex 自动撑满（详情栏在流内时已挤占宽度，折叠时自动补回），无需 magic-number 计算，避免 1100~1200px 与移动端的留白 */ max-width: 100%; } .chat-composer.wide { max-width: 100%; } .composer-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .wb-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .wb-toggle input { display: none; } .toggle-track { width: 34px; height: 18px; border-radius: 20px; background: var(--glass-strong); border: 1px solid var(--stroke-strong); position: relative; transition: all 0.2s var(--ease); } .toggle-track::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-light); transition: all 0.2s var(--ease); } .wb-toggle input:checked + .toggle-track { background: rgba(0, 229, 168, 0.22); border-color: rgba(0, 229, 168, 0.45); } .wb-toggle input:checked + .toggle-track::after { left: 18px; background: var(--online); box-shadow: 0 0 8px var(--online); } .toggle-label { font-size: 11px; color: var(--text-soft); font-weight: 600; } .composer-row { display: flex; gap: 10px; align-items: flex-end; } #input { flex: 1; resize: none; background: rgba(255,255,255,0.06); border: 1px solid var(--stroke-strong); border-radius: 14px; color: var(--text); padding: 10px 14px; font-size: 14px; font-family: inherit; min-height: 42px; max-height: 160px; line-height: 1.5; transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease); backdrop-filter: blur(8px); box-shadow: inset 0 2px 6px rgba(0,0,0,0.12); } #input::placeholder { color: var(--text-light); } #input:focus { outline: none; border-color: var(--brand-2); background: rgba(255,255,255,0.05); box-shadow: 0 0 0 3px var(--brand-soft), inset 0 2px 6px rgba(0,0,0,0.08); } .send-btn { width: 46px; height: 46px; border-radius: var(--r-md); border: none; flex-shrink: 0; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.35); transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease), filter 0.14s var(--ease); } .send-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 32px var(--brand-glow); } .send-btn:active { transform: translateY(0) scale(0.96); } .send-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(0.3); } /* 运行中：发送按钮切换为「中止」方块 */ .send-btn .ico-stop { display: none; } .send-btn.running .ico-send { display: none; } .send-btn.running .ico-stop { display: block; } .send-btn.running { background: linear-gradient(135deg, #ff6b70 0%, #e0484f 100%); box-shadow: 0 8px 24px rgba(255,107,112,0.28), inset 0 1px 0 rgba(255,255,255,0.3); } /* 立即发送：中断当前并发送新消息 */ .send-now-btn { flex-shrink: 0; height: 46px; padding: 0 14px; border-radius: var(--r-md); cursor: pointer; border: 1px solid rgba(255,107,112,0.45); background: rgba(255,107,112,0.14); color: #ff8a8e; font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: background 0.14s var(--ease), transform 0.14s var(--ease), border-color 0.14s var(--ease); } .send-now-btn:hover { background: rgba(255,107,112,0.24); border-color: rgba(255,107,112,0.7); transform: translateY(-2px); } .send-now-btn:active { transform: translateY(0) scale(0.97); } /* 排队提示条 */ .queue-hint { position: absolute; top: -30px; left: 0; right: 0; display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: #ffb84d; background: rgba(255,184,77,0.10); border: 1px solid rgba(255,184,77,0.25); border-radius: 10px; padding: 5px 12px; backdrop-filter: blur(8px); } .queue-hint .qh-spinner { width: 9px; height: 9px; border-radius: 2px; background: #ffb84d; animation: qhPulse 1.1s ease-in-out infinite; } @keyframes qhPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } } .composer-row { position: relative; } /* ============================================================ 成员抽屉 ============================================================ */ .drawer-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.60); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.28s var(--ease); z-index: 20; } .drawer-mask.open { opacity: 1; pointer-events: auto; } .members-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 88vw; background: rgba(255,255,255,0.05); backdrop-filter: blur(34px) saturate(170%); border-left: 1px solid var(--stroke); box-shadow: -18px 0 60px rgba(0,0,0,0.48); transform: translateX(100%); transition: transform 0.32s var(--ease); z-index: 21; display: flex; flex-direction: column; } .members-drawer.open { transform: translateX(0); } .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 17px; font-weight: 800; font-size: 17px; border-bottom: 1px solid var(--stroke); color: var(--text); } .drawer-body { flex: 1; overflow-y: auto; padding: 18px; } .m-group-title { font-size: 12px; color: var(--text-dim); font-weight: 800; letter-spacing: 1px; margin: 14px 5px 10px; } .m-group-title:first-child { margin-top: 0; } .m-item { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 14px; cursor: pointer; transition: all 0.18s var(--ease); border: 1.5px solid transparent; background: transparent; } .m-item:hover { background: var(--panel-hover); box-shadow: 0 4px 14px rgba(0,0,0,0.20); } .m-item.sel { background: rgba(0, 229, 168, 0.12); border-color: rgba(0, 229, 168, 0.45); box-shadow: 0 0 16px var(--brand-glow); } .m-item .m-emoji { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 22px; background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.05)); border: 1px solid var(--stroke-strong); box-shadow: 0 3px 10px rgba(0,0,0,0.20); } .m-item.sel .m-emoji { border-color: var(--brand-2); box-shadow: 0 4px 16px var(--brand-glow); } .m-item .m-name { font-size: 15px; font-weight: 800; color: var(--text); } .m-item .m-role { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .m-item .m-check { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--stroke-strong); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; transition: all 0.16s var(--ease); } .m-item.sel .m-check { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); border-color: transparent; box-shadow: 0 3px 10px var(--brand-glow); } .drawer-foot { padding: 18px 22px; border-top: 1px solid var(--stroke); display: flex; flex-direction: column; gap: 12px; } .drawer-foot .hint { font-size: 12px; color: var(--text-dim); line-height: 1.5; } .primary-btn { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); color: #fff; border: none; padding: 14px; border-radius: var(--r-md); cursor: pointer; font-weight: 800; font-size: 14px; letter-spacing: 0.5px; box-shadow: 0 8px 24px var(--brand-glow); transition: transform 0.14s var(--ease), filter 0.14s var(--ease); } .primary-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 32px var(--brand-glow); } .primary-btn:active { transform: translateY(0) scale(0.98); } /* 滚动条 */ .chat-body::-webkit-scrollbar, .drawer-body::-webkit-scrollbar, .sidebar-body::-webkit-scrollbar, .detail-body::-webkit-scrollbar { width: 7px; } .chat-body::-webkit-scrollbar-thumb, .drawer-body::-webkit-scrollbar-thumb, .sidebar-body::-webkit-scrollbar-thumb, .detail-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 10px; } .chat-body::-webkit-scrollbar-thumb:hover, .drawer-body::-webkit-scrollbar-thumb:hover, .sidebar-body::-webkit-scrollbar-thumb:hover, .detail-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); } /* ============================================================ 响应式（电脑 / 手机分明布局） ============================================================ */ /* 手机端汉堡菜单按钮：电脑隐藏 */ .menu-btn { display: none; } /* 手机端侧边栏遮罩：电脑隐藏 */ .sidebar-overlay { display: none; } /* ---- 平板：右侧详情面板悬浮层 ---- */ @media (max-width: 1200px) { .detail-panel { position: fixed; right: 0; top: 0; bottom: 0; transform: translateX(100%); transition: transform 0.28s var(--ease); z-index: 60; box-shadow: -16px 0 48px rgba(0,0,0,0.60); } .detail-panel.open { transform: translateX(0); } /* 生成面板在窄屏改为浮层覆盖（主区不位移），与详情面板一致，避免挤压主聊天区 */ body.gen-open .main { margin-left: 0 !important; } .gen-panel { width: 100%; } .composer-shortcuts, .composer-shortcuts.wide { max-width: calc(100vw - 44px); } } /* ===== 输入框底部工具栏（模型 / 上下文 / 附件） ===== */ .composer-toolbar { display: flex; align-items: center; gap: 12px; min-width: 0; } .composer-tools { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 1; flex-wrap: wrap; } .model-select { display: flex; align-items: center; gap: 5px; padding: 5px 8px; background: rgba(255,255,255,0.05); border: 1px solid var(--stroke-strong); border-radius: 10px; color: var(--text-soft); font-size: 11.5px; font-weight: 600; flex-shrink: 0; } .model-select .ms-icon { color: var(--brand); flex-shrink: 0; } .model-select select { border: none; background: transparent; color: var(--text); font: inherit; font-weight: 600; outline: none; cursor: pointer; padding-right: 2px; } .model-select select option { color: #1f2937; } .model-custom { padding: 5px 10px; border-radius: 10px; border: 1px solid var(--stroke-strong); background: rgba(255,255,255,0.05); color: var(--text); font: inherit; font-size: 11.5px; font-weight: 600; width: 210px; max-width: 52vw; outline: none; flex-shrink: 0; } .model-custom::placeholder { color: var(--text-light); font-weight: 500; } .model-custom:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .ctx-usage { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); min-width: 0; flex-shrink: 1; } .ctx-bar { width: 64px; height: 5px; border-radius: 4px; background: var(--glass-strong); overflow: hidden; border: 1px solid var(--stroke); flex-shrink: 0; } .ctx-bar span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width 0.3s var(--ease), background 0.3s; } .ctx-bar span.warn { background: linear-gradient(90deg, #f5a623, #f7c948); } .ctx-bar span.danger { background: linear-gradient(90deg, #ff5a5f, #ff8a3d); } .ctx-text { white-space: nowrap; } .tool-btn { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--stroke-strong); background: rgba(255,255,255,0.05); color: var(--text-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.16s var(--ease); } .tool-btn:hover { color: var(--brand); border-color: var(--brand-2); background: rgba(255,255,255,0.05); box-shadow: 0 0 12px var(--brand-soft); transform: translateY(-1px); } .tool-btn:active { transform: translateY(0) scale(0.94); } /* ===== Doubao 风格快捷能力工具栏 ===== */ .composer-shortcuts { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--stroke); /* 主区由 flex 自动撑满，避免 magic-number 计算导致的留白 */ max-width: 100%; } /* 未进入生成面板时，功能栏只占用胶囊内容宽度，不要拉得过长 */ .composer-shortcuts:not(.gen-active) { width: fit-content; } .composer-shortcuts.gen-active { width: 100%; } .composer-shortcuts.wide { max-width: 100%; } .shortcuts-attach-col { display: flex; flex-direction: row; gap: 7px; flex-shrink: 0; align-items: center; } .shortcuts-attach { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--stroke-strong); background: rgba(255,255,255,0.05); color: var(--text-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.16s var(--ease); } .shortcuts-attach:hover { color: var(--brand); border-color: var(--brand-2); background: rgba(255,255,255,0.05); box-shadow: 0 0 12px var(--brand-soft); transform: scale(1.05); } .shortcuts-attach:active { transform: scale(0.95); } .shortcuts-pills { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; overflow: visible; padding-bottom: 2px; max-width: 100%; min-width: 0; } .shortcuts-pills::-webkit-scrollbar { display: none; } .shortcut-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; background: rgba(255,255,255,0.05); border: 1px solid var(--stroke-strong); color: var(--text-soft); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.16s var(--ease); } .shortcut-pill svg { width: 14px; height: 14px; flex-shrink: 0; } .shortcut-pill svg { color: var(--brand); flex-shrink: 0; } .shortcut-pill:hover { background: rgba(255,255,255,0.05); border-color: var(--brand-2); color: var(--text); box-shadow: 0 0 14px var(--brand-soft); transform: translateY(-1px); } .shortcut-pill:active { transform: translateY(0) scale(0.96); } /* 功能快捷栏：分类 Tab + 分组胶囊 */ .sc-tabs { display: inline-flex; align-items: center; gap: 4px; padding: 2px; margin-bottom: 7px; background: rgba(255,255,255,0.05); border: 1px solid var(--stroke-strong); border-radius: 999px; flex-wrap: wrap; } .sc-tab { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; white-space: nowrap; cursor: pointer; background: transparent; border: none; color: var(--text-soft); font-size: 13px; font-weight: 600; transition: all 0.16s var(--ease); } .sc-tab svg { width: 14px; height: 14px; flex-shrink: 0; } .sc-tab:hover { color: var(--text); background: rgba(255,255,255,0.05); } .sc-tab.active { background: var(--brand); color: #fff; box-shadow: 0 1px 8px var(--brand-soft); } .sc-group { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; row-gap: 8px; width: 100%; } /* 功能依赖徽标：本地 / 第三方(LingkeAI) / 本地+第三方 / 需API */ .dep-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; line-height: 1.4; flex-shrink: 0; letter-spacing: .2px; } .dep-local { background: rgba(16,185,129,.15); color: #0f9d6b; border: 1px solid rgba(16,185,129,.32); } .dep-3p { background: rgba(99,102,241,.14); color: #6366f1; border: 1px solid rgba(99,102,241,.3); } .dep-mixed { background: rgba(14,165,233,.14); color: #0ea5e9; border: 1px solid rgba(14,165,233,.3); } .dep-needapi { background: rgba(245,158,11,.16); color: #d97706; border: 1px solid rgba(245,158,11,.34); } .composer-tip { margin-top: 10px; font-size: 11.5px; color: var(--text-light); line-height: 1.5; clear: both; } /* 模式化快捷栏：Tab 即「媒体模式」，只保留复杂功能的面板入口 */ .shortcut-pill--complex { border-color: var(--brand-2); } .shortcut-pill--complex:hover { box-shadow: 0 0 14px var(--brand-soft); } .sc-group-hint { font-size: 11.5px; color: var(--text-light); padding: 4px 2px; line-height: 1.5; } /* 附件列表 */ .attach-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 9px; } .attach-list:empty { margin: 0; } .attach-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 20px; background: rgba(0,229,168,0.1); border: 1px solid rgba(0,229,168,0.3); color: var(--text-soft); font-size: 11.5px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attach-x { border: none; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; } .attach-x:hover { color: #ff5a5f; } /* ===== 右上角图标悬停提示 ===== */ .icon-btn { position: relative; } .icon-btn[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); background: rgba(17,22,34,0.95); color: #fff; font-size: 11px; font-weight: 500; padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: all 0.16s var(--ease); z-index: 100; box-shadow: 0 6px 18px rgba(0,0,0,0.25); max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .icon-btn[data-tip]::before { content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(4px); border: 6px solid transparent; border-top-color: rgba(17,22,34,0.95); opacity: 0; transition: all 0.16s var(--ease); pointer-events: none; z-index: 100; } .icon-btn[data-tip]:hover::after, .icon-btn[data-tip]:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); } /* ===== 产物预览卡片（WorkBuddy 风格） ===== */ .artifact-card { background: rgba(255,255,255,0.06); border: 1px solid var(--stroke); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.32); } .artifact-media { display: block; max-width: 100%; width: auto; height: auto; max-height: 48vh; object-fit: contain; margin: 0 auto; background: #0e1117; } .artifact-actions { display: flex; gap: 8px; padding: 9px 11px; border-top: 1px solid var(--stroke); background: rgba(255,255,255,0.05); } .artifact-action { font-size: 12px; font-weight: 600; color: var(--brand); text-decoration: none; padding: 4px 10px; border-radius: 8px; background: rgba(0,229,168,0.1); border: 1px solid rgba(0,229,168,0.25); transition: all 0.16s var(--ease); } .artifact-action:hover { background: rgba(0,229,168,0.2); } .artifact-meta { padding: 11px 13px; display: flex; flex-direction: column; gap: 9px; } .artifact-pill { align-self: flex-start; font-size: 11px; font-weight: 600; color: var(--brand); background: rgba(0,229,168,0.12); border: 1px solid rgba(0,229,168,0.3); padding: 3px 9px; border-radius: 20px; } .artifact-prompt { font-size: 12.5px; color: var(--text-soft); line-height: 1.6; } .artifact-prompt-label { display: inline-block; font-weight: 700; color: var(--text-dim); margin-right: 6px; font-size: 11px; } /* ===== 媒体生成配置面板（内嵌停靠） ===== */ .gen-panel { display: none; flex-direction: column; background: rgba(11,15,20,0.98); border-top: 1px solid var(--stroke-strong); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,0.35); max-height: 44vh; } .gen-panel.open { display: flex; animation: genPanelIn .34s var(--ease) both; } @keyframes genPanelIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .gen-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--stroke); background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); flex-shrink: 0; } .gen-back { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--stroke-strong); background: rgba(255,255,255,0.06); color: var(--text-soft); cursor: pointer; transition: all 0.16s var(--ease); flex-shrink: 0; } .gen-back svg { width: 15px; height: 15px; flex-shrink: 0; } .gen-back-label { display: none; } .gen-back:hover { color: var(--brand); border-color: var(--brand-2); background: rgba(255,255,255,0.09); box-shadow: 0 0 12px var(--brand-soft); } .gen-title { flex: 1; font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; } .gen-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px var(--brand-2); } .gen-badge { font-size: 10px; font-weight: 600; color: var(--brand); background: rgba(0,229,168,0.12); border: 1px solid rgba(0,229,168,0.3); padding: 3px 9px; border-radius: 20px; flex-shrink: 0; } .gen-badge:empty { display: none; } .gen-fields { flex: 1; overflow-y: auto; padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-content: start; } .gen-fields > .gen-field { min-width: 0; } .gen-fields > .gen-hint-box, .gen-fields > .gen-prompt-field, .gen-fields > .gen-file-row, .gen-fields > .gen-role-lib, .gen-fields > .gen-role-upload, .gen-fields > .gen-toggle-row, .gen-fields > .gen-orch, .gen-fields > .gen-lens-title, .gen-fields > .gen-lens-grid, .gen-fields > #genMusicTransfer, .gen-fields > #genMusicCreate, .gen-fields > #genFaceLib, .gen-fields > #genFaceUpload, .gen-fields > #genTtsArea, .gen-fields > #genTryonImgRow, .gen-fields > #genTryonVidRow, .gen-fields > #genTryonVidOpts, .gen-fields > #genChangebgImgRow, .gen-fields > #genChangebgVidRow, .gen-fields > #genChangebgVidOpts, .gen-fields > #genStyleImgRow, .gen-fields > #genStyleVidRow, .gen-fields > #genRestoreSrcRow, .gen-fields > #genRestoreImgRow, .gen-fields > #genToolSrcRow, .gen-fields > #genInpaintDirRow, .gen-fields > #genLipsyncTtsRow, .gen-fields > #genWmImgRow, .gen-fields > #genWmVidRow, .gen-fields > #genDjManual, .gen-fields > #genLensBox, .gen-fields > #genVocalOpts, .gen-fields > .gen-char-filters, .gen-fields > .gen-char-grid, .gen-fields > .gen-char-add, .gen-fields > .gen-model-field, .gen-fields > .gen-char-group-title { grid-column: 1 / -1; } .gen-field { display: flex; flex-direction: column; gap: 6px; } .gen-field > label:not(.gen-check-label) { font-size: 11.5px; font-weight: 600; color: var(--text-soft); letter-spacing: 0.02em; } .gen-select-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; } .gen-select-wrap .gen-select { flex: 1; min-width: 0; } .model-tag { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; white-space: nowrap; opacity: 0; transition: opacity 0.16s var(--ease); } .model-tag[data-tag]:not([data-tag=""]) { opacity: 1; } .model-tag.hot { color: #fff; background: linear-gradient(135deg, #ff6b6b, #ff8e53); box-shadow: 0 2px 8px rgba(255,107,107,0.25); } .model-tag.rec { color: #fff; background: linear-gradient(135deg, #00c6a7, #00e5a8); box-shadow: 0 2px 8px rgba(0,229,168,0.25); } .gen-select option { color: #1f2937; } .gen-select, #genPrompt { width: 100%; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--stroke-strong); background: rgba(255,255,255,0.07); color: var(--text); font: inherit; font-size: 13px; outline: none; transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease); } .gen-select:focus, #genPrompt:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .gen-select option { color: #1f2937; } #genPrompt { resize: vertical; min-height: 56px; line-height: 1.5; } .gen-prompt-field { grid-column: 1 / -1; } .gen-prompt-field label { font-size: 11.5px; font-weight: 600; color: var(--text-soft); margin-bottom: 6px; display: block; } .gen-toggle-row { flex-direction: row; align-items: center; gap: 8px; grid-column: 1 / -1; } .gen-toggle-row > label { margin-right: 2px; } .gen-seg { display: inline-flex; border: 1px solid var(--stroke-strong); border-radius: 999px; overflow: hidden; padding: 2px; background: rgba(255,255,255,0.04); } .gen-seg-btn { border: none; background: transparent; color: var(--text-soft); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px; cursor: pointer; transition: all 0.16s var(--ease); border-radius: 999px; } .gen-seg-btn.active { background: var(--brand); color: #04201a; } .gen-adv { grid-column: 1 / -1; } .gen-adv-box { grid-column: 1 / -1; border: 1px dashed var(--stroke-strong); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.35); } .gen-adv-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: rgba(255,255,255,0.04); border: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--text); } .gen-adv-toggle::after { content: '▾'; font-size: 10px; opacity: .6; transition: transform .2s; } .gen-adv-box:not(.open) .gen-adv-toggle::after { transform: rotate(-90deg); } .gen-adv-body { display: none; padding: 10px 12px; gap: 10px; } .gen-adv-box.open .gen-adv-body { display: grid; } .gen-check { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-soft); font-weight: 500; cursor: pointer; } /* 信息提示卡片 */ .gen-hint-box { grid-column: 1 / -1; padding: 10px 12px; border-radius: 10px; background: rgba(0,229,224,0.06); border: 1px solid rgba(0,229,224,0.15); color: var(--text-soft); font-size: 12px; line-height: 1.55; } .gen-hint-box strong { color: var(--brand); font-weight: 600; } /* 本地免费能力的强调提示（绿色系，区别于第三方付费的青色） */ .gen-hint-box.gen-hint-local { display: flex; align-items: flex-start; gap: 6px; background: rgba(0,229,168,0.07); border-color: rgba(0,229,168,0.22); color: #7ff0c8; } .gen-hint-box.gen-hint-local .svg-ic { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; } /* 模型价格标签 */ .gen-price-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--brand); background: rgba(0,229,168,0.1); border: 1px solid rgba(0,229,168,0.25); padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; } .gen-price-tag.free { color: #5eead4; background: rgba(0,229,168,0.12); border-color: rgba(0,229,168,0.3); } /* ============ 模型卡片网格（替代下拉陈列，对齐第三方站质感） ============ */ /* 隐藏的