offerpai_web/src/assets/styles/components/mentor-aside-panel.scss

@use '../variables' as *;

// ==================== 导师页右侧广告面板样式 ====================

.mentor-aside-panel {
  font-size: 0.14rem;
  width: 100%;
  height: 100%;
  position: relative;
  background: $bg-white;
  display: flex;
  flex-direction: column;

  // 顶部渐变区域
  &__header {
    padding: 0.24rem;
    background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 100%);
  }

  &__title {
    font-weight: 630;
    font-size: 0.20rem;
    line-height: 0.27rem;
    color: $text-dark;
  }

  &__subtitle {
    font-weight: 330;
    font-size: 0.14rem;
    line-height: 0.19rem;
    color: $text-middle;
    margin-top: 0.04rem;
  }

  // 统计数字区域
  &__stats {
    display: flex;
    align-items: center;
    margin: 0 0.24rem;
    height: 1rem;
    background: linear-gradient(270deg, rgba(82, 202, 209, 0.05) 0%, rgba(159, 208, 81, 0.05) 100%);
    border-radius: 0.12rem;
    position: relative;

    // 渐变边框：从上到下 #9FD051 → #52CAD1
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 0.12rem;
      padding: 0.012rem;
      background: linear-gradient(180deg, #9FD051 0%, #52CAD1 100%);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
  }

  &__stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.08rem;
    padding: 0.20rem 0;
  }

  &__stat-num {
    font-weight: 620;
    font-size: 0.24rem;
    line-height: 0.32rem;
    background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  &__stat-label {
    font-weight: 450;
    font-size: 0.14rem;
    line-height: 0.19rem;
    color: $text-dark;
  }

  &__stat-divider {
    width: 0;
    height: 0.98rem;
    border-left: 1px solid $border-color;
  }

  // 小节标题（共用）
  &__section-title {
    display: flex;
    align-items: center;
    gap: 0.08rem;
  }

  &__section-icon {
    font-size: 0.16rem;
    background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  &__section-text {
    font-weight: 620;
    font-size: 0.16rem;
    line-height: 0.21rem;
    background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  // 为什么选择我们的导师
  &__reasons {
    margin: 0.24rem 0.24rem 0;
  }

  &__reason-list {
    margin-top: 0.24rem;
  }

  &__reason-item {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    margin-bottom: 0.20rem;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &__reason-icon {
    width: 0.42rem;
    height: 0.42rem;
    background: #EDF9FA;
    border-radius: 0.08rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    svg {
      width: 0.24rem;
      height: 0.24rem;
    }
  }

  &__reason-info {
    display: flex;
    flex-direction: column;
    gap: 0.04rem;
  }

  &__reason-title {
    font-weight: 620;
    font-size: 0.14rem;
    line-height: 0.19rem;
    color: $text-dark;
  }

  &__reason-desc {
    font-weight: 330;
    font-size: 0.14rem;
    line-height: 0.19rem;
    color: $text-middle;
  }

  // 热门导师方向
  &__directions {
    margin: 0.24rem 0.24rem 0;
  }

  &__direction-list {
    margin-top: 0.24rem;
  }

  &__direction-card {
    box-sizing: border-box;
    padding: 0.12rem 0.16rem;
    background: $bg-white;
    border: 1px solid $border-color;
    border-radius: 0.12rem;
    margin-bottom: 0.20rem;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &__direction-name {
    font-weight: 620;
    font-size: 0.14rem;
    line-height: 0.19rem;
    color: $text-dark;
    margin-bottom: 0.08rem;
  }

  &__direction-tags {
    display: flex;
    align-items: center;
    gap: 0.08rem;
  }

  &__direction-tag {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.04rem 0.08rem;
    background: #EDF9FA;
    border-radius: 0.04rem;
    font-weight: 330;
    font-size: 0.12rem;
    line-height: 0.16rem;
    color: $accent;
  }

  // 底部按钮区域
  &__footer {
    margin-top: auto;
    padding: 0.24rem;
    text-align: center;
  }

  &__cta-btn {
    width: 100%;
    height: 0.40rem;
    background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
    border-radius: 0.12rem;
    border: none;
    font-weight: 620;
    font-size: 0.14rem;
    line-height: 0.19rem;
    color: $bg-white;
    cursor: pointer;
    transition: opacity 0.15s;

    &:hover {
      opacity: 0.9;
    }
  }

  &__footer-tip {
    font-weight: 330;
    font-size: 0.12rem;
    line-height: 0.16rem;
    color: $text-middle;
    margin-top: 0.08rem;
  }

  // ==================== 模式二：模拟对话样式 ====================

  &__chat {
    flex: 1;
    overflow-y: auto;
    padding: 0.16rem 0.24rem;

    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background: $border-color;
      border-radius: 2px;
    }
  }

  // 对话加载中
  &__chat-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    padding: 0.4rem 0;
    color: $text-middle;
    font-size: 0.13rem;
  }

  &__chat-spinner {
    width: 0.24rem;
    height: 0.24rem;
    border: 2px solid $border-color;
    border-top-color: $accent;
    border-radius: 50%;
    animation: mentorChatSpin 0.7s linear infinite;
  }

  @keyframes mentorChatSpin {
    to { transform: rotate(360deg); }
  }

  // 对话气泡
  &__chat-bubble {
    display: flex;
    margin-bottom: 0.16rem;

    &:last-child {
      margin-bottom: 0;
    }

    // 用户消息 — 右对齐，品牌色背景
    &--user {
      justify-content: flex-end;

      .mentor-aside-panel__chat-text {
        background: $accent;
        color: #FFFFFF;
        border-radius: 0.12rem 0.04rem 0.12rem 0.12rem;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
      }
    }

    // 导师消息 — 左对齐，白色背景
    &--mentor {
      justify-content: flex-start;

      .mentor-aside-panel__chat-text {
        background: #FFFFFF;
        color: $text-dark;
        border-radius: 0.04rem 0.12rem 0.12rem 0.12rem;
        box-shadow: 0 2px 4px rgba(82, 202, 209, 0.1);
      }
    }
  }

  &__chat-text {
    display: inline-block;
    max-width: 2.38rem;
    padding: 0.08rem 0.12rem;
    font-weight: 330;
    font-size: 0.14rem;
    line-height: 0.24rem;
    word-break: break-word;
  }
}

// ==================== 二维码弹窗样式 ====================

/* 遮罩层 */
.mentor-qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 弹窗卡片 */
.mentor-qr-card {
  font-size: 0.14rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.24rem 0.32rem;
  gap: 0.24rem;
  width: 4.80rem;
  background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 20.63%);
  border: 1px solid #F0F0F0;
  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
  border-radius: 0.12rem;

  // 头部：标题 + 关闭按钮
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
  }

  &__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.04rem;
  }

  &__title {
    font-weight: 620;
    font-size: 0.18rem;
    line-height: 0.24rem;
    color: #1A1A1A;
  }

  &__desc {
    font-weight: 330;
    font-size: 0.12rem;
    line-height: 0.16rem;
    color: #6A7282;
  }

  &__close {
    width: 0.24rem;
    height: 0.24rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    &:hover {
      opacity: 0.7;
    }

    svg {
      width: 0.24rem;
      height: 0.24rem;
    }
  }

  // 二维码展示区域
  &__qr-area {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.16rem 0;
    width: 100%;
    min-height: 2.72rem;
    background: #F4FBFB;
    border: 1px solid #AEE6EA;
    border-radius: 0.08rem;
  }

  &__qr-img {
    width: 2.40rem;
    height: 2.40rem;
    object-fit: contain;
  }

  &__placeholder {
    font-size: 0.14rem;
    color: #6A7282;
  }

  &__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.40rem;
    height: 2.40rem;
  }

  &__spinner {
    width: 0.32rem;
    height: 0.32rem;
    border: 3px solid #AEE6EA;
    border-top-color: #52CAD1;
    border-radius: 50%;
    animation: mentorQrSpin 0.7s linear infinite;
  }

  @keyframes mentorQrSpin {
    to { transform: rotate(360deg); }
  }

  // 底部提示
  &__footer {
    width: 100%;
  }

  &__footer-text {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.12rem 0.16rem;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    border-radius: 0.08rem;
    font-weight: 330;
    font-size: 0.14rem;
    line-height: 0.19rem;
    color: #6A7282;
  }
}