/* ===== 人工交互 / 工具审批卡片 ===== */ .pending-action-card { margin-top: 0.75rem; padding: 0.85rem 1rem; border: none; border-left: 3px solid color-mix(in srgb, var(--success) 45%, transparent); border-radius: 12px; background: linear-gradient(135deg, var(--surface) 0%, var(--bg-tertiary) 100%); box-shadow: 0 4px 20px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.6); backdrop-filter: blur(4px); transition: border-color 0.2s, box-shadow 0.2s; } .pending-action-card:hover { border-color: color-mix(in srgb, var(--success) 25%, transparent); box-shadow: 0 4px 24px color-mix(in srgb, var(--success) 8%, transparent), inset 0 1px 0 rgba(255,255,255,0.6); } .pending-action-card--resolved { opacity: 0.68; border-left-color: var(--border); } .pending-action-title { font-weight: 700; font-size: 0.92rem; margin-bottom: 0.45rem; color: var(--text); display: flex; align-items: center; gap: 0.35rem; } .pending-action-prompt { margin-bottom: 0.55rem; color: var(--text-tertiary); font-size: 0.84rem; line-height: 1.6; white-space: pre-wrap; } /* information: textarea + inline arrow */ .pending-action-input-row { position: relative; } .pending-action-editor, .pending-action-editor-container { width: 100%; } .pending-action-editor { width: 100%; resize: vertical; border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.75rem; font: inherit; font-size: 0.84rem; color: var(--text); background: var(--surface); transition: border-color 0.2s, box-shadow 0.2s; } .pending-action-editor:focus { outline: none; border-color: color-mix(in srgb, var(--success) 50%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 10%, transparent); } .pending-action-editor--with-arrow { padding-right: 2.8rem; } .pending-action-editor-container { position: relative; } .pending-action-send-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 2.1rem; height: 2.1rem; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--success) 0%, var(--accent) 100%); color: #fff; font-size: 1.1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; line-height: 1; z-index: 1; } .pending-action-send-btn:hover:not(:disabled) { transform: translateY(-50%) scale(1.12); background: linear-gradient(135deg, color-mix(in srgb, var(--success) 75%, white) 0%, var(--accent) 100%); box-shadow: 0 0 14px color-mix(in srgb, var(--success) 55%, transparent), 0 0 28px color-mix(in srgb, var(--accent) 20%, transparent); } .pending-action-send-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; } .pending-action-send-btn--small { width: 1.6rem; height: 1.6rem; font-size: 0.9rem; position: static; flex-shrink: 0; margin-left: 0.4rem; transform: none; } .pending-action-send-btn--small:hover:not(:disabled) { transform: scale(1.12); } /* selection: multi-question */ .pending-action-question { margin-bottom: 0.7rem; padding: 0.6rem 0.7rem; border: none; border-radius: 10px; background: var(--bg-tertiary); transition: border-color 0.2s; } .pending-action-question:hover { border-color: color-mix(in srgb, var(--success) 20%, transparent); } .pending-action-question-label { font-weight: 600; font-size: 0.86rem; margin-bottom: 0.45rem; color: var(--muted); } /* option pills (non-editable, click to select) */ .pending-action-option-pill { display: inline-flex; align-items: center; border: none; border-radius: 999px; padding: 0.35rem 0.75rem; font: inherit; font-size: 0.8rem; cursor: pointer; background: var(--surface); color: var(--muted); transition: all 0.2s; margin: 0.15rem 0.3rem 0.15rem 0; user-select: none; } .pending-action-option-pill:hover:not(:disabled) { background: color-mix(in srgb, var(--success) 8%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--success) 12%, transparent); transform: translateY(-1px); } .pending-action-option-pill--selected { background: linear-gradient(135deg, var(--success), var(--accent)) !important; border-color: color-mix(in srgb, var(--accent) 70%, transparent) !important; color: #fff !important; font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, var(--success) 25%, transparent); } .pending-action-option-pill:disabled { opacity: 0.5; cursor: not-allowed; } /* "其他" input row */ .pending-action-other-row { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; } .pending-action-other-input { flex: 1; border: 1px solid var(--border); border-radius: 999px; padding: 0.38rem 0.8rem; font: inherit; font-size: 0.8rem; color: var(--text); background: var(--surface); transition: border-color 0.2s, box-shadow 0.2s; } .pending-action-other-input:focus { outline: none; border-color: color-mix(in srgb, var(--success) 45%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 10%, transparent); } .pending-action-other-input:disabled { opacity: 0.5; } /* options container (legacy) */ .pending-action-options { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.45rem; } .pending-action-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.65rem; } .pending-action-btn { border: none; border-radius: 999px; padding: 0.45rem 1rem; font: inherit; font-size: 0.84rem; font-weight: 500; cursor: pointer; background: var(--surface); color: var(--muted); transition: all 0.2s; backdrop-filter: blur(4px); } .pending-action-btn:hover:not(:disabled) { background: var(--surface); box-shadow: 0 2px 8px var(--shadow); transform: translateY(-1px); } .pending-action-btn:disabled { opacity: 0.45; cursor: not-allowed; } .pending-action-btn--approve { background: linear-gradient(135deg, var(--success), var(--accent)); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, var(--success) 20%, transparent); } .pending-action-btn--approve:hover:not(:disabled) { background: linear-gradient(135deg, color-mix(in srgb, var(--success) 75%, white), var(--accent-hover)); box-shadow: 0 4px 16px color-mix(in srgb, var(--success) 40%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 15%, transparent); transform: translateY(-1px); border-color: transparent; } .pending-action-btn--reject { background: var(--danger-bg); color: var(--danger-hover); font-weight: 500; } .pending-action-btn--reject:hover:not(:disabled) { background: var(--danger-bg); box-shadow: 0 2px 10px color-mix(in srgb, var(--danger) 12%, transparent); transform: translateY(-1px); }