/* 复制按钮样式 */ .message { position: relative; margin-bottom: 50px; } .message-content { position: relative; } .copy-button, .copy-button-direct { position: absolute; width: 32px; height: 32px; background: var(--primary-indigo); color: white; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1001; box-shadow: 0 4px 6px rgba(0,0,0,0.2); transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; opacity: 0; } .copy-button { bottom: 8px; right: 8px; } .copy-button-direct { top: 10px; right: 10px; } /* Show button on hover */ .message:hover .copy-button, .message-content:hover .copy-button-direct { opacity: 1; } /* 确保AI消息的复制按钮可见 */ .message.bot:hover .copy-button, .message.bot-message:hover .copy-button { opacity: 1; } .copy-button:hover, .copy-button-direct:hover { transform: scale(1.1); box-shadow: 0 6px 10px rgba(0,0,0,0.25); } .copy-button svg, .copy-button-direct svg { width: 18px; height: 18px; } /* 复制通知样式 */ .copy-notification { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px 20px; border-radius: 8px; color: white; font-size: 14px; font-weight: 500; z-index: 9999; box-shadow: 0 4px 10px rgba(0,0,0,0.2); opacity: 0; transition: all 0.3s ease; } .copy-notification.success { background-color: rgba(16, 185, 129, 0.95); } .copy-notification.error { background-color: rgba(239, 68, 68, 0.95); } .copy-notification.show { opacity: 1; } /* 深色模式适配 */ @media (prefers-color-scheme: dark) { .copy-button { background: var(--primary-indigo); color: white; } .copy-button:hover { background: var(--primary-purple); } .copy-notification { background: var(--glass-background-dark); } .copy-notification.success { background: rgba(16, 185, 129, 0.8); } .copy-notification.error { background: rgba(239, 68, 68, 0.8); } }