// 钱包详情组件
.wallet-detail {
  // 基础样式
  position: relative;
  background: #fff;
  padding: 20px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%; /* 确保根容器有高度 */
  
  // PC环境的默认样式
  border: 1px solid #d0d5de;
  border-radius: 12px;
  
  // 修饰符：PC环境
  &-pc {
    height: 800px;
    max-height: 90vh; /* 限制最大高度 */
  }

  // 修饰符：移动端环境
  &-h5 {
    // 布局
    position: fixed;
    z-index: 100;
    inset: 0; /* 简化top, right, bottom, left设置 */
    display: flex;
    flex-direction: column;
    height: -webkit-fill-available !important;
    
    // 样式
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: 0;
  }
  
  // 元素：头部导航栏
  &-header {
    // 布局
    flex-shrink: 0;
    height: 56px;
    position: relative;
    z-index: 999;
    
    // 样式
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
  }

  // 元素：内容区域
  &-content {
    // 布局
    flex: 1;
    height: calc(100% - 56px); /* 减去头部高度 */
    
    // 样式
    padding: 0;
    overflow: hidden;
    
    // 修饰符：H5环境
    &-h5 {
      // 布局
      padding: 20px;
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
    }
  }
  
  // 元素：卡片容器
  &-card {
    // 布局
    display: flex;
    flex-direction: column;
    height: 100%;
    
    // 样式
    border-radius: 0 !important;
    overflow: hidden;
    box-shadow: none;
    
    // 修饰符：H5环境
    &-h5 {
      // 布局
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      
      // 样式
      overflow: hidden;
    }
    
    // 子元素：卡片顶部导航
    &-header {
      // 布局
      position: sticky;
      top: 0;
      width: 100%;
      height: 56px; /* 明确设置高度 */
      flex-shrink: 0; /* 防止压缩 */
      z-index: 10;
      
      // 样式
      background: #fff; 
      border-bottom: none;
      padding-bottom: 8px;
      
      // 修饰符：H5环境
      &-h5 {
        // 布局
        position: relative;
        height: 56px; /* 明确设置高度 */
        flex-shrink: 0;
        z-index: 102;
        
      }
      
      // 子元素：锚点导航容器
      &-anchor {
        padding: 0;
        
        :global {
          .pisell-anchor-tabs {
            background: #fff;
            
            .pisell-anchor-tabs-content {
              display: flex;
              
              .pisell-anchor-tabs-tab {
                flex: 1;
                text-align: center;
                padding: 12px 16px;
                
                &-active {
                  background:var(--theme-color, #7F56D9);
                  color: #fff;
                  
                  .pisell-anchor-tabs-tab-content {
                    color: #fff;
                    font-weight: 600;
                  }
                }
                
                &:first-child {
                  border-top-left-radius: 0;
                  border-bottom-left-radius: 0;
                }
                
                &:last-child {
                  border-top-right-radius: 0;
                  border-bottom-right-radius: 0;
                }
              }
            }
          }
        }
      }
    }
    
    // 子元素：卡片内容区域
    &-content {
      // 基础样式
      position: relative;
      display: block;
      height: calc(100% - 56px); /* 父级容器高度减去锚点导航高度 */
      
      // 滚动相关
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      
      // 通用内边距
      padding: 0 0 24px;
      
      // 修饰符：H5环境
      &-h5 {
        // 布局
        position: relative;
        z-index: 10;
        
        // 内边距
        padding: 0 ;
        
        // 滚动相关
        overscroll-behavior: contain;
        touch-action: pan-y;
      }
      
      // 修饰符：PC环境
      &-pc {
        padding: 0 16px 24px; /* 左右16px内边距，底部24px内边距 */
      }
      
      // 修饰符：自定义滚动条
      &-custom-scrollbar {
        // Firefox滚动条样式
        scrollbar-width: thin;
        scrollbar-color: #d9d9d9 transparent;
        
        // Webkit滚动条样式
        &::-webkit-scrollbar {
          width: 6px;
          background-color: transparent;
          display: block;
        }
        
        &::-webkit-scrollbar-thumb {
          background-color: #d9d9d9;
          border-radius: 3px;
        }
        
        &::-webkit-scrollbar-track {
          background-color: transparent;
        }
      }
      
      // 修饰符：隐藏滚动条
      &-hide-scrollbar {
        // 隐藏滚动条但保留滚动功能
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE and Edge */
        
        &::-webkit-scrollbar {
          width: 0 !important;
          height: 0 !important;
          background: transparent !important;
          display: none !important;
        }
      }
      
      // 子元素：内容区块
      &-section {
        min-height: 100px;
        padding-top: 0;
        position: relative;
        scroll-margin-top: 56px; /* 调整滚动边距以考虑卡片内固定导航的高度 */
        clear: both; /* 确保不受前面元素浮动影响 */
        margin-bottom: 24px; /* 确保section之间有足够间距 */
        
        &:last-child {
          margin-bottom: 0;
        }
        
        // 修饰符：时间线区块
        &-timeline {
          margin-top: 16px;
        }
        
        // 子元素：区块标题
        &-title {
          color: #101828;
          font-size: 20px;
          font-weight: 600;
          line-height: 30px;
          margin: 10px 0;
          display: block;
        }
        
        // 子元素：区块副标题
        &-subtitle {
          font-size: 16px;
          line-height: 24px;
          font-weight: 600;
          color: #101828;
          margin-bottom: 16px;
        }
        
        // 子元素：空状态
        &-empty {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 200px;
        }
      }
      
      // 子元素：详情内容提示
      &-tip {
        margin-top: 16px;
        color: #667085;
        font-size: 14px;
        line-height: 1.5;
        width: 100%; /* 确保内容不会溢出 */
        
        // HTML内容容器
        div {
          width: 100%;
          word-break: break-word; /* 确保长文本自动换行 */
        }
      }
    }
  }
  
  // 元素：时间线节点
  &-timeline-node {
    display: flex;
    justify-content: space-between;
    
    // 子元素：节点左侧
    &-left {
      display: flex;
      flex-direction: column;
    }
    
    // 子元素：操作名称
    &-action {
      color: #101828;
      font-size: 14px;
      font-weight: 500;
      margin: 0 0 4px;
    }
    
    // 子元素：时间
    &-time {
      color: #667085;
      font-size: 12px;
      margin: 0;
      display: flex;
      align-items: center;
    }
    
    // 子元素：查看详情
    &-detail-link {
      color: var(--theme-color, #7F56D9);
      margin-left: 8px;
      cursor: pointer;
      font-size: 12px;
    }
    
    // 子元素：金额
    &-amount {
      font-size: 14px;
      font-weight: 500;
      
      // 修饰符：正数金额
      &-positive {
        color: #12B76A;
      }
      
      // 修饰符：负数金额
      &-negative {
        color: #F04438;
      }
    }
  }
  
  // 元素：时间线列表
  &-timeline-list {
    padding: 8px 0;
  }
}

// 弹窗样式
.wallet-detail-copyTitle,
.wallet-detail-copyText {
  color: #101828;
}

.wallet-detail-copyTitle {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  margin-bottom: 8px;
}

.wallet-detail-copyText {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
