Spaces:
Running
Running
| /* 常驻助理（契约 11A）：面板 + 页签 + 设置区（Warm Paper，全令牌配色） */ | |
| /* ---------- 工作台根（页签条 + 内容区的纵向骨架） ---------- */ | |
| .wb-root { | |
| flex: 1; | |
| min-width: 0; | |
| min-height: 0; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .wb-body { | |
| flex: 1; | |
| min-width: 0; | |
| min-height: 0; | |
| display: flex; | |
| } | |
| /* ---------- 页签（对话工作台最左第一位） ---------- */ | |
| .wb-tabs { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 10px 16px 0; | |
| border-bottom: 1px solid var(--border); | |
| flex-shrink: 0; | |
| } | |
| .wb-tab { | |
| position: relative; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| height: 32px; | |
| padding: 0 12px; | |
| border: none; | |
| border-radius: var(--radius-control) var(--radius-control) 0 0; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-family: inherit; | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); | |
| } | |
| .wb-tab:hover { | |
| background: var(--bg-elevated); | |
| color: var(--text); | |
| } | |
| .wb-tab.is-active { | |
| background: var(--accent-soft); | |
| color: var(--text); | |
| font-weight: 600; | |
| } | |
| .wb-tab:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |
| /* 主动观察红点（v1 占位：有未读观察结论时亮点） */ | |
| .wb-tab-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: var(--danger); | |
| flex-shrink: 0; | |
| } | |
| /* ---------- 面板骨架 ---------- */ | |
| .assistant-panel { | |
| flex: 1; | |
| min-width: 0; | |
| min-height: 0; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* ---------- 头部：状态灯 + 人设名 + 设置 ---------- */ | |
| .assistant-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding: 20px 48px 14px; | |
| border-bottom: 1px solid var(--border); | |
| flex-shrink: 0; | |
| } | |
| .assistant-id { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 10px; | |
| min-width: 0; | |
| } | |
| .assistant-name { | |
| font-size: 18px; | |
| margin: 0; | |
| } | |
| .assistant-style { | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .assistant-head-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex-shrink: 0; | |
| } | |
| /* 驻场状态灯 */ | |
| .assistant-light { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| height: 28px; | |
| padding: 0 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-chip); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-family: inherit; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease); | |
| } | |
| .assistant-light:hover { | |
| background: var(--bg-elevated); | |
| } | |
| .assistant-light-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--text-tertiary); | |
| flex-shrink: 0; | |
| } | |
| .assistant-light.is-resident .assistant-light-dot { | |
| background: var(--success); | |
| } | |
| .assistant-light.is-sleeping .assistant-light-dot { | |
| background: var(--text-tertiary); | |
| } | |
| .assistant-light.is-offline .assistant-light-dot { | |
| background: var(--warning); | |
| } | |
| /* 云端在线（契约 17A：API 模型，不占本机内存）——accent 点色区分本机驻留 */ | |
| .assistant-light.is-cloud .assistant-light-dot { | |
| background: var(--accent); | |
| } | |
| .assistant-light.is-cloud { | |
| color: var(--text-secondary); | |
| } | |
| /* 专属助理徽标（契约 17A：对话页签里的专属模式） */ | |
| .assistant-style.is-thread { | |
| color: var(--accent); | |
| font-weight: 500; | |
| } | |
| /* 线程下拉（契约 17A：侧栏全局模式顶部的「全局 / 某会话」切换） */ | |
| .assistant-thread { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| flex-shrink: 0; | |
| } | |
| .assistant-thread-label { | |
| white-space: nowrap; | |
| } | |
| .assistant-thread-select { | |
| max-width: 200px; | |
| height: 28px; | |
| padding: 0 8px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-chip); | |
| background: var(--bg-elevated); | |
| color: var(--text-secondary); | |
| font-family: inherit; | |
| font-size: 12px; | |
| cursor: pointer; | |
| } | |
| .assistant-thread-select:disabled { | |
| opacity: 0.5; | |
| cursor: default; | |
| } | |
| .assistant-settings-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| height: 28px; | |
| padding: 0 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-chip); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-family: inherit; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); | |
| } | |
| .assistant-settings-btn:hover { | |
| background: var(--bg-elevated); | |
| color: var(--text); | |
| } | |
| /* ---------- 消息流 ---------- */ | |
| .assistant-stream { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| } | |
| .assistant-stream-inner { | |
| max-width: 760px; | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: 32px 48px 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 28px; | |
| } | |
| .ap-msg { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .ap-msg.is-user { | |
| align-items: flex-end; | |
| } | |
| .ap-msg-card { | |
| max-width: 86%; | |
| padding: 10px 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.7; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .ap-md { | |
| font-size: 15px; | |
| line-height: 1.75; | |
| color: var(--text); | |
| } | |
| /* 流式呼吸光标（design-system.md：1s 呼吸闪烁） */ | |
| .ap-caret { | |
| display: inline-block; | |
| width: 7px; | |
| height: 15px; | |
| margin-left: 2px; | |
| vertical-align: text-bottom; | |
| background: var(--accent); | |
| border-radius: 1px; | |
| animation: ap-breathe 1s ease-in-out infinite; | |
| } | |
| @keyframes ap-breathe { | |
| 0%, | |
| 100% { | |
| opacity: 0.15; | |
| } | |
| 50% { | |
| opacity: 0.9; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .ap-caret { | |
| animation: none; | |
| opacity: 0.6; | |
| } | |
| } | |
| /* 只读工具迹（模型查了什么） */ | |
| .ap-tools { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .ap-tool-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| height: 22px; | |
| padding: 0 8px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-chip); | |
| background: var(--bg-elevated); | |
| color: var(--text-secondary); | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| } | |
| .ap-error { | |
| margin: 0; | |
| color: var(--danger); | |
| font-size: 13px; | |
| line-height: 1.6; | |
| } | |
| /* ---------- 空状态 ---------- */ | |
| .assistant-empty { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| padding: 40px 0; | |
| } | |
| .assistant-empty-title { | |
| margin: 0; | |
| font-family: var(--font-serif); | |
| font-size: 22px; | |
| font-weight: 600; | |
| letter-spacing: -0.01em; | |
| } | |
| .assistant-empty-hint { | |
| margin: 0; | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| line-height: 1.7; | |
| } | |
| .assistant-suggestions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-top: 8px; | |
| } | |
| .assistant-suggestion { | |
| height: 32px; | |
| padding: 0 14px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-chip); | |
| background: transparent; | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease); | |
| } | |
| .assistant-suggestion:hover { | |
| background: var(--bg-elevated); | |
| } | |
| /* ---------- 输入区 ---------- */ | |
| .assistant-composer-wrap { | |
| flex-shrink: 0; | |
| padding: 0 48px 24px; | |
| } | |
| .assistant-composer { | |
| max-width: 760px; | |
| margin: 0 auto; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| background: var(--bg-sunken); | |
| transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); | |
| } | |
| .assistant-composer:focus-within { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); | |
| } | |
| .assistant-input { | |
| display: block; | |
| width: 100%; | |
| padding: 12px 16px 4px; | |
| border: none; | |
| background: transparent; | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 15px; | |
| line-height: 1.6; | |
| resize: none; | |
| outline: none; | |
| } | |
| .assistant-input::placeholder { | |
| color: var(--text-tertiary); | |
| } | |
| .assistant-input:disabled { | |
| color: var(--text-tertiary); | |
| } | |
| .assistant-composer-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 6px 10px 10px 16px; | |
| } | |
| .assistant-hint { | |
| font-size: 12px; | |
| color: var(--text-tertiary); | |
| } | |
| .assistant-send { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 32px; | |
| height: 32px; | |
| border: none; | |
| border-radius: var(--radius-chip); | |
| background: var(--accent); | |
| color: #fff; | |
| cursor: pointer; | |
| transition: opacity var(--dur) var(--ease); | |
| flex-shrink: 0; | |
| } | |
| .assistant-send:hover:not(:disabled) { | |
| opacity: 0.9; | |
| } | |
| .assistant-send:disabled { | |
| opacity: 0.4; | |
| cursor: default; | |
| } | |
| .assistant-send:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |
| .assistant-send-spin { | |
| width: 13px; | |
| height: 13px; | |
| border: 2px solid color-mix(in srgb, #fff 45%, transparent); | |
| border-top-color: #fff; | |
| border-radius: 50%; | |
| animation: ap-spin 0.8s linear infinite; | |
| } | |
| @keyframes ap-spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* ---------- 设置区（AssistantSettings，Settings.tsx 挂载） ---------- */ | |
| .asst-set-row { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| margin-bottom: 20px; | |
| } | |
| .asst-set-row:last-child { | |
| margin-bottom: 0; | |
| } | |
| .asst-set-label { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .asst-set-hint { | |
| margin: 0; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| } | |
| /* 驻场档四选：每档一个卡片，卡下方明示内存成本 */ | |
| .asst-residency-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); | |
| gap: 10px; | |
| } | |
| .asst-residency-card { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| padding: 12px 14px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| background: transparent; | |
| text-align: left; | |
| font-family: inherit; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); | |
| } | |
| .asst-residency-card:hover { | |
| background: var(--bg-elevated); | |
| } | |
| .asst-residency-card.is-active { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| } | |
| .asst-residency-card:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |
| .asst-residency-name { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .asst-residency-cost { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| line-height: 1.55; | |
| } | |
| /* 人设编辑 */ | |
| .asst-persona-fields { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .asst-field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .asst-field-label { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .asst-input, | |
| .asst-textarea { | |
| width: 100%; | |
| padding: 8px 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: var(--bg-sunken); | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 14px; | |
| line-height: 1.6; | |
| outline: none; | |
| transition: border-color var(--dur) var(--ease); | |
| } | |
| .asst-textarea { | |
| min-height: 120px; | |
| resize: vertical; | |
| } | |
| .asst-input:focus, | |
| .asst-textarea:focus { | |
| border-color: var(--accent); | |
| } | |
| .asst-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .asst-note { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .asst-note.is-error { | |
| color: var(--danger); | |
| } | |
| .asst-note.is-ok { | |
| color: var(--success); | |
| } | |
| /* ── 「求助大脑」（契约 11B 补充二）──────────────────── */ | |
| .assistant-brain { | |
| height: 30px; | |
| padding: 0 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-family: inherit; | |
| font-size: 12.5px; | |
| cursor: default; | |
| transition: background-color var(--dur) var(--ease), | |
| border-color var(--dur) var(--ease); | |
| } | |
| .assistant-brain:hover:not(:disabled) { | |
| background: var(--accent-soft); | |
| border-color: var(--accent); | |
| color: var(--text); | |
| } | |
| .assistant-brain:disabled { | |
| opacity: 0.45; | |
| } | |
| .ap-msg-brain-tag { | |
| display: inline-block; | |
| margin-bottom: 4px; | |
| padding: 1px 8px; | |
| border-radius: 99px; | |
| background: var(--accent-soft); | |
| color: var(--accent); | |
| font-size: 11px; | |
| font-weight: 500; | |
| } | |
| /* ── 「发给主对话」（契约 16A）────────────────────── */ | |
| .ap-dispatch { | |
| align-self: flex-start; | |
| margin-top: 6px; | |
| height: 26px; | |
| padding: 0 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text-tertiary); | |
| font-family: inherit; | |
| font-size: 12px; | |
| cursor: default; | |
| transition: background-color var(--dur) var(--ease), | |
| border-color var(--dur) var(--ease), color var(--dur) var(--ease); | |
| } | |
| .ap-dispatch:hover { | |
| background: var(--accent-soft); | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| /* ──契约 22A 意图徽章 + 建议 chip ── | |
| * 徽章：12px 衬线 tertiary 小字（不吵）；chip：单个、贴在消息下方、 | |
| * hover 说「小栖猜你想…」——一律需点击，意图只影响建议不自动执行。 */ | |
| .ap-msg-meta { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .ap-intent-badge { | |
| font-family: var(--font-serif); | |
| font-size: 12px; | |
| line-height: 1.4; | |
| color: var(--text-tertiary); | |
| } | |
| .ap-intent-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| height: 26px; | |
| padding: 0 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: var(--bg-elevated); | |
| color: var(--text-secondary); | |
| font-family: inherit; | |
| font-size: 12px; | |
| cursor: pointer; | |
| transition: background-color var(--dur) var(--ease), | |
| border-color var(--dur) var(--ease), color var(--dur) var(--ease); | |
| } | |
| .ap-intent-chip:hover { | |
| background: var(--accent-soft); | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .ap-intent-chip:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 2px; | |
| } | |