/* Agent-maintained plan: compact progress chip, expanded on hover/focus. */ .agent-plan-progress { --agent-plan-surface: var(--card-bg); --agent-plan-surface-hover: var(--bg-tertiary); --agent-plan-text: var(--text-primary); --agent-plan-text-secondary: var(--text-secondary); --agent-plan-border: var(--border-color); --agent-plan-spinner-track: color-mix(in srgb, var(--accent-color) 30%, transparent); --agent-plan-trigger-bottom: 14px; --agent-plan-panel-bottom: 70px; position: relative; z-index: 42; flex: 0 0 0; width: 100%; height: 0; display: flex; justify-content: center; pointer-events: none; } .agent-plan-progress[hidden] { display: none; } .agent-plan-progress-trigger { position: absolute; right: 50%; bottom: var(--agent-plan-trigger-bottom); transform: translateX(50%); display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid var(--agent-plan-border); border-radius: 18px; color: var(--agent-plan-text); background: var(--agent-plan-surface); box-shadow: var(--shadow-lg); font: inherit; font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; pointer-events: auto; transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; } .agent-plan-progress-trigger:hover, .agent-plan-progress-trigger:focus-visible { color: var(--agent-plan-text); background: var(--agent-plan-surface-hover); border-color: var(--accent-color); outline: none; } .agent-plan-progress-panel { position: absolute; right: 50%; bottom: var(--agent-plan-panel-bottom); width: max-content; min-width: 360px; max-width: min(560px, calc(100vw - 40px)); max-height: min(54vh, 440px); padding: 14px 18px; overflow: auto; border: 1px solid var(--agent-plan-border); border-radius: 18px; color: var(--agent-plan-text); background: var(--agent-plan-surface); box-shadow: var(--shadow-lg); opacity: 0; transform: translate(50%, 8px) scale(0.985); transform-origin: bottom center; visibility: hidden; pointer-events: none; transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease; } /* * “回到最新消息”只在用户离开底部时出现。它与任务进度同为居中浮层, * 两者同时可见时让任务进度上移,保留回到底部按钮靠近输入框的位置。 */ .chat-return-latest:not([hidden]) + .agent-plan-progress:not([hidden]) { --agent-plan-trigger-bottom: 64px; --agent-plan-panel-bottom: 120px; } .agent-plan-progress.is-hover-active .agent-plan-progress-panel, .agent-plan-progress:focus-within .agent-plan-progress-panel, .agent-plan-progress.is-open .agent-plan-progress-panel { opacity: 1; transform: translate(50%, 0) scale(1); visibility: visible; pointer-events: auto; } .agent-plan-task { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; min-height: 34px; padding: 4px 0; font-size: 15px; font-weight: 570; line-height: 1.45; } .agent-plan-task-label { min-width: 0; overflow-wrap: anywhere; } .agent-plan-task--completed { color: var(--agent-plan-text-secondary); } .agent-plan-task--in_progress { color: var(--agent-plan-text); } .agent-plan-task--pending { color: var(--agent-plan-text-secondary); } .agent-plan-task-status { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 2px; border: 2px solid var(--agent-plan-text-secondary); border-radius: 50%; box-sizing: border-box; flex: 0 0 auto; } .agent-plan-task-status--completed { border-color: var(--agent-plan-text-secondary); color: var(--agent-plan-text-secondary); } .agent-plan-task-check { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; } .agent-plan-task-status--in_progress { border-color: var(--agent-plan-spinner-track); border-top-color: var(--accent-color); animation: agent-plan-spin 820ms linear infinite; } .agent-plan-progress-trigger .agent-plan-task-status { margin-top: 0; } @keyframes agent-plan-spin { to { transform: rotate(360deg); } } @media (max-width: 640px) { .agent-plan-progress { --agent-plan-trigger-bottom: 10px; --agent-plan-panel-bottom: 66px; } .chat-return-latest:not([hidden]) + .agent-plan-progress:not([hidden]) { --agent-plan-trigger-bottom: 60px; --agent-plan-panel-bottom: 116px; } .agent-plan-progress-panel { min-width: min(360px, calc(100vw - 28px)); max-width: calc(100vw - 28px); padding: 12px 15px; } .agent-plan-progress-trigger { min-height: 42px; padding: 0 15px; } } @media (prefers-reduced-motion: reduce) { .agent-plan-progress-trigger, .agent-plan-progress-panel { transition: none; } .agent-plan-task-status--in_progress { animation-duration: 1.8s; } }