offerpai_web/src/assets/styles/components/job-resume-custom-dialog.scss

@use '../variables' as *;

// ==================== 岗位专属简历定制弹窗 ====================
.job-resume-custom-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  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: $text-dark;
    position: relative;
    z-index: 1;
  }

  &__match-label {
    font-size: 0.1rem;
    color: $text-middle;
    margin-top: 0.04rem;
    background: $bg-main;
    border-radius: 0.04rem;
    padding: 0.02rem 0.08rem;
  }

  // 缺少技能区域
  &__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.24rem;
    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;
    gap: 0.5rem;
    margin-bottom: 0.32rem;
  }

  &__step {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    font-size: 0.13rem;
    color: $text-light;
  }

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

  &__step-num {
    width: 0.22rem;
    height: 0.22rem;
    border-radius: 50%;
    background: $bg-main;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.11rem;
    font-weight: 600;
    line-height: 1;
  }

  &__step--active &__step-num {
    background: $text-dark;
    color: $bg-white;
  }

  // ==================== 差距分析头部 ====================
  &__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.2rem;
    font-weight: 700;
    color: $text-dark;
    margin: 0 0 0.1rem 0;
    line-height: 1.3;
  }

  &__gap-warn {
    display: flex;
    align-items: flex-start;
    gap: 0.06rem;
    font-size: 0.12rem;
    color: $text-middle;
    line-height: 1.5;
  }

  &__warn-icon {
    width: 0.14rem;
    height: 0.14rem;
    flex-shrink: 0;
    margin-top: 0.02rem;
    color: $text-middle;
  }

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

  // ==================== 对比卡片表格 ====================
  &__gap-table {
    margin-bottom: 0.36rem;
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
  }

  &__gap-row {
    display: flex;
    gap: 0.06rem;
  }

  &__gap-cell {
    flex: 1;
    padding: 0.18rem 0.16rem;
    font-size: 0.13rem;
    color: $text-dark;
    background: $bg-main;
    border-radius: 0.08rem;
    display: flex;
    align-items: center;
    min-height: 0.6rem;
  }

  &__gap-cell--label {
    flex: 0 0 1.2rem;
    font-weight: 600;
    justify-content: flex-start;
  }

  &__gap-cell-title {
    font-size: 0.18rem;
    font-weight: 700;
  }

  // 关键词列横跨两列
  &__gap-cell--keywords {
    flex: 2.06;
  }

  // 概览行岗位信息
  &__gap-job-info {
    display: flex;
    align-items: center;
    gap: 0.12rem;
  }

  &__gap-company-icon {
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 0.06rem;
    background: $bg-white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  &__gap-company-logo {
    width: 100%;
    height: 100%;
    border-radius: 0.06rem;
    object-fit: cover;
  }

  &__gap-company-svg {
    width: 0.2rem;
    height: 0.2rem;
    color: $text-dark;
  }

  &__gap-job-text {
    display: flex;
    flex-direction: column;
    gap: 0.04rem;
  }

  &__gap-job-title {
    font-size: 0.14rem;
    font-weight: 600;
    color: $text-dark;
    line-height: 1.2;
  }

  &__gap-job-sub {
    font-size: 0.11rem;
    color: $text-light;
    line-height: 1.2;
  }

  // 岗位名称/简历目标值
  &__gap-value {
    font-size: 0.14rem;
    font-weight: 500;
    color: $text-dark;
  }

  // ==================== 简历选择器 ====================
  &__resume-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
  }

  &__resume-info {
    display: flex;
    align-items: center;
    gap: 0.1rem;
  }

  &__resume-file-icon {
    width: 0.2rem;
    height: 0.2rem;
    color: $text-dark;
    flex-shrink: 0;
  }

  &__resume-text {
    display: flex;
    flex-direction: column;
    gap: 0.02rem;
  }

  &__resume-label {
    font-size: 0.1rem;
    color: $text-light;
    line-height: 1.2;
  }

  &__resume-name {
    font-size: 0.12rem;
    color: $text-dark;
    font-weight: 500;
    line-height: 1.2;
  }

  &__resume-select-btn {
    display: flex;
    align-items: center;
    gap: 0.04rem;
    background: $bg-white;
    border: 1px solid $border-color;
    border-radius: 0.14rem;
    padding: 0.05rem 0.12rem;
    font-size: 0.11rem;
    color: $text-dark;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;

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

  &__dropdown-arrow {
    width: 0.1rem;
    height: 0.1rem;
  }

  &__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;
  }

  // ==================== 岗位关键词标签 ====================
  &__gap-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.08rem;
  }

  &__gap-kw-tag {
    font-size: 0.12rem;
    background: $text-middle;
    color: $bg-white;
    border-radius: 0.04rem;
    padding: 0.04rem 0.12rem;
    line-height: 1.2;
  }

  // ==================== 步骤三：定制简历 ====================

  // 定制简历左右两栏布局
  &__custom {
    display: flex;
    gap: 0.16rem;
    height: 100%;
  }

  // 左右面板
  &__custom-panel {
    flex: 1;
    background: $bg-main;
    border-radius: 0.12rem;
    padding: 0.28rem 0.24rem;
    overflow: hidden;
  }

  // 面板标题
  &__custom-panel-title {
    font-size: 0.17rem;
    font-weight: 700;
    color: $text-dark;
    margin: 0 0 0.24rem 0;
    line-height: 1.2;
  }

  // 选项列表
  &__custom-options {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  // 单个复选框行
  &__custom-checkbox {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    cursor: pointer;
    position: relative;
  }

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

  // 自定义复选框样式
  &__custom-checkmark {
    width: 0.18rem;
    height: 0.18rem;
    border: 1.5px solid $border-color;
    border-radius: 0.04rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background: $bg-white;
  }

  // 选中态
  &__custom-input:checked + &__custom-checkmark {
    background: $accent;
    border-color: $accent;

    &::after {
      content: '';
      display: block;
      width: 0.05rem;
      height: 0.09rem;
      border: solid $bg-white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
      margin-top: -0.04rem;
    }
  }

  // 选项文字
  &__custom-label {
    font-size: 0.14rem;
    color: $text-dark;
    line-height: 1.2;
    user-select: none;
  }

  // 问号提示触发器
  &__custom-tooltip-trigger {
    display: flex;
    align-items: center;
    margin-left: 0.04rem;
    //cursor: help;
    cursor: pointer;
  }

  // 问号图标
  &__custom-tooltip-icon {
    width: 0.15rem;
    height: 0.15rem;
    color: $text-light;
    transition: color 0.2s;

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

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

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

  // 右侧抽屉面板
  &__drawer {
    position: relative;
    background: $bg-white;
    width: 9.4rem;
    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;
    border-bottom: 1px solid $border-color;
    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;
  }

  // ==================== 步骤四：返回按钮 ====================
  &__back-btn {
    position: absolute;
    top: 0.7rem;
    left: 0.2rem;
    z-index: 5;
    background: $bg-white;
    border: 1px solid $border-color;
    border-radius: 0.2rem;
    padding: 0.06rem 0.2rem;
    font-size: 0.13rem;
    color: $text-dark;
    cursor: pointer;
    transition: all 0.2s;

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

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

  // 左侧简历预览区
  &__preview-left {
    flex: 1;
    overflow-y: auto;
    background: $bg-white;
    border: 1px solid $border-color;
    border-radius: 0.08rem;
    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;
    border-bottom: 1px solid $border-color;
    flex-shrink: 0;
  }

  &__preview-tab {
    flex: 1;
    padding: 0.12rem 0;
    font-size: 0.14rem;
    color: $text-middle;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;

    &--active {
      color: $text-dark;
      font-weight: 600;
      border-bottom-color: $text-dark;
    }

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

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

  // AI优化结果卡片
  &__ai-result {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.2rem;
    gap: 0.16rem;
    flex-shrink: 0;
  }

  &__ai-result-text {
    flex: 1;
    min-width: 0;
  }

  &__ai-result-title {
    font-size: 0.15rem;
    font-weight: 700;
    color: $text-dark;
    margin: 0 0 0.12rem 0;
    line-height: 1.5;
  }

  &__ai-result-detail {
    margin: 0;
  }

  &__ai-result-subtitle {
    font-size: 0.12rem;
    font-weight: 600;
    color: $text-dark;
    margin: 0 0 0.06rem 0;
    line-height: 1.4;
  }

  &__ai-result-list {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      font-size: 0.12rem;
      color: $text-dark;
      line-height: 1.6;
    }
  }

  &__ai-result-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
  }

  // 大号匹配度环
  &__match-ring--large {
    width: 0.64rem;
    height: 0.64rem;
  }

  // 高匹配标签
  &__match-label--high {
    background: $text-dark;
    color: $bg-white;
    font-weight: 600;
  }

  // 快捷操作按钮区
  &__ai-quick-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.08rem;
    padding: 0 0.2rem 0.16rem;
    flex-shrink: 0;
  }

  &__ai-quick-btn {
    background: $bg-white;
    border: 1px solid $border-color;
    border-radius: 0.16rem;
    padding: 0.08rem 0.16rem;
    font-size: 0.12rem;
    color: $text-dark;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;

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

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

  &__ai-msg {
    display: flex;

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

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

  &__ai-msg-bubble {
    border-radius: 0.1rem;
    padding: 0.1rem 0.14rem;
    font-size: 0.12rem;
    line-height: 1.6;
    max-width: 85%;
  }

  &__ai-msg--ai &__ai-msg-bubble {
    background: $bg-main;
    color: $text-dark;
    border: 1px solid $border-color;
  }

  &__ai-msg--user &__ai-msg-bubble {
    background: $text-dark;
    color: $bg-white;
  }

  // AI正在思考中的加载气泡
  &__ai-msg-bubble--loading {
    color: $text-middle;
    font-style: italic;
  }

  // 消息包裹容器（含撤销气泡）
  &__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: 100vw;
    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;
    gap: 0.08rem;
    padding: 0.12rem 0.2rem;
    border-top: 1px solid $border-color;
    flex-shrink: 0;
  }

  &__ai-input {
    flex: 1;
    background: $bg-main;
    border: 1px solid $border-color;
    border-radius: 0.2rem;
    padding: 0.1rem 0.14rem;
    font-size: 0.12rem;
    color: $text-dark;
    outline: none;

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

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

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

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

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

  // 编辑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;
    }
  }

  // 立即去投递按钮
  &__submit-btn {
    flex: 1;
    height: 0.48rem;
    background: $btn-dark;
    color: $bg-white;
    border: none;
    border-radius: 0.24rem;
    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);
  }
}