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

// ==================== 求职助手页面样式 ====================
.agent-page {
  min-height: 100vh;
  background: $bg-main;
  font-size: 0.14rem;
  // 主内容区域（左侧导航栏右边的部分）
  &__content {
    margin-left: 2rem;
    flex: 1;
    padding: 0.3rem 0.4rem;
    overflow-y: auto;
    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 {
      background: $btn-dark;

      .agent-page__step-number {
        background: $bg-white;
        color: $btn-dark;
      }

      .agent-page__step-label {
        color: $bg-white;
      }
    }
  }

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

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

  // 步骤间分隔箭头
  &__step-arrow {
    display: flex;
    align-items: center;
    color: $text-light;

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

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

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

  // 右侧个人档案区域
  &__right {
    flex: 1;
    min-width: 0;
  }

  // ==================== 左侧引导卡片 ====================
  &__intro-card {
    background: $bg-white;
    border-radius: 0.12rem;
    padding: 0.3rem;
  }

  // 卡片头部：图标 + 标题
  &__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.16rem;
    font-weight: 700;
    color: $text-dark;
    line-height: 1.5;
    margin: 0;
  }

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

  // 导入个人资料行
  &__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;
    border: 1px solid $border-color;
    padding: 0.24rem;
    max-height: calc(100vh - 1.4rem);
    overflow-y: auto;

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

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

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

  // 个人档案标题
  &__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); }
  }

  // ==================== 第3步：网申常见问题 ====================

  // 第3步整体容器 — 左右两栏布局
  &__step3 {
    display: flex;
    gap: 0.24rem;
    align-items: flex-start;
    width: 100%;
    position: relative;
    padding-top: 0.36rem;
  }

  // 右侧表单包裹
  &__form-wrapper {
    background: $bg-white;
    border-radius: 0.12rem;
    padding: 0.28rem;
    border: 1px solid $border-color;
  }

  // 表单标题
  &__form-title {
    font-size: 0.15rem;
    font-weight: 700;
    color: $text-dark;
    margin-bottom: 0.24rem;
    padding-bottom: 0.12rem;
    border-bottom: 1px solid $border-color;
  }

  // 表单分组
  &__form-group {
    margin-bottom: 0.28rem;

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

  // 表单标签
  &__form-label {
    font-size: 0.14rem;
    font-weight: 600;
    color: $text-dark;
    margin-bottom: 0.12rem;
    text-align: center;
  }

  // 选项按钮行
  &__form-options {
    display: flex;
    justify-content: center;
    gap: 0.12rem;
  }

  // 单个选项按钮
  &__form-option {
    padding: 0.08rem 0.24rem;
    border: 1px solid $border-color;
    border-radius: 0.06rem;
    background: $bg-white;
    color: $text-dark;
    font-size: 0.13rem;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.4;

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

    // 选中态
    &--active {
      background: $btn-dark;
      color: $bg-white;
      border-color: $btn-dark;
    }
  }

  // 下拉选择器行
  &__form-selects {
    display: flex;
    justify-content: center;
    gap: 0.12rem;
  }

  // 统一下拉选择器样式覆盖
  &__form-select {
    width: 1.4rem;

    // 覆盖 Element Plus 选择器样式以匹配页面风格
    :deep(.el-input__wrapper) {
      border-radius: 0.2rem;
      box-shadow: none;
      border: 1px solid $border-color;
      padding: 0.02rem 0.12rem;
      background: $bg-white;
      transition: border-color 0.2s ease;

      &:hover,
      &.is-focus {
        border-color: $accent;
        box-shadow: none;
      }
    }

    :deep(.el-input__inner) {
      font-size: 0.13rem;
      color: $text-dark;
      text-align: center;

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

    :deep(.el-input__suffix) {
      color: $text-light;
    }
  }

  // ==================== 第3步下半部分：插件安装 ====================

  // 安装步骤说明文字
  &__install-steps {
    font-size: 0.13rem;
    color: $text-middle;
    line-height: 1.8;
    margin-bottom: 0.28rem;

    p { margin: 0; }
  }

  // 插件区域
  &__plugin-section {
    text-align: center;
    padding: 0.2rem 0;
  }

  // 插件标题
  &__plugin-title {
    font-size: 0.18rem;
    font-weight: 700;
    color: $text-dark;
    margin-bottom: 0.24rem;
  }

  // 浏览器按钮行
  &__browser-btns {
    display: flex;
    justify-content: center;
    gap: 0.1rem;
    flex-wrap: wrap;
  }

  // 单个浏览器按钮
  &__browser-btn {
    padding: 0.08rem 0.2rem;
    border: 1px solid $border-color;
    border-radius: 0.06rem;
    background: $bg-white;
    color: $text-dark;
    font-size: 0.13rem;
    cursor: pointer;
    transition: all 0.2s ease;

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

  // 指引图片幻灯片
  &__guide-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      border-radius: 0.08rem;
    }
  }

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

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

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

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

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

  // 完成页描述
  &__complete-desc {
    font-size: 0.14rem;
    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.24rem;
    font-size: 0.15rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;

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


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

  // 有右侧面板时取消居中
  &--with-panel {
    //justify-content: flex-start;
  }

  // 左侧主区域
  &__left {
    flex: 1;
    height: calc(100vh - 0.6rem);
    display: flex;
    flex-direction: column;
    max-width: 8rem;
  }

  // 右侧匹配岗位面板
  &__right {
    flex: 1;
    height: calc(100vh - 0.6rem);
    margin-left: 0.2rem;
    max-width: 8rem;
    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;
    gap: 0.1rem;
    padding: 0.12rem 0.16rem;
    background: $bg-white;
    border-radius: 0.1rem;
    flex-shrink: 0;
    margin-bottom: 0.16rem;
  }

  // 用户头像
  &__avatar {
    width: 0.3rem;
    height: 0.3rem;
    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;
    }
  }

  // 状态标签
  &__status-tag {
    font-size: 0.12rem;
    color: $accent;
    background: rgba(79, 194, 201, 0.1);
    padding: 0.03rem 0.1rem;
    border-radius: 0.04rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  // 状态提示文字
  &__status-text {
    font-size: 0.12rem;
    color: $text-middle;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  // 开始按钮
  &__start-btn {
    height: 0.3rem;
    padding: 0 0.14rem;
    background: $text-dark;
    color: $bg-white;
    border: none;
    border-radius: 0.15rem;
    font-size: 0.12rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 0.3rem;
    white-space: nowrap;
    flex-shrink: 0;

    &:hover {
      opacity: 0.85;
    }

    &:disabled {
      background: $text-light;
      cursor: not-allowed;
      opacity: 0.7;
    }
  }

  // 右侧工具按钮区
  &__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 {
    width: 0.38rem;
    height: 0.28rem;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: $text-middle;
    border-radius: 0.06rem;
    transition: all 0.2s ease;
    font-weight: 600;


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

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

  // ==================== 中间聊天记录区域 ====================
  &__chat-area {
    flex: 1;
    overflow-y: auto;
    padding: 0.16rem 0.1rem;
    margin-bottom: 0.1rem;

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

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

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

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

  // 对话行
  &__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;
    }
  }
}