/* ============================================
   AI创作孵化智航方舟平台 - 模块样式
   版本：v1.3
   说明：导航栏、页脚、快捷操作等模块的补充样式
   ============================================ */

/* ---------- 快捷操作容器基础样式 ---------- */
.quick-actions {
    /* 确保容器默认可见 */
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* 确保在移动端触摸时不被遮挡 */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    /* 确保显示在最上层 */
    pointer-events: auto;
    visibility: visible !important;
}

/* 初始加载动画（可选） */
.quick-actions.is-loading {
    opacity: 0;
    transform: translateX(20px);
}

.quick-actions.is-ready {
    opacity: 1 !important;
    transform: none !important;
}

/* ---------- 快捷操作按钮基础样式 ---------- */
.quick-actions .quick-action-btn {
    /* 确保按钮可点击 */
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    /* 移动端优化 */
    min-width: 44px;
    min-height: 44px;
    /* 确保按钮可见 */
    opacity: 1 !important;
    visibility: visible !important;
}

/* ---------- 返回顶部按钮基础状态 ---------- */
.quick-actions .back-to-top {
    /* 默认隐藏状态（页面顶端时） */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.8) !important;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    /* 返回顶部按钮样式 - 与其他按钮一致的白色背景 */
    background: var(--surface, #fff) !important;
    color: var(--primary, #0F2557) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    /* 初始不可点击 */
    pointer-events: none !important;
    cursor: pointer !important;
}

/* 滚动后显示状态（通过JS添加.is-visible类） */
.quick-actions .back-to-top.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
    pointer-events: auto !important;
    background: var(--surface, #fff) !important;
    color: var(--primary, #0F2557) !important;
}

/* ---------- 模块注入后确保正确层级 ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.quick-actions {
    z-index: 999;
}

/* ---------- 移动端优化样式 ---------- */
@media (max-width: 992px) {
    .quick-actions {
        right: 12px !important;
        bottom: 12px !important;
        gap: 10px !important;
        z-index: 9999 !important;
    }
    
    .quick-actions .quick-action-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
    
    /* 返回顶部按钮在移动端 - 与其他按钮一致的白色背景 */
    .quick-actions .back-to-top {
        background: var(--surface, #fff) !important;
        color: var(--primary, #0F2557) !important;
        font-size: 20px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
}

@media (max-width: 480px) {
    .quick-actions {
        right: 10px !important;
        bottom: 10px !important;
        gap: 8px !important;
    }
    
    .quick-actions .quick-action-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 17px !important;
    }
    
    /* 移动端安全区适配 */
    .quick-actions {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
}

/* ---------- 深色模式调整 ---------- */
html[data-theme="dark"] .quick-actions .back-to-top {
    background: var(--surface, #1a1a2e) !important;
    color: #fff !important;
}

html[data-theme="dark"] .quick-actions .back-to-top.is-visible {
    background: var(--surface, #1a1a2e) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(94, 234, 212, 0.2) !important;
}

/* ---------- 移动端深色模式 ---------- */
@media (max-width: 992px) {
    html[data-theme="dark"] .quick-actions .back-to-top {
        background: var(--surface, #1a1a2e) !important;
        color: #5EEAD4 !important;
    }
}