@use 'sass:color';
@use '../variables' as *;

// ==================== 求职助手页面样式 ====================
.agent-page {
  min-height: var(--app-height, 100vh);
  background: $bg-main;
  font-size: 0.14rem;
  // 主内容区域（左侧导航栏右边的部分）
  &__content {
    margin-left: 2.2rem;
    flex: 1;
    overflow-y: auto;
    height: var(--app-height, 100vh);
    box-sizing: border-box;
  }

  // ==================== 顶部步骤导航条 ====================
  &__steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.06rem;
    margin-bottom: 0.36rem;
  }

  // 单个步骤项
  &__step {
    display: flex;
    align-items: center;
    gap: 0.06rem;
    padding: 0.06rem 0.14rem;
    border-radius: 0.2rem;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;

    // 激活态 — 仅数字圆形变主题色，文字变深色
    &--active {
      .agent-page__step-number {
        background: $accent;
        color: $bg-white;
      }

      .agent-page__step-label {
        color: $text-dark;
      }
    }
  }

  // 步骤序号圆圈
  &__step-number {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: $bg-main;
    color: $text-middle;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.14rem;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1;
    transition: all 0.25s ease;
  }

  // 步骤文字标签
  &__step-label {
    font-size: 0.14rem;
    color: $text-middle;
    white-space: nowrap;
    font-weight: 600;
    transition: all 0.25s ease;
  }

  // 步骤间分隔横线
  &__step-line {
    display: block;
    width: 0.93rem;
    height: 0.02rem;
    background: #E5E7EB;
  }

  // ==================== 主体内容区域 — 左右两栏 ====================
  &__main {
    display: flex;
    gap: 0.24rem;
    align-items: stretch;
  }

  // 左侧说明引导区域
  &__left {
    width: 3.2rem;
    flex-shrink: 0;
  }

  // 右侧个人档案区域
  &__right {
    flex: 1;
    min-width: 0;
    border: 0.01rem solid #F0F0F0;
    border-radius: 0.12rem;
  }

  // ==================== 左侧引导卡片 ====================
  &__intro-card {
    background: $bg-white;
    border-radius: 0.12rem;
    padding: 0.24rem 0.32rem;
    border: 0.01rem solid #5DCDC4;

    // 渐变背景变体 — 淡绿渐变底色
    &--gradient {
      background: linear-gradient(128.17deg, rgba(82, 202, 209, 0.05) 0%, rgba(130, 215, 155, 0.05) 100%);
      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.04);
    }
  }

  // Nova 头像行
  &__intro-avatar-row {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    margin-bottom: 0.16rem;
  }

  &__intro-avatar-img {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    object-fit: cover;
  }

  &__intro-avatar-name {
    font-size: 0.18rem;
    font-weight: 620;
    color: $accent;
  }

  // 渐变按钮 — 宽度撑满
  &__intro-gradient-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 0.43rem;
    background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);
    border-radius: 0.12rem;
    border: none;
    font-size: 0.14rem;
    font-weight: 620;
    color: $bg-white;
    cursor: pointer;
    transition: opacity 0.25s ease;
    margin-top: 0.16rem;

    &:hover { opacity: 0.9; }
    &:active { transform: scale(0.98); }
  }

  // 上一步按钮 — 文字按钮
  &__intro-back-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 0.38rem;
    background: transparent;
    border: none;
    font-size: 0.13rem;
    color: $text-middle;
    cursor: pointer;
    margin-top: 0.08rem;
    transition: color 0.2s ease;

    &:hover { color: $text-dark; }
  }

  // 卡片头部：图标 + 标题
  &__intro-header {
    display: flex;
    align-items: flex-start;
    gap: 0.02rem;
    margin-bottom: 0.2rem;
  }

  // 用户图标
  &__intro-icon {
    width: 0.20rem;
    height: 0.20rem;
    flex-shrink: 0;
    color: $text-dark;
    margin-top: 0.02rem;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  // 引导标题
  &__intro-title {
    font-size: 0.18rem;
    font-weight: 620;
    color: $text-dark;
    line-height: 1.5;
    margin: 0 0 0.08rem;
  }

  // 说明描述文字
  &__intro-desc {
    font-size: 0.14rem;
    color: $text-middle;
    line-height: 1.7;
    margin-bottom: 0.16rem;
  }

  // 导入个人资料行
  &__import-row {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.14rem 0.16rem;
    background: $bg-main;
    border-radius: 0.08rem;
    margin-bottom: 0.28rem;
  }

  // 导入图标
  &__import-icon {
    width: 0.18rem;
    height: 0.18rem;
    color: $text-dark;
    flex-shrink: 0;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  // 导入文字
  &__import-text {
    font-size: 0.13rem;
    color: $text-dark;
    font-weight: 500;
  }

  // 确认并进入按钮
  &__confirm-btn {
    display: block;
    width: 2rem;
    height: 0.42rem;
    background: $btn-dark;
    color: $bg-white;
    border: none;
    border-radius: 0.21rem;
    font-size: 0.14rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.25s ease;
    line-height: 0.42rem;
    text-align: center;
    padding: 0;

    &:hover {
      background: $btn-dark-hover;
    }

    &:active {
      transform: scale(0.98);
    }
  }

  // ==================== 右侧个人档案包裹 ====================
  &__profile-wrapper {
    background: $bg-main;
    border-radius: 0.12rem;
    max-height: calc(var(--app-height, 100vh) - 1.4rem);
    overflow-y: auto;
    scrollbar-width: none; // Firefox
    -ms-overflow-style: none; // IE/Edge

    &::-webkit-scrollbar {
      display: none; // Chrome/Safari
    }
  }

  // 个人档案标题
  &__profile-title {
    font-size: 0.15rem;
    font-weight: 700;
    color: $text-dark;
    margin-bottom: 0.16rem;
    padding-bottom: 0.12rem;
    border-bottom: 1px solid $border-color;
  }

  // ==================== 第2步：确认目标 ====================

  // 返回上一步按钮 — 位于每步容器左上角
  &__back-btn {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 0.04rem;
    padding: 0.06rem 0.12rem;
    background: transparent;
    border: none;
    color: $text-middle;
    font-size: 0.13rem;
    cursor: pointer;
    border-radius: 0.04rem;
    transition: color 0.2s ease, background 0.2s ease;

    &:hover {
      color: $text-dark;
      background: $bg-middle;
    }

    svg {
      flex-shrink: 0;
    }
  }

  // 第2步整体容器
  &__step2 {
    width: 100%;
    max-width: 7rem;
    margin: 0 auto;
    position: relative;
    padding-top: 0.36rem;
  }

  // 对话区域
  &__chat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  // 对话行：头像 + 文字
  &__chat-row {
    display: flex;
    align-items: flex-start;
    gap: 0.04rem;
  }

  // 对话头像
  &__chat-avatar {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: $bg-main;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: $text-middle;

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

  // 对话文字
  &__chat-text {
    font-size: 0.15rem;
    font-weight: 600;
    color: $text-dark;
    line-height: 0.32rem;
  }

  // 正在输入指示器
  &__chat-typing {
    display: flex;
    align-items: center;
    gap: 0.05rem;
    background: $bg-main;
    border-radius: 0.16rem;
    padding: 0.1rem 0.06rem;

    span {
      width: 0.06rem;
      height: 0.06rem;
      border-radius: 50%;
      background: $text-light;
      animation: typingDot 1.4s infinite;

      &:nth-child(2) { animation-delay: 0.2s; }
      &:nth-child(3) { animation-delay: 0.4s; }
    }
  }

  @keyframes typingDot {
    0%, 60%, 100% { opacity: 0.3; transform: scale(1); }
    30% { opacity: 1; transform: scale(1.2); }
  }

  // ==================== 求职偏好卡片 ====================
  &__pref-card {
    background: $bg-main;
    border-radius: 0.12rem;
    padding: 0.24rem;
  }

  &__pref-desc {
    font-size: 0.13rem;
    color: $text-middle;
    margin-bottom: 0.16rem;
    line-height: 1.5;
  }

  &__pref-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.08rem;
    margin-bottom: 0.24rem;
  }

  &__pref-tag {
    padding: 0.06rem 0.16rem;
    background: $bg-white;
    border-radius: 0.04rem;
    font-size: 0.13rem;
    color: $text-dark;
  }

  &__pref-actions {
    display: flex;
    gap: 0.12rem;
  }

  &__pref-btn {
    flex: 1;
    height: 0.42rem;
    border-radius: 0.21rem;
    font-size: 0.14rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
    line-height: 0.42rem;
    text-align: center;
    padding: 0;

    &--edit {
      background: $border-color;
      color: $text-dark;

      &:hover { background: color.adjust($border-color, $lightness: -5%); }
    }

    &--confirm {
      background: $btn-dark;
      color: $bg-white;

      &:hover { background: $btn-dark-hover; }
    }
  }

  // ==================== 匹配岗位卡片 ====================
  &__match-card {
    background: $bg-main;
    border-radius: 0.12rem;
    padding: 0.24rem;

  }

  &__match-desc {
    font-size: 0.13rem;
    color: $text-dark;
    font-weight: 500;
    margin-bottom: 0.16rem;
    line-height: 1.6;
  }

  // 单个岗位项
  &__match-item {
    display: flex;
    align-items: center;
    background: $bg-white;
    border-radius: 0.1rem;
    padding: 0.16rem;
    margin-bottom: 0.1rem;

    &:last-of-type { margin-bottom: 0; }
  }

  &__match-info {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    flex: 1;
    min-width: 0;
  }

  // 公司图标
  &__match-icon {
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 0.06rem;
    background: $bg-main;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: $text-middle;

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

  &__match-detail {
    min-width: 0;
  }

  &__match-company {
    font-size: 0.14rem;
    font-weight: 600;
    color: $text-dark;
    line-height: 1.4;
  }

  &__match-position {
    font-size: 0.12rem;
    color: $text-middle;
    line-height: 1.4;
    margin-bottom: 0.06rem;
  }

  &__match-tags {
    display: flex;
    gap: 0.06rem;
    flex-wrap: wrap;
  }

  &__match-tag {
    font-size: 0.11rem;
    color: $text-middle;
    background: $bg-main;
    padding: 0.02rem 0.08rem;
    border-radius: 0.03rem;
  }

  // 匹配度环形
  &__match-score {
    position: relative;
    width: 0.44rem;
    height: 0.44rem;
    flex-shrink: 0;
    margin: 0 0.16rem;
  }

  &__match-ring {
    width: 100%;
    height: 100%;
  }

  &__match-score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.11rem;
    font-weight: 600;
    color: $text-dark;
  }

  // 点赞/踩按钮
  &__match-feedback {
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
    flex-shrink: 0;
  }

  &__match-fb-btn {
    width: 0.3rem;
    height: 0.3rem;
    border: none;
    background: transparent;
    border-radius: 0.06rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $text-light;
    transition: all 0.2s ease;
    padding: 0;

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

    &:hover { color: $text-middle; }

    &--active {
      color: $text-dark;
    }
  }

  // 不满意反馈输入框
  &__dislike-input {
    margin-top: 0.12rem;

    input {
      width: 100%;
      height: 0.4rem;
      border: 1px solid $border-color;
      border-radius: 0.08rem;
      padding: 0 0.14rem;
      font-size: 0.13rem;
      color: $text-dark;
      background: $bg-white;
      outline: none;
      box-sizing: border-box;

      &::placeholder { color: $text-light; }
      &:focus { border-color: $text-middle; }
    }
  }

  // 底部优化按钮
  &__step2-footer {
    display: flex;
    justify-content: center;
    margin-top: 0.08rem;
  }

  &__optimize-btn {
    height: 0.44rem;
    padding: 0 0.4rem;
    background: $btn-dark;
    color: $bg-white;
    border: none;
    border-radius: 0.22rem;
    font-size: 0.14rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    line-height: 0.44rem;

    &:hover { background: $btn-dark-hover; }
    &:active { transform: scale(0.98); }
  }

  // ==================== 第2步：新版面板样式 ====================
  &__step2-panel {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    border: 1px solid #F0F0F0;
    border-radius: 0.12rem;
    padding: 0.36rem 0.32rem;
    height: 100%;
    box-sizing: border-box;
  }

  // 第2步分区块
  &__step2-section {
    flex: 1;
  }

  // 第2步分区标题
  &__step2-section-title {
    font-size: 0.18rem;
    font-weight: 620;
    color: $text-dark;
    margin-bottom: 0.16rem;
  }

  // 第2步功能说明区域 — 全宽
  &__step2-faq {
    width: 100%;
    background: $bg-white;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.04);
    border-radius: 0.12rem;
    padding: 0.24rem 0.32rem;
  }

  &__step2-faq-title {
    font-size: 0.18rem;
    font-weight: 620;
    color: $accent;
    margin-bottom: 0.13rem;
  }

  &__step2-faq-item {
    border: 1px solid #F0F0F0;
    border-radius: 0.12rem;
    padding: 0.16rem 0.2rem;
    margin-bottom: 0.13rem;

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

  &__step2-faq-item-title {
    font-size: 0.14rem;
    font-weight: 620;
    color: $text-dark;
    margin-bottom: 0.08rem;
  }

  &__step2-faq-item-desc {
    font-size: 0.14rem;
    font-weight: 330;
    color: $text-middle;
  }

  // 第2步筛选器行
  &__step2-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.16rem;
    align-items: center;
  }

  // 第2步简历选择下拉
  &__step2-resume-select {
    width: 1.6rem;

    .el-input__wrapper {
      background: $bg-main;
      border-radius: 0.12rem;
      box-shadow: none !important;
      padding: 0.12rem 0.16rem;
    }
  }

  // 第2步自定义简历下拉
  &__step2-resume-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.12rem 0.16rem;
    min-width: 1.6rem;
    height: 0.43rem;
    background: #F3F4F6;
    border-radius: 0.12rem;
    cursor: pointer;
    box-sizing: border-box;
    user-select: none;
    transition: border-color 0.2s ease;
    width: 1.6rem;

    &:hover { border-color: darken($border-color, 10%); }
  }

  &__step2-resume-dropdown-text {
    font-size: 0.14rem;
    color: $text-dark;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 1.4rem;
  }

  &__step2-resume-dropdown-arrow {
    width: 0.12rem;
    height: 0.12rem;
    color: $text-middle;
    flex-shrink: 0;
    margin-left: 0.16rem;
  }

  &__step2-resume-menu {
    position: absolute;
    top: calc(100% + 0.04rem);
    left: 0;
    min-width: 100%;
    background: $bg-white;
    border: 1px solid $border-color;
    border-radius: 0.08rem;
    box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.1);
    z-index: 10;
    padding: 0.04rem 0;
    width: 1.6rem;
  }

  &__step2-resume-menu-item {
    padding: 0.08rem 0.14rem;
    font-size: 0.13rem;
    color: $text-dark;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease;
    width: 100%;

    &:hover { background: $bg-main; }

    &--active {
      color: $accent;
      font-weight: 500;
    }
  }

  // ==================== 第2步新增：求职偏好区域 ====================
  &__pref-section {
    background: $bg-white;
    border-radius: 0.12rem;
    padding: 0.24rem;
    margin-bottom: 0.2rem;
    border: 1px solid $border-color;
  }

  &__pref-section-title {
    font-size: 0.18rem;
    font-weight: 600;
    color: $text-dark;
    margin-bottom: 0.1rem;
  }

  &__pref-section-desc {
    font-size: 0.13rem;
    color: $text-middle;
    margin-bottom: 0.16rem;
    line-height: 1.5;
  }

  &__pref-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem;
    align-items: center;
  }

  &__pref-type-tag {
    padding: 0.06rem 0.16rem;
    background: $bg-main;
    border-radius: 0.04rem;
    font-size: 0.13rem;
    color: $text-dark;
    border: 1px solid $border-color;
    cursor: default;
  }

  // 招聘分类下拉选择
  &__pref-type-dropdown {
    position: relative;
    padding: 0.12rem 0.16rem;
    background: $bg-main;
    border-radius: 0.12rem;
    font-size: 0.14rem;
    color: $text-middle;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.16rem;
    min-width: 0.9rem;
    height: 0.43rem;
    box-sizing: border-box;
    user-select: none;
    transition: background 0.2s ease;

    &:hover { background: darken(#F3F4F6, 3%); }
  }

  &__pref-type-arrow {
    width: 0.12rem;
    height: 0.12rem;
    color: $text-middle;
  }

  &__pref-type-menu {
    position: absolute;
    top: calc(100% + 0.04rem);
    left: 0;
    min-width: 1.2rem;
    background: $bg-white;
    border: 1px solid $border-color;
    border-radius: 0.06rem;
    box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.1);
    z-index: 10;
    padding: 0.04rem 0;
  }

  &__pref-type-menu-item {
    padding: 0.08rem 0.14rem;
    font-size: 0.13rem;
    color: $text-dark;
    cursor: pointer;
    transition: background 0.15s ease;

    &:hover { background: $bg-main; }

    &--active {
      color: $accent;
      font-weight: 500;
    }
  }

  // ==================== 第2步新增：简历设置区域 ====================
  &__resume-section {
    background: $bg-white;
    border-radius: 0.12rem;
    padding: 0.24rem;
    border: 1px solid $border-color;
  }

  &__resume-sub-label {
    font-size: 0.13rem;
    color: $text-middle;
    margin-bottom: 0.12rem;
  }

  &__resume-select-row {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    margin-bottom: 0.2rem;
    padding: 0.1rem 0.14rem;
    border: 1px solid $border-color;
    border-radius: 0.08rem;
  }

  &__resume-check-icon {
    flex-shrink: 0;
    width: 0.16rem;
    height: 0.16rem;
    color: $text-middle;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  &__resume-select {
    flex: 1;

    .el-input__wrapper {
      box-shadow: none !important;
      padding: 0;
    }
  }

  &__resume-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.1rem 0;

    & + & {
      border-top: none;
    }
  }

  &__resume-switch-text {
    font-size: 0.13rem;
    color: $text-dark;
  }

  // ==================== 第3步：安装插件 ====================

  // 安装教程整体容器
  &__install-guide {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
  }

  // 单个步骤卡片
  &__install-card {
    border: 1px solid #F0F0F0;
    border-radius: 0.12rem;
    padding: 0.16rem 0.2rem;
  }

  // 卡片内部行布局 — 左右分栏
  &__install-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.24rem;
    flex-wrap: wrap;
  }

  // 左侧内容区
  &__install-card-left {
    flex: 1;
    min-width: 0;
  }

  // 左侧头部（序号 + 标题描述）
  &__install-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.12rem;
  }

  // 步骤序号徽标
  &__install-card-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.32rem;
    height: 0.32rem;
    background: #EDF9FA;
    border-radius: 0.08rem;
    font-size: 0.18rem;
    font-weight: 620;
    color: $accent;
    flex-shrink: 0;
    line-height: 1;
  }

  // 标题+描述容器
  &__install-card-info {
    flex: 1;
    min-width: 0;
  }

  // 步骤标题
  &__install-card-title {
    font-size: 0.18rem;
    font-weight: 620;
    color: $text-dark;
    margin: 0 0 0.04rem;
    line-height: 0.24rem;
  }

  // 步骤描述
  &__install-card-desc {
    font-size: 0.14rem;
    font-weight: 330;
    color: $text-middle;
    margin: 0;
    line-height: 0.19rem;
  }

  // 右侧区域
  &__install-card-right {
    flex-shrink: 0;
    width: 3.52rem;
  }

  // 右侧说明图片
  &__install-card-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.05rem;
  }

  // 步骤1：下载区域
  &__install-download-box {
    display: flex;
    align-items: center;
    padding: 0.04rem 0.04rem 0.04rem 0.16rem;
    gap: 0.16rem;
    background: $bg-main;
    border-radius: 0.12rem;
    height: 0.44rem;
    box-sizing: border-box;
  }

  &__install-download-name {
    font-size: 0.14rem;
    font-weight: 450;
    color: $text-dark;
    white-space: nowrap;
  }

  &__install-download-btn2 {
    display: flex;
    align-items: center;
    gap: 0.04rem;
    padding: 0.08rem 0.12rem;
    background: $accent;
    border: none;
    border-radius: 0.08rem;
    color: $bg-white;
    font-size: 0.14rem;
    font-weight: 620;
    cursor: pointer;
    transition: opacity 0.2s ease;
    white-space: nowrap;

    &:hover { opacity: 0.85; }

    svg { flex-shrink: 0; }
  }

  // 步骤2：浏览器地址链接行
  &__install-browser-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.12rem;
    margin-top: 0.16rem;
    padding-left: 0.44rem;
  }

  &__install-browser-link {
    display: flex;
    align-items: center;
    gap: 0.04rem;
    padding: 0.12rem 0.16rem;
    background: $bg-white;
    border: 1px solid #F0F0F0;
    border-radius: 0.08rem;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease;

    &:hover { border-color: $accent; }

    svg { flex-shrink: 0; }
  }

  &__install-browser-link-label {
    font-size: 0.14rem;
    font-weight: 450;
    color: $text-middle;
    margin-left: 0.04rem;
  }

  &__install-browser-link-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.04rem;
    margin-left: 0.16rem;
    font-size: 0.14rem;
    font-weight: 450;
    color: $accent;

    svg { color: $accent; }
  }

  // ==================== 设置完成页 ====================

  // 完成页容器 — 居中布局
  &__complete {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
  }

  // 完成页占位图标
  &__complete-icon {
    height: 1.2rem;
    margin-bottom: 0.32rem;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  // 完成页标题
  &__complete-title {
    font-size: 0.28rem;
    font-weight: 700;
    color: $text-dark;
    margin: 0 0 0.12rem;
  }

  // 完成页描述
  &__complete-desc {
    font-size: 0.16rem;
    color: $text-middle;
    margin-bottom: 0.4rem;
  }

  // 启用按钮
  &__complete-btn {
    padding: 0.12rem 0.36rem;
    background: $btn-dark;
    color: $bg-white;
    border: none;
    border-radius: 0.12rem;
    font-size: 0.15rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    width: 4rem;

    &:hover { background: $btn-dark-hover; }
    &:active { transform: scale(0.98); }
  }
}


// ==================== 求职助手正式内容区域 ====================
.agent-main {
  height: 100%;
  display: flex;

  // 左侧主区域（自适应撑满剩余宽度）
  &__left {
    flex: 1;
    min-width: 0;
    height: var(--app-height, 100vh);
    display: flex;
    flex-direction: column;
  }

  // 右侧面板（固定宽度3.6rem）
  &__right {
    width: 3.6rem;
    flex-shrink: 0;
    height: var(--app-height, 100vh);
    position: relative;
    overflow: hidden;
  }

  // 右侧覆盖层 — 绝对定位覆盖在设置面板之上
  &__right-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: $bg-white;
    border-radius: 0.12rem;
    overflow-y: auto;
  }

  // 右侧简历预览容器
  &__right-resume {
    background: $bg-white;
    border-radius: 0.12rem;
    padding: 0.24rem;
    height: 100%;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 4px;
    }

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

    &::-webkit-scrollbar-track {
      background: transparent;
    }
  }

  // ==================== 顶部固定设置栏 ====================
  &__top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.16rem 0.24rem;
    background: $bg-white;
    flex-shrink: 0;
  }

  // 左侧状态信息区
  &__top-bar-left {
    display: flex;
    align-items: center;
    gap: 0.12rem;
  }

  // 右侧按钮区
  &__top-bar-right {
    display: flex;
    align-items: center;
    gap: 0.16rem;
  }

  // 状态标签
  &__status-tag {
    font-size: 0.14rem;
    font-weight: 450;
    color: $text-middle;
    background: $bg-main;
    padding: 0.04rem 0.12rem;
    border-radius: 0.14rem;
    white-space: nowrap;
    flex-shrink: 0;

    // 准备就绪态 — 主题色
    &--ready {
      color: $accent;
      background: #EDF9FA;
    }

    // 投递中态 — 橙色
    &--applying {
      color: #F59E0B;
      background: #FFFBF5;
    }
  }

  // 状态提示文字
  &__status-text {
    font-size: 0.14rem;
    font-weight: 330;
    color: $text-middle;
    white-space: nowrap;
  }

  // 进度数字（投递中时的 x/y）
  &__status-progress {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.02rem 0.08rem;
    background: $bg-main;
    border-radius: 0.04rem;
    font-size: 0.14rem;
    font-weight: 600;
    color: $text-dark;
    margin-left: 0.04rem;
  }

  // 岗位数量（准备就绪时的加粗数字）
  &__status-count {
    font-weight: 600;
    color: $text-dark;
  }

  // 查看任务按钮
  &__task-btn {
    display: flex;
    align-items: center;
    gap: 0.04rem;
    padding: 0.08rem 0.12rem;
    border: 1px solid #F0F0F0;
    border-radius: 0.08rem;
    background: $bg-white;
    font-size: 0.14rem;
    font-weight: 620;
    color: $text-middle;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: 0.35rem;
    box-sizing: border-box;

    svg {
      width: 0.16rem;
      height: 0.16rem;
      flex-shrink: 0;
    }

    &:hover {
      border-color: $border-color;
      background: $bg-main;
    }
  }

  // 开始/暂停投递主操作按钮
  &__action-btn {
    display: flex;
    align-items: center;
    gap: 0.04rem;
    padding: 0.08rem 0.12rem;
    border: none;
    border-radius: 0.08rem;
    font-size: 0.14rem;
    font-weight: 620;
    color: $bg-white;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: 0.35rem;
    box-sizing: border-box;

    svg {
      width: 0.16rem;
      height: 0.16rem;
      flex-shrink: 0;
    }

    // 开始投递态 — 渐变绿色
    &--start {
      background: linear-gradient(128.17deg, #52CAD1 0%, #82D79B 100%);

      &:hover { opacity: 0.9; }
    }

    // 暂停投递态 — 橙色
    &--pause {
      background: #F59E0B;

      &:hover { opacity: 0.9; }
    }
  }

  // 右侧工具按钮区（包含查看任务按钮和下拉弹窗）
  &__tools {
    display: flex;
    align-items: center;
    gap: 0.06rem;
    flex-shrink: 0;
    position: relative;
  }

  // 待投递列表下拉弹窗
  &__task-dropdown {
    position: absolute;
    top: 0.36rem;
    right: 0;
    width: 5.1rem;
    background: $bg-white;
    border-radius: 0.12rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    z-index: 100;
    padding: 0.16rem;
  }

  // Tab 切换
  &__task-tabs {
    display: flex;
    gap: 0.2rem;
    margin-bottom: 0.14rem;
    border-bottom: 1px solid $border-color;
    padding-bottom: 0.1rem;
  }

  &__task-tab {
    font-size: 0.14rem;
    color: $text-middle;
    cursor: pointer;
    font-weight: 500;

    &--active {
      color: $text-dark;
      font-weight: 700;
    }
  }

  // 列表区域
  &__task-list {
    max-height: 2.5rem;
    overflow-y: auto;
  }

  &__task-empty {
    font-size: 0.12rem;
    color: $text-light;
    text-align: center;
    padding: 0.2rem 0;
  }

  // 单个岗位项
  &__task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.1rem 0;
    border-bottom: 1px solid $border-color;

    &:last-child {
      border-bottom: none;
    }
  }

  &__task-item-left {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    min-width: 0;
    flex: 1;
  }

  &__task-item-name {
    font-size: 0.13rem;
    font-weight: 600;
    color: $text-dark;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__task-item-tag {
    font-size: 0.11rem;
    color: $bg-white;
    background: $text-middle;
    padding: 0.02rem 0.08rem;
    border-radius: 0.03rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  &__task-item-right {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    flex-shrink: 0;
    margin-left: 0.1rem;
  }

  &__task-item-status {
    font-size: 0.12rem;
    color: $text-middle;

    &--done {
      color: $accent;
    }
  }

  &__task-item-remove {
    font-size: 0.16rem;
    color: $text-light;
    cursor: pointer;
    line-height: 1;

    &:hover {
      color: $text-dark;
    }
  }

  // 查看全部按钮
  &__task-view-all {
    text-align: center;
    font-size: 0.13rem;
    color: $text-middle;
    padding: 0.1rem 0 0;
    margin-top: 0.1rem;
    border-top: 1px solid $border-color;
    cursor: pointer;
    background: $bg-main;
    border-radius: 0.06rem;
    padding: 0.08rem;

    &:hover {
      color: $text-dark;
    }
  }

  // 工具按钮（已弃用，保留兼容）
  &__tool-btn {
    display: none;
  }

  // ==================== 中间内容区域 ====================
  &__chat-area {
    flex: 1;
    overflow-y: auto;
    padding: 0.16rem 0.24rem;
    margin-bottom: 0.1rem;

    // 自定义滚动条
    &::-webkit-scrollbar {
      width: 4px;
    }

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

    &::-webkit-scrollbar-track {
      background: transparent;
    }
  }

  // 投递进度列表
  &__progress-list {
    margin-top: 0.16rem;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.24rem;
    background: $bg-white;
    border-radius: 0.12rem;
  }

  // 进度列表标题
  &__progress-list-header {
    margin-bottom: 0.04rem;
  }

  &__progress-list-title {
    font-size: 0.18rem;
    font-weight: 600;
    color: $text-dark;
    line-height: 0.27rem;
  }

  &__progress-list-desc {
    font-size: 0.12rem;
    color: $text-middle;
    line-height: 0.18rem;
    margin-top: 0.04rem;
  }

  // 进度列表可滚动区域
  &__progress-list-body {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    max-height: 5rem;
    overflow-y: auto;
  }

  // ==================== 对话消息样式 ====================

  // 对话行
  &__chat-row {
    margin-bottom: 0.14rem;

    // 用户消息 — 右对齐
    &--user {
      display: flex;
      justify-content: flex-end;
    }
  }

  // 对话气泡
  &__chat-bubble {
    display: inline-block;
    max-width: 85%;
    font-size: 0.14rem;
    color: $text-dark;
    line-height: 1.7;
    padding: 0.1rem 0.16rem;
    border-radius: 0.1rem;
    background: $bg-white;
    word-break: break-word;

    // 用户消息气泡 — 深色背景
    &--user {
      background: $bg-main;
      border: 1px solid $border-color;
    }

    // AI 思考中的加载气泡
    &--loading {
      color: $text-middle;
      font-style: italic;
      display: flex;
      align-items: center;
      gap: 0.06rem;
    }
  }

  // AI 思考中的转圈加载图标
  &__loading-icon {
    color: $accent;
    font-size: 0.16rem;
    vertical-align: middle;
  }

  // ==================== 底部固定输入框 ====================
  &__input-bar {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.12rem 0.16rem;
    background: $bg-white;
    border-radius: 0.1rem;
    border: 1px solid $border-color;
    flex-shrink: 0;
  }

  // 输入框
  &__input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.13rem;
    color: $text-dark;
    background: transparent;
    line-height: 0.3rem;

    &::placeholder {
      color: $text-light;
    }
  }

  // 发送按钮
  &__send-btn {
    width: 0.32rem;
    height: 0.32rem;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $text-dark;
    flex-shrink: 0;
    transition: all 0.2s ease;

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

    &:hover {
      color: $accent;
    }
  }
}

// ==================== 简历预览抽屉 ====================

/* 遮罩层 */
.agent-resume-drawer-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--app-height, 100vh);
  background: rgba(0, 0, 0, 0.3);
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
}

/* 抽屉主体 */
.agent-resume-drawer {
  width: 9.6rem;
  max-width: 9.6rem;
  height: var(--app-height, 100vh);
  background: $bg-white;
  display: flex;
  flex-direction: column;
  font-size: 0.14rem;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);

  /* 顶部标题栏 */
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.24rem;
    height: 0.64rem;
    box-sizing: border-box;
    border-bottom: 1px solid $border-color;
  }

  &__header-left {
    display: flex;
    align-items: center;
    gap: 0.16rem;
  }

  /* 关闭按钮 */
  &__close {
    width: 0.24rem;
    height: 0.24rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__close-icon {
    width: 0.24rem;
    height: 0.24rem;
    color: $text-middle;
  }

  /* 标题文字 */
  &__title {
    font-size: 0.18rem;
    font-weight: 620;
    color: $text-dark;
    line-height: 0.24rem;
  }

  /* 匹配分提示区域 */
  &__score-info {
    display: flex;
    align-items: center;
    gap: 0.16rem;
  }

  &__score-tip {
    font-size: 0.13rem;
    font-weight: 400;
    color: $text-dark;
    line-height: 0.2rem;
    background: #F0FAFB;
    border-radius: 0.08rem;
    padding: 0.06rem 0.12rem;
  }

  &__score-old {
    font-weight: 630;
    color: $accent;
  }

  &__score-new {
    font-weight: 630;
    color: $accent;
  }

  /* 匹配度环 */
  &__score-ring {
    position: relative;
    width: 0.56rem;
    height: 0.56rem;
    flex-shrink: 0;
  }

  &__ring-svg {
    width: 100%;
    height: 100%;
  }

  &__ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
  }

  &__ring-number {
    font-size: 0.16rem;
    font-weight: 630;
    color: $text-dark;
  }

  &__ring-label {
    font-size: 0.08rem;
    font-weight: 400;
    color: $text-middle;
    margin-top: 0.02rem;
  }

  /* 内容区域（可滚动） */
  &__body {
    flex: 1;
    overflow-y: auto;
    padding: 0.24rem;
  }
}

/* 抽屉动画 */
.agent-resume-drawer-enter-active,
.agent-resume-drawer-leave-active {
  transition: opacity 0.3s ease;

  .agent-resume-drawer {
    transition: transform 0.3s ease;
  }
}

.agent-resume-drawer-enter-from,
.agent-resume-drawer-leave-to {
  opacity: 0;

  .agent-resume-drawer {
    transform: translateX(100%);
  }
}

// ==================== 插件安装确认弹窗 ====================

/* 遮罩层 */
.agent-page__install-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

/* 弹窗主体 */
.agent-page__install-dialog {
  position: relative;
  width: 3.84rem;
  background: $bg-white;
  border: 1px solid #F0F0F0;
  box-shadow: 0 0 0.16rem rgba(0, 0, 0, 0.05);
  border-radius: 0.12rem;
  padding: 0.24rem 0.32rem 0.32rem;
  box-sizing: border-box;
  overflow: hidden;
}

/* 渐变背景 */
.agent-page__install-dialog-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #EDF9FA 0%, #FFFFFF 20.63%);
  border-radius: 0.12rem;
  pointer-events: none;
}

/* 关闭按钮 */
.agent-page__install-dialog-close {
  position: absolute;
  top: 0.24rem;
  right: 0.24rem;
  width: 0.24rem;
  height: 0.24rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;

  &:hover {
    opacity: 0.7;
  }
}

/* 标题 */
.agent-page__install-dialog-title {
  position: relative;
  font-size: 0.18rem;
  font-weight: 520;
  color: $text-dark;
  text-align: center;
  margin: 0 0 0.2rem 0;
  line-height: 0.24rem;
}

/* 描述文字 */
.agent-page__install-dialog-desc {
  position: relative;
  font-size: 0.16rem;
  font-weight: 330;
  color: $text-middle;
  text-align: center;
  line-height: 0.28rem;
  margin: 0 0 0.24rem 0;
}

/* 底部按钮容器 */
.agent-page__install-dialog-btns {
  position: relative;
  display: flex;
  gap: 0.08rem;
}

/* 按钮通用 */
.agent-page__install-dialog-btn {
  flex: 1;
  height: 0.37rem;
  border-radius: 0.08rem;
  font-size: 0.14rem;
  font-weight: 450;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;

  /* 描边按钮 — 还未安装 */
  &--outline {
    background: $bg-white;
    border: 1px solid $accent;
    color: $accent;

    &:hover {
      background: $theme-color;
    }
  }

  /* 实心按钮 — 已安装，继续 */
  &--primary {
    background: $accent;
    border: none;
    color: #FFFFFF;

    &:hover {
      background: $accent-hover;
    }
  }
}