/* ============================================
   聊天UI优化 - 2026-03-05 
   改进：排版、颜色心理学、交互精细化
   ============================================ */

/* 1. 操作按钮 - 低调但始终可见 */
.copy-button,
.resend-button {
    opacity: 0.4 !important;
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.15s ease;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 16px !important;
    padding: 4px !important;
}

.message:hover .copy-button,
.message:hover .resend-button {
    opacity: 1 !important;
}

.copy-button:hover,
.resend-button:hover {
    opacity: 1 !important;
    background: rgba(102, 126, 234, 0.1) !important;
    transform: scale(1.12);
}

.copy-button:active,
.resend-button:active {
    transform: scale(0.95);
}

/* 移动端适配 - 触控设备上按钮始终清晰可见 */
@media (hover: none) and (pointer: coarse) {
    .copy-button,
    .resend-button {
        opacity: 0.75 !important;
    }
    
    .copy-button:active,
    .resend-button:active {
        opacity: 1 !important;
        background: rgba(102, 126, 234, 0.15) !important;
    }
}

/* 2. 发送按钮 - Icon Only 风格 */
.send-button,
.send-button-round {
    border-radius: 50% !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0;
    margin-left: 8px;
}

/* 3. 用户消息 - 低饱和度背景 */
.message.user-message .message-content {
    background: #e8eef7 !important;
    color: #2c3e50 !important;
    font-weight: 500;
}

/* 4. AI消息名字 - 深灰色而非红色 */
.message.ai-message .message-sender {
    color: #4b5563 !important;
    font-weight: 700;
}

/* 5. AI头像 - 紫色而非橙色 */
.message.ai-message .message-avatar .avatar-placeholder.ai {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* 6. Header副标题 */
.ynm-langflow-chat-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* 7. 时间戳 - 更浅、更小 */
.message-time {
    font-size: 10px !important;
    color: rgba(153, 153, 153, 0.5) !important;
    margin-top: 6px;
}

/* 8. Message content 行高和间距 */
.message-content {
    line-height: 1.8 !important;
    letter-spacing: 0.3px;
}

/* 9. Markdown 段落间距 */
.markdown-content p {
    margin: 1em 0 !important;
    line-height: 1.8 !important;
}

.markdown-content p:first-child {
    margin-top: 0 !important;
}

.markdown-content p:last-child {
    margin-bottom: 0 !important;
}

/* 10. 强化Blockquote样式 */
.markdown-content blockquote {
    border-left: 4px solid #667eea !important;
    padding: 0.8em 1.2em !important;
    margin: 1em 0 !important;
    background: rgba(102, 126, 234, 0.05) !important;
    color: #4b5563 !important;
    border-radius: 4px;
}

/* 11. 列表项间距 */
.markdown-content li {
    margin: 0.5em 0 !important;
    line-height: 1.8 !important;
}

.markdown-content ul,
.markdown-content ol {
    margin: 1em 0 !important;
}

/* 12. 代码块增强 */
.markdown-content code {
    background: rgba(102, 126, 234, 0.1) !important;
    color: #667eea !important;
}

.markdown-content pre {
    background: #f5f5f5 !important;
    border-left: 3px solid #667eea !important;
}

/* 13. 响应式调整 */
@media (max-width: 768px) {
    .send-button {
        width: 36px !important;
    }
    
    .message {
        max-width: 90%;
    }
    
    .message-time {
        font-size: 9px !important;
    }
}

/* 14. Dark Mode Support */
.theme-dark .copy-button:hover,
.theme-dark .resend-button:hover {
    background: rgba(255, 255, 255, 0.15);
}

.theme-dark .message.user-message .message-content {
    background: #3e4c66 !important;
    color: #ffffff !important;
}

.theme-dark .send-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}