Spaces:
Running
Running
| /* 对话工作台：会话列表 + 消息流 + 输入区（Warm Paper，全令牌配色） */ | |
| .workbench { | |
| flex: 1; | |
| min-width: 0; | |
| min-height: 0; /* flex 子项默认 min-height:auto 会拒绝收缩——必须显式置 0，否则消息一长整页跟着滚 */ | |
| display: flex; | |
| } | |
| /* ---------- 会话列表 ---------- */ | |
| .conversations { | |
| width: 264px; | |
| flex-shrink: 0; | |
| min-height: 0; | |
| display: flex; | |
| flex-direction: column; | |
| border-right: 1px solid var(--border); | |
| background: var(--bg); | |
| } | |
| .conv-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 26px 16px 14px; | |
| } | |
| .conv-head h2 { | |
| font-size: 17px; | |
| } | |
| .conv-new { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| height: 30px; | |
| padding: 0 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease); | |
| } | |
| .conv-new:hover { | |
| background: var(--bg-elevated); | |
| } | |
| .conv-scroll { | |
| flex: 1; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| padding: 4px 12px 16px; | |
| } | |
| .conv-empty { | |
| padding: 20px 12px; | |
| color: var(--text-tertiary); | |
| font-size: 13px; | |
| line-height: 1.7; | |
| } | |
| .conv-empty p { | |
| margin: 0 0 4px; | |
| } | |
| .conv-empty-title { | |
| color: var(--text-secondary); | |
| font-size: 13.5px; | |
| font-weight: 500; | |
| } | |
| .conv-item { | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 2px; | |
| border-radius: var(--radius-control); | |
| transition: background-color var(--dur) var(--ease); | |
| } | |
| .conv-item:hover { | |
| background: var(--bg-elevated); | |
| } | |
| .conv-item.is-active { | |
| background: var(--accent-soft); | |
| } | |
| .conv-open { | |
| flex: 1; | |
| min-width: 0; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1px; | |
| padding: 10px 12px; | |
| border: none; | |
| background: transparent; | |
| color: var(--text); | |
| font-family: inherit; | |
| text-align: left; | |
| cursor: pointer; | |
| border-radius: var(--radius-control); | |
| } | |
| .conv-title { | |
| display: block; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| font-size: 13.5px; | |
| font-weight: 500; | |
| } | |
| .conv-meta { | |
| display: block; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| font-size: 11.5px; | |
| color: var(--text-tertiary); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .conv-actions { | |
| display: none; | |
| gap: 2px; | |
| padding-right: 6px; | |
| } | |
| .conv-item:hover .conv-actions, | |
| .conv-item:focus-within .conv-actions { | |
| display: inline-flex; | |
| } | |
| .conv-rename { | |
| flex: 1; | |
| min-width: 0; | |
| margin: 6px 8px; | |
| padding: 7px 10px; | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-control); | |
| background: var(--bg-sunken); | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 13px; | |
| } | |
| .conv-rename:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 65%, transparent); | |
| } | |
| .conv-confirm { | |
| flex-basis: 100%; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 12px 10px; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .conv-confirm span { | |
| flex: 1; | |
| } | |
| .conv-confirm-yes, | |
| .conv-confirm-no { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| height: 26px; | |
| padding: 0 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| font-family: inherit; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease); | |
| } | |
| .conv-confirm-yes { | |
| color: var(--danger); | |
| } | |
| .conv-confirm-yes:hover { | |
| background: var(--accent-soft); | |
| } | |
| .conv-confirm-no { | |
| color: var(--text-secondary); | |
| } | |
| .conv-confirm-no:hover { | |
| background: var(--bg-elevated); | |
| } | |
| .conv-error { | |
| margin: 0; | |
| padding: 10px 16px 14px; | |
| color: var(--danger); | |
| font-size: 12px; | |
| line-height: 1.6; | |
| } | |
| /* ---------- 消息区 ---------- */ | |
| .chat-main { | |
| flex: 1; | |
| min-width: 0; | |
| min-height: 0; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .stream { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .stream-inner { | |
| flex-shrink: 0; | |
| max-width: 760px; | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: 48px 48px 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 32px; | |
| } | |
| .msg { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .msg-role { | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .msg-card { | |
| padding: 12px 16px; | |
| border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); | |
| border-radius: var(--radius-card); | |
| background: var(--accent-soft); | |
| font-size: 15px; | |
| line-height: 1.75; | |
| white-space: pre-wrap; | |
| overflow-wrap: break-word; | |
| user-select: text; | |
| } | |
| .msg-body { | |
| font-size: 15px; | |
| user-select: text; | |
| } | |
| .msg-error { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| margin: 0; | |
| color: var(--danger); | |
| font-size: 13px; | |
| } | |
| .msg-note { | |
| margin: 0; | |
| color: var(--text-tertiary); | |
| font-size: 12.5px; | |
| } | |
| .msg-reasoning summary { | |
| cursor: pointer; | |
| color: var(--text-tertiary); | |
| font-size: 12.5px; | |
| } | |
| .msg-reasoning-body { | |
| margin-top: 8px; | |
| padding: 12px 14px; | |
| border-radius: var(--radius-control); | |
| background: var(--bg-elevated); | |
| color: var(--text-secondary); | |
| font-size: 13px; | |
| line-height: 1.7; | |
| white-space: pre-wrap; | |
| user-select: text; | |
| } | |
| /* 流式呼吸光标（1s 透明度呼吸；reduced-motion 时 theme.css 全局降级为静止） */ | |
| @keyframes cursor-breathe { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.15; | |
| } | |
| } | |
| .stream-cursor { | |
| display: inline-block; | |
| width: 2px; | |
| height: 1.05em; | |
| margin-left: 4px; | |
| border-radius: 1px; | |
| background: var(--accent); | |
| vertical-align: text-bottom; | |
| animation: cursor-breathe 1s ease-in-out infinite; | |
| } | |
| /* 有内容时，光标贴在最后一个 Markdown 块的文本尾部 */ | |
| .msg-body.is-streaming .md > :last-child::after { | |
| content: ""; | |
| display: inline-block; | |
| width: 2px; | |
| height: 1em; | |
| margin-left: 3px; | |
| border-radius: 1px; | |
| background: var(--accent); | |
| vertical-align: -0.12em; | |
| animation: cursor-breathe 1s ease-in-out infinite; | |
| } | |
| /* 代码块收尾时，光标落到代码行尾 */ | |
| .msg-body.is-streaming .md > .code-block:last-child::after { | |
| content: none; | |
| } | |
| .msg-body.is-streaming .md > .code-block:last-child pre::after { | |
| content: ""; | |
| display: inline-block; | |
| width: 2px; | |
| height: 1em; | |
| margin-left: 3px; | |
| border-radius: 1px; | |
| background: var(--accent); | |
| vertical-align: -0.12em; | |
| animation: cursor-breathe 1s ease-in-out infinite; | |
| } | |
| /* ---------- 欢迎空态 ---------- */ | |
| .chat-welcome { | |
| position: relative; | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| padding: 48px 80px; | |
| overflow: hidden; | |
| } | |
| /* 极淡的径向暖光（accent-soft 的 5%，无新颜色） */ | |
| .chat-welcome::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| background: radial-gradient( | |
| 56% 48% at 28% 40%, | |
| color-mix(in srgb, var(--accent-soft) 5%, transparent) 0%, | |
| transparent 72% | |
| ); | |
| } | |
| /* 品牌鸟巢水印（Brand.tsx 复用，极低透明度） */ | |
| .chat-welcome-mark { | |
| position: absolute; | |
| right: 72px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--accent); | |
| opacity: 0.07; | |
| pointer-events: none; | |
| } | |
| .chat-welcome h1 { | |
| position: relative; | |
| margin: 0 0 12px; | |
| font-size: 32px; | |
| } | |
| .chat-welcome p { | |
| position: relative; | |
| margin: 0; | |
| max-width: 520px; | |
| font-size: 16px; | |
| line-height: 1.8; | |
| color: var(--text-secondary); | |
| } | |
| /* ---------- 对话头部右侧动作区（ultrafast 开关 + 专家选择器） ---------- */ | |
| .chat-header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| /* ultrafast 闪电开关（dev-ultrafast）：与狂暴火焰同款视觉语言（幽灵按钮 → | |
| 金渐变徽章，warning 金 → accent 陶土走令牌，反向渐变以区分二者）， | |
| 只是图标换 Zap、语义求快（关思考 + 用最快的模型） */ | |
| .ultrafast-toggle { | |
| position: relative; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 3px 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: | |
| background var(--dur) var(--ease), | |
| color var(--dur) var(--ease), | |
| border-color var(--dur) var(--ease); | |
| } | |
| .ultrafast-toggle:hover { | |
| color: var(--text); | |
| border-color: var(--accent); | |
| } | |
| .ultrafast-toggle.is-on { | |
| border-color: transparent; | |
| color: var(--bg); | |
| background: linear-gradient(135deg, var(--accent), var(--warning)); | |
| /* 开启瞬间的小特效①：徽章轻微弹跳（"啪"地一下上档） */ | |
| animation: ultrafast-pop 300ms var(--ease); | |
| } | |
| /* 开启瞬间的小特效②：一圈金色能量环从徽章外扩淡出（像被点亮/充能）—— | |
| 纯 ::after，只在 is-on 类加上时跑一次，不常驻不刺眼（Warm Paper 克制） */ | |
| .ultrafast-toggle.is-on::after { | |
| content: ""; | |
| position: absolute; | |
| inset: -2px; | |
| border-radius: inherit; | |
| border: 1px solid var(--warning); | |
| opacity: 0; | |
| pointer-events: none; | |
| animation: ultrafast-ring 520ms var(--ease); | |
| } | |
| @keyframes ultrafast-pop { | |
| 0% { transform: scale(1); } | |
| 38% { transform: scale(1.09); } | |
| 100% { transform: scale(1); } | |
| } | |
| @keyframes ultrafast-ring { | |
| 0% { opacity: 0.85; transform: scale(0.92); } | |
| 100% { opacity: 0; transform: scale(1.6); } | |
| } | |
| /* 尊重系统减弱动效：关掉开启特效（弹跳与能量环都不跑） */ | |
| @media (prefers-reduced-motion: reduce) { | |
| .ultrafast-toggle.is-on, | |
| .ultrafast-toggle.is-on::after { | |
| animation: none; | |
| } | |
| } | |
| .ultrafast-toggle.is-on:hover { | |
| color: var(--bg); | |
| filter: brightness(1.04); | |
| } | |
| .ultrafast-toggle:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |