@use '../variables' as *;

// ==================== 岗位专属简历定制弹窗 ====================
.job-resume-custom-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--app-height, 100vh);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.14rem;

  // 遮罩层
  &__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: $overlay-bg;
  }

  // 弹窗面板
  &__panel {
    position: relative;
    background: $bg-white;
    border-radius: 0.16rem;
    width: 5.6rem;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0.36rem 0.4rem;
    box-sizing: border-box;
  }

  // 标题栏
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.28rem;
  }

  &__title {
    font-size: 0.22rem;
    font-weight: 700;
    color: $text-dark;
    margin: 0;
    line-height: 1.2;
  }

  &__close-btn {
    width: 0.3rem;
    height: 0.3rem;
    border: none;
    background: none;
    color: $text-dark;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
    flex-shrink: 0;

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

  &__close-icon {
    width: 0.16rem;
    height: 0.16rem;
  }

  // 匹配度提示条
  &__tip-bar {
    background: $bg-main;
    border-radius: 0.08rem;
    padding: 0.14rem 0.2rem;
    font-size: 0.13rem;
    color: $text-middle;
    text-align: center;
    margin-bottom: 0.3rem;
    line-height: 1.4;
  }

  // 岗位信息卡片
  &__job-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.3rem;
    padding: 0 0.04rem;
  }

  &__job-left {
    display: flex;
    align-items: center;
    gap: 0.14rem;
  }

  &__company-icon {
    width: 0.44rem;
    height: 0.44rem;
    border-radius: 0.1rem;
    background: $bg-main;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid $border-color;
    flex-shrink: 0;
  }

  &__company-logo-img {
    width: 100%;
    height: 100%;
    border-radius: 0.1rem;
    object-fit: cover;
  }

  &__company-svg {
    width: 0.24rem;
    height: 0.24rem;
    color: $text-light;
  }

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

  &__job-title {
    font-size: 0.16rem;
    font-weight: 600;
    color: $text-dark;
    line-height: 1.2;
  }

  &__job-sub {
    font-size: 0.12rem;
    color: $text-light;
    line-height: 1.2;
  }

  // 匹配度分数
  &__match-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
  }

  &__match-ring {
    position: relative;
    width: 0.56rem;
    height: 0.56rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__ring-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &__match-score {
    font-size: 0.18rem;
    font-weight: 700;
    color: #52CAD1;
    position: relative;
    z-index: 1;
  }

  &__match-label {
    font-size: 0.12rem;
    color: $bg-white;
    margin-top: 0.04rem;
    background: $text-dark;
    border-radius: 0.04rem;
    padding: 0.02rem 0.08rem;
    line-height: 0.16rem;
  }

  // 缺少技能区域
  &__skills-section {
    margin-bottom: 0.36rem;
    padding: 0 0.04rem;
  }

  &__skills-title {
    font-size: 0.15rem;
    font-weight: 600;
    color: $text-dark;
    margin: 0 0 0.14rem 0;
    line-height: 1.2;
  }

  &__skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem;
  }

  &__skill-tag {
    font-size: 0.13rem;
    color: $text-dark;
    background: $bg-main;
    border: 1px solid $border-color;
    border-radius: 0.06rem;
    padding: 0.07rem 0.18rem;
    line-height: 1.2;
  }

  // 底部按钮区域
  &__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.14rem;
  }

  &__primary-btn {
    width: 100%;
    height: 0.48rem;
    background: $btn-dark;
    color: $bg-white;
    border: none;
    border-radius: 0.08rem;
    font-size: 0.15rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;

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

  &__skip-link {
    font-size: 0.13rem;
    color: $text-middle;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s;

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

  // 占位内容（步骤3-4待开发）
  &__placeholder {
    font-size: 0.14rem;
    color: $text-light;
    text-align: center;
    padding: 0.6rem 0;
  }

  // 标题栏占位（步骤2+用于左右对称布局）
  &__header-placeholder {
    width: 0.3rem;
    flex-shrink: 0;
  }

  // ==================== 步骤指示器 ====================
  &__steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.02rem;
  }

  &__step {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    font-size: 0.14rem;
    font-weight: 600;
    color: $text-middle;
  }

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

  &__step-num {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: $bg-main;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.14rem;
    font-weight: 450;
    color: $text-middle;
    line-height: 1;
  }

  &__step--active &__step-num {
    background: $accent;
    color: $bg-white;
    font-weight: 600;
  }

  // 步骤之间的连接横线
  &__step-line {
    width: 0.935rem;
    height: 0.02rem;
    background: #E5E7EB;
    margin: 0 0.16rem;
  }

  // ==================== 差距分析头部（新版） ====================
  &__gap-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.28rem;
  }

  &__gap-left {
    flex: 1;
    min-width: 0;
  }

  &__gap-title {
    font-size: 0.24rem;
    font-weight: 630;
    color: $text-dark;
    margin: 0 0 0.08rem 0;
    line-height: 0.32rem;
  }

  // 匹配度高亮文字（品牌色）
  &__gap-title-highlight {
    color: #FE6D52;
  }

  &__gap-subtitle {
    font-size: 0.14rem;
    font-weight: 330;
    color: $text-middle;
    margin: 0;
    line-height: 0.19rem;
  }

  &__gap-score-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    margin-left: 0.2rem;
  }

  // 匹配度分数圆环
  &__score-circle {
    position: relative;
    width: 0.72rem;
    height: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__score-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &__score-num {
    font-size: 0.24rem;
    font-weight: 630;
    color: $accent;
    position: relative;
    z-index: 1;
  }

  // 匹配度标签（底部黑底白字）
  &__score-tag {
    font-size: 0.14rem;
    font-weight: 330;
    color: $bg-white;
    background: $text-dark;
    border-radius: 0.04rem;
    padding: 0.02rem 0.08rem;
    margin-top: -0.1rem;
    line-height: 0.19rem;
  }

  // ==================== 通用区域标题 ====================
  &__section {
    margin-bottom: 0.28rem;
  }

  &__section-title {
    font-size: 0.18rem;
    font-weight: 600;
    color: $text-dark;
    margin: 0 0 0.16rem 0;
    line-height: 0.24rem;
  }

  // ==================== 简历选择下拉框 ====================
  &__resume-select-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.12rem 0.16rem;
    background: $bg-main;
    border-radius: 0.12rem;
    cursor: pointer;
    position: relative;
    width: 1.6rem;
  }

  &__resume-select-name {
    font-size: 0.14rem;
    font-weight: 600;
    color: $text-middle;
    line-height: 0.19rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__resume-select-arrow {
    width: 0.14rem;
    height: 0.14rem;
    color: $text-middle;
    flex-shrink: 0;
    margin-left: 0.16rem;
  }

  // ==================== 岗位概览卡片 ====================
  &__overview-card {
    border: 1px solid #F0F0F0;
    border-radius: 0.12rem;
    padding: 0.16rem 0.2rem;
  }

  &__overview-title {
    font-size: 0.14rem;
    font-weight: 600;
    color: $text-dark;
    line-height: 0.19rem;
    margin-bottom: 0.04rem;
  }

  &__overview-sub {
    font-size: 0.14rem;
    font-weight: 400;
    color: $text-middle;
    line-height: 0.19rem;
    margin-bottom: 0.08rem;
  }

  &__overview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.04rem;
  }

  &__overview-tag {
    font-size: 0.12rem;
    font-weight: 400;
    color: $text-middle;
    background: $bg-main;
    border-radius: 0.04rem;
    padding: 0.04rem 0.06rem;
    line-height: 0.18rem;
  }

  // ==================== 差距分析列表 ====================
  &__gap-list {
    display: flex;
    flex-direction: column;
    gap: 0.13rem;
  }

  &__gap-item {
    display: flex;
    align-items: center;
    padding: 0.16rem 0.2rem;
    border: 1px solid #F0F0F0;
    border-radius: 0.12rem;
    gap: 0.12rem;
  }

  // 序号圆圈
  &__gap-item-num {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: $accent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    span {
      font-size: 0.14rem;
      font-weight: 600;
      color: $bg-white;
      line-height: 0.19rem;
    }
  }

  &__gap-item-content {
    flex: 1;
    min-width: 0;
  }

  &__gap-item-title {
    font-size: 0.14rem;
    font-weight: 620;
    color: $text-dark;
    line-height: 0.19rem;
    margin-bottom: 0.04rem;
  }

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

  // ==================== 简历下拉选项（通用） ====================

  &__resume-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.04rem;
    background: $bg-white;
    border: 1px solid $border-color;
    border-radius: 0.08rem;
    box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.1);
    z-index: 10;
    min-width: 1.6rem;
    overflow: hidden;
  }

  &__resume-option {
    padding: 0.1rem 0.14rem;
    font-size: 0.12rem;
    color: $text-dark;
    cursor: pointer;
    transition: background 0.15s;

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

  &__resume-option--active {
    color: $accent;
    font-weight: 500;
    background: $theme-color;
  }

  // ==================== 步骤三：定制简历（v2 新版上下布局） ====================

  // 定制简历整体容器（纵向布局）
  &__custom-v2 {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
  }

  // 每个区块
  &__custom-section {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
  }

  // 区块头部（标题+描述）
  &__custom-section-header {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
  }

  // 区块标题
  &__custom-section-title {
    font-size: 0.18rem;
    font-weight: 600;
    color: #101828;
    margin: 0;
    line-height: 0.24rem;
  }

  // 区块描述
  &__custom-section-desc {
    font-size: 0.14rem;
    font-weight: 400;
    color: #99A1AF;
    margin: 0;
    line-height: 0.19rem;
  }

  // 卡片选项列表
  &__custom-cards {
    display: flex;
    flex-direction: column;
    gap: 0.13rem;
  }

  // 单个选项卡片
  &__custom-card {
    display: flex;
    align-items: center;
    padding: 0.16rem 0.2rem;
    gap: 0.1rem;
    border: 1px solid #F0F0F0;
    border-radius: 0.12rem;
    cursor: pointer;
    transition: all 0.2s;
    background: $bg-white;

    &:hover {
      border-color: transparent;
      background: #F3F4F6;
    }
  }

  // 选中态：无背景填充，仅品牌色边框
  &__custom-card--checked {
    border-color: #52CAD1;
    background: $bg-white;
  }

  // 隐藏原生 checkbox
  &__custom-card-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  // 圆形复选框容器
  &__custom-card-check {
    width: 0.2rem;
    height: 0.2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // 圆形复选框SVG
  &__custom-card-check-svg {
    width: 0.2rem;
    height: 0.2rem;
  }

  // 文字内容区域
  &__custom-card-text {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    flex: 1;
    min-width: 0;
  }

  // 选项主文字（加粗）
  &__custom-card-label {
    font-size: 0.14rem;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 0.19rem;
    white-space: nowrap;
  }

  // 选项说明文字（灰色小字）
  &__custom-card-tip {
    font-size: 0.12rem;
    font-weight: 400;
    color: #6A7282;
    line-height: 0.16rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  // ==================== 底部双按钮布局（上一步 + 下一步） ====================
  &__footer-btns {
    display: flex;
    align-items: center;
    gap: 0.24rem;
  }

  // 上一步按钮（品牌色边框 + 品牌色文字）
  &__prev-btn {
    flex: 1;
    height: 0.45rem;
    background: $bg-white;
    border: 1px solid #52CAD1;
    border-radius: 0.12rem;
    font-size: 0.14rem;
    font-weight: 600;
    color: #52CAD1;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      background: #F6FCFC;
    }
  }

  // 下一步按钮（品牌色填充 + 白色文字）
  &__next-btn {
    flex: 1;
    height: 0.45rem;
    background: #52CAD1;
    border: none;
    border-radius: 0.12rem;
    font-size: 0.14rem;
    font-weight: 600;
    color: $bg-white;
    cursor: pointer;
    transition: background 0.2s;

    &:hover {
      background: #47b8bf;
    }
  }

  // ==================== 抽屉模式（步骤2+） ====================

  // 抽屉模式下，遮罩和布局调整为右侧对齐
  &--drawer {
    justify-content: flex-end;
  }

  // 右侧抽屉面板
  &__drawer {
    position: relative;
    background: $bg-white;
    width: 10.4rem;
    height: var(--app-height, 100vh);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
  }

  // 抽屉头部
  &__drawer-header {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    padding: 0.2rem 0.1rem;
    flex-shrink: 0;
  }

  &__drawer-title {
    font-size: 0.15rem;
    font-weight: 600;
    color: $text-dark;
    margin: 0;
    line-height: 1.2;
  }

  // 抽屉内容区（可滚动）
  &__drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.28rem 0.2rem;
  }

  // 抽屉底部按钮
  &__drawer-footer {
    padding: 0.2rem 0.32rem;
    border-top: 1px solid $border-color;
    flex-shrink: 0;
  }

  // ==================== 步骤四：返回按钮 ====================
  // 顶部下载简历按钮区域
  &__top-download {
    position: absolute;
    top: 0.7rem;
    left: 0.2rem;
    z-index: 5;
  }

  &__top-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.04rem;
    width: 1.04rem;
    height: 0.36rem;
    background: $bg-white;
    border: 1px solid #52CAD1;
    border-radius: 0.08rem;
    font-size: 0.13rem;
    font-weight: 500;
    color: #52CAD1;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      background: #F6FCFC;
    }
  }

  &__top-download-icon {
    width: 0.14rem;
    height: 0.14rem;
    flex-shrink: 0;
  }

  // 顶部下载下拉菜单（向下弹出）
  &__top-download-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.06rem;
    width: 1.04rem;
    background: $bg-white;
    border: 1px solid $border-color;
    border-radius: 0.08rem;
    box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 10;
  }

  &__top-download-option {
    display: block;
    width: 100%;
    padding: 0.1rem 0;
    font-size: 0.12rem;
    color: $text-dark;
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;

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

    & + & {
      border-top: 1px solid $border-color;
    }
  }

  // ==================== 步骤四：预览布局 ====================
  &__preview {
    display: flex;
    height: 100%;
    min-height: 0;
  }

  // 左侧简历预览区
  &__preview-left {
    flex: 1;
    overflow-y: auto;
    background: $bg-white;
    border-bottom: 1px solid $border-color;
    min-width: 0;
  }

  // 右侧AI帮写/编辑区
  &__preview-right {
    width: 3.6rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  // Tab 切换栏（胶囊风格）
  &__preview-tabs {
    display: flex;
    align-items: center;
    padding: 0.09rem 0.16rem;
    flex-shrink: 0;
    gap: 0.12rem;
    justify-content: space-between;
  }

  &__preview-tab {
    width: 1.48rem;
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: 0.16rem;
    font-weight: 500;
    color: $text-light;
    background: none;
    border: none;
    border-radius: 0.28rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;

    &--active {
      color: $bg-white;
      background: #52CAD1;
    }

    &:hover:not(&--active) {
      color: $text-dark;
      background: $bg-main;
    }
  }

  // AI帮写内容区
  &__preview-ai {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: $bg-white;
  }

  // 匹配度提升整体容器（左卡片+右圆环）
  &__ai-congrats-wrap {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    padding: 0.16rem;
    flex-shrink: 0;
  }

  // 左侧绿色边框卡片
  &__ai-congrats {
    flex: 1;
    min-width: 0;
    padding: 0.16rem;
    background: #F4FBFB;
    border: 1px solid $accent;
    border-radius: 0.12rem;
  }

  &__ai-congrats-title {
    font-size: 0.14rem;
    font-weight: 450;
    color: $text-dark;
    margin: 0;
    line-height: 0.26rem;
  }

  // 分数加粗黑色
  &__ai-congrats-bold {
    font-weight: 700;
    color: $accent;
    font-size: 0.18rem;
  }

  // 右侧圆环+标签区域（卡片外面）
  &__ai-congrats-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
  }

  // 改写说明区域（卡片外平铺）
  &__ai-optimize-detail {
    padding: 0 0.16rem;
    flex-shrink: 0;
  }

  &__ai-optimize-subtitle {
    font-size: 0.14rem;
    font-weight: 600;
    color: $text-light;
    margin: 0 0 0.12rem 0;
    line-height: 0.19rem;
  }

  &__ai-optimize-list {
    margin: 0;
  }

  &__ai-optimize-item {
    font-size: 0.14rem;
    font-weight: 330;
    color: $text-light;
    margin: 0 0 0.08rem 0;
    line-height: 0.22rem;
  }

  // 大号匹配度环（设计稿60x60，粗线圈）
  &__match-ring--large {
    width: 0.66rem;
    height: 0.66rem;
  }

  // 匹配度分数文字
  &__match-score {
    font-size: 0.18rem;
    font-weight: 700;
    color: #52CAD1;
    position: relative;
    z-index: 1;
  }

  // 高匹配标签（黑底白字圆角）
  &__match-label--high {
    background: $text-dark;
    color: $bg-white;
    font-size: 0.12rem;
    font-weight: 400;
    border-radius: 0.04rem;
    padding: 0.02rem 0.08rem;
    margin-top: -0.12rem;
    line-height: 0.16rem;
    position: relative;
    z-index: 10;
  }

  // 快捷操作按钮区（用户消息风格，右对齐）
  &__ai-quick-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.08rem;
    padding: 0.12rem 0.16rem;
    flex-shrink: 0;
  }

  // 无左右padding的快捷操作（prl0类复写）
  &__ai-quick-actions.prl0 {
    padding-left: 0.16rem;
    padding-right: 0.16rem;
  }

  &__ai-quick-btn {
    background: #52CAD1;
    border: none;
    border-radius: 0.12rem 0.04rem 0.12rem 0.12rem;
    padding: 0.08rem 0.12rem;
    font-size: 0.14rem;
    font-weight: 305;
    color: $bg-white;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    max-width: 2.38rem;
    line-height: 0.24rem;
    box-shadow: 0 0.01rem 0.04rem rgba(0, 0, 0, 0.04);

    &:hover {
      background: #47b8bf;
    }
  }

  // AI聊天消息区
  &__ai-messages {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }

  &__ai-msg {
    display: flex;

    &--ai {
      justify-content: flex-start;
    }

    &--user {
      justify-content: flex-end;
    }
  }

  &__ai-msg-bubble {
    border-radius: 0.12rem;
    padding: 0.08rem 0.12rem;
    font-size: 0.14rem;
    font-weight: 330;
    line-height: 0.24rem;
    max-width: 2.38rem;
  }

  // AI消息气泡（品牌色边框+阴影）
  &__ai-msg--ai &__ai-msg-bubble {
    background: $bg-white;
    color: $text-dark;
    border: 1px solid #AEE6EA;
    box-shadow: 0 0.02rem 0.04rem rgba(82, 202, 209, 0.1);
    border-radius: 0.04rem 0.12rem 0.12rem 0.12rem;
  }

  // 用户消息气泡（品牌色填充）
  &__ai-msg--user &__ai-msg-bubble {
    background: #52CAD1;
    color: $bg-white;
    border-radius: 0.12rem 0.04rem 0.12rem 0.12rem;
    box-shadow: 0 0.01rem 0.04rem rgba(0, 0, 0, 0.04);
  }

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

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

  // 消息包裹容器（含撤销气泡）
  &__ai-msg-wrap {
    margin-bottom: 0.1rem;
  }

  // 撤销修改气泡区域
  &__ai-rollback {
    display: flex;
    justify-content: flex-start;
    padding: 0.06rem 0 0 0;
  }

  // 撤销修改按钮
  &__ai-rollback-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.04rem;
    background: $bg-white;
    border: 1px solid $accent;
    border-radius: 0.14rem;
    padding: 0.05rem 0.12rem;
    font-size: 0.11rem;
    color: $accent;
    cursor: pointer;
    transition: all 0.2s;

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

  // 撤销修改图标
  &__ai-rollback-icon {
    width: 0.13rem;
    height: 0.13rem;
    flex-shrink: 0;
  }

  // 已撤销状态文字
  &__ai-rollback-done {
    display: inline-flex;
    align-items: center;
    gap: 0.04rem;
    font-size: 0.11rem;
    color: $text-middle;
    padding: 0.05rem 0.12rem;
    background: $bg-main;
    border-radius: 0.14rem;
    border: 1px solid $border-color;
  }

  // ==================== 撤销确认弹窗 ====================
  &__rollback-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--app-height, 100vh);
    background: $overlay-bg;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__rollback-confirm {
    background: $bg-white;
    border-radius: 0.12rem;
    padding: 0.32rem 0.36rem;
    min-width: 3.2rem;
    text-align: center;
    box-shadow: 0 0.08rem 0.24rem rgba(0, 0, 0, 0.15);
  }

  &__rollback-confirm-text {
    font-size: 0.15rem;
    color: $text-dark;
    margin: 0 0 0.28rem 0;
    line-height: 1.5;
  }

  &__rollback-confirm-actions {
    display: flex;
    gap: 0.12rem;
    justify-content: center;
  }

  &__rollback-confirm-cancel {
    flex: 1;
    height: 0.4rem;
    background: $bg-white;
    border: 1px solid $border-color;
    border-radius: 0.2rem;
    font-size: 0.14rem;
    color: $text-dark;
    cursor: pointer;
    transition: all 0.2s;

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

  &__rollback-confirm-ok {
    flex: 1;
    height: 0.4rem;
    background: $btn-dark;
    border: none;
    border-radius: 0.2rem;
    font-size: 0.14rem;
    color: $bg-white;
    cursor: pointer;
    transition: background 0.2s;

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

  // AI输入框区域
  &__ai-input-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.08rem 0.12rem;
    margin: 0.12rem 0.16rem;
    gap: 0.08rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #AEE6EA;
    border-radius: 0.12rem;
    backdrop-filter: blur(12px);
    flex-shrink: 0;
  }

  &__ai-input {
    flex: 1;
    background: none;
    border: none;
    padding: 0.04rem 0;
    font-size: 0.12rem;
    color: $text-dark;
    outline: none;
    line-height: 0.15rem;

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

  &__ai-send-btn {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 0.08rem;
    background: #52CAD1;
    border: none;
    color: $bg-white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;

    &:hover {
      background: #47b8bf;
    }
  }

  &__ai-send-icon {
    width: 0.2rem;
    height: 0.2rem;
  }

  // 编辑tab内容区
  &__preview-edit {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  // ==================== 步骤四：底部按钮区 ====================
  &__preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.32rem;
    border-top: 1px solid $border-color;
    flex-shrink: 0;
    gap: 0.2rem;
  }

  // 下载简历按钮容器
  &__download-wrap {
    position: relative;
    flex: 1;
  }

  &__download-btn {
    width: 100%;
    height: 0.48rem;
    background: $bg-white;
    color: $text-dark;
    border: 1px solid $border-color;
    border-radius: 0.24rem;
    font-size: 0.15rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;

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

  // 下载下拉菜单（向上弹出）
  &__download-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 0.06rem;
    background: $bg-white;
    border: 1px solid $border-color;
    border-radius: 0.08rem;
    box-shadow: 0 -0.04rem 0.12rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 10;
  }

  &__download-option {
    display: block;
    width: 100%;
    padding: 0.12rem 0;
    font-size: 0.13rem;
    color: $text-dark;
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;

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

    & + & {
      border-top: 1px solid $border-color;
    }
  }

  // 步骤三底部：上一步按钮（品牌色边框样式）
  &__footer-prev-btn {
    flex: 1;
    height: 0.48rem;
    background: $bg-white;
    border: 1px solid #52CAD1;
    border-radius: 0.08rem;
    font-size: 0.15rem;
    font-weight: 500;
    color: #52CAD1;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      background: #F6FCFC;
    }
  }

  // 立即去投递按钮
  &__submit-btn {
    flex: 1;
    height: 0.48rem;
    background: $btn-dark;
    color: $bg-white;
    border: none;
    border-radius: 0.08rem;
    font-size: 0.15rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;

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

// 右侧滑入动画
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}