xiaozhi/jk-rag-platform/src/pages/appCenter/mobile/MobileH5.scss

// MobileH5 容器样式
// 仅在移动端（≤768px）生效

@media (max-width: 768px) {
    .mobile-h5-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        width: 100vw;
        background: var(--h5-bg-primary);
        overflow: hidden;
        position: relative;
    }

    // 内容区域
    .mobile-content {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;  // iOS 平滑滚动
        padding-bottom: calc(60px + env(safe-area-inset-bottom));  // 留出 Tab 空间
        position: relative;
    }

    // ===== 智能问答包装器 =====
    .chat-wrapper {
        position: relative;
        height: 100%;
        
        // 隐藏"开放平台"返回按钮（H5 不显示）
        .back-btn {
            display: none !important;
        }
        
        // 汉堡菜单按钮
        .hamburger-toggle {
            position: fixed;
            top: var(--h5-spacing-lg);
            left: var(--h5-spacing-lg);
            z-index: 1001;
            width: 40px;
            height: 40px;
            border-radius: var(--h5-radius-full);
            background: var(--h5-bg-secondary);
            border: 1px solid var(--h5-border);
            font-size: 20px;
            color: var(--h5-text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--h5-shadow-md);
            transition: var(--h5-transition);
            
            &:active {
                background: var(--h5-bg-tertiary);
            }
        }
        
        // Sidebar 包装器
        .sidebar-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 280px;
            z-index: 1002;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            
            &.open {
                transform: translateX(0);
            }
        }
        
        // 遮罩层
        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1001;
            animation: fadeIn 0.3s ease;
        }
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    // 底部 Tab 导航
    .bottom-tab-bar {
        flex-shrink: 0;
        display: flex;
        height: 60px;
        background: var(--h5-bg-secondary);
        border-top: 1px solid var(--h5-border);
        padding: var(--h5-spacing-sm) var(--h5-spacing-md);
        padding-bottom: calc(var(--h5-spacing-sm) + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    }

    // Tab 项
    .tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: var(--h5-transition);

        .tab-icon {
            font-size: 24px;
            color: var(--h5-text-muted);
            transition: color 0.2s;
            line-height: 1;
        }

        .tab-label {
            font-size: var(--h5-font-xs);
            color: var(--h5-text-muted);
            font-weight: 400;
            transition: color 0.2s;
        }

        // 激活状态
        &.active {
            .tab-icon {
                color: var(--h5-accent);
            }

            .tab-label {
                color: var(--h5-accent);
                font-weight: 500;
            }
        }

        // 点击反馈
        &:active {
            opacity: 0.7;
        }
    }
}