/**
 * css 书写规范
 * https://alidocs.dingtalk.com/i/nodes/Mk5evdR04jBV523gq4AgJQL3x2OlParn
 */
@import '~@cainiaofe/cn-ui-theme-light/token.scss';

.cn-sender {
  &-schema-menu {
    background-color: var(--cnai-color-bg-base, #fff);
    border-radius: var(--cnai-radius-md, 8px);
    border: 1px solid rgba(0, 0, 0, 0.03);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 400px;

    &-header {
      height: 32px;
      display: flex;
      align-items: center;
      padding: 8px 12px;
      gap: 4px;
      align-self: stretch;
      z-index: 0;
      border-radius: 8px 8px 0 0;
      background: #fff;
      box-sizing: border-box;
      border-width: 0 0 1px 0;
      border-style: solid;
      border-color: rgba(0, 0, 0, 0.03);
      flex-shrink: 0;

      &-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
      }

      &-search {
        flex: 1;
        min-width: 0;
      }
    }

    &-options {
      display: flex;
      flex-direction: column;
      padding: 8px;
      gap: 4px;
      flex: 1;
      min-height: 0;
      z-index: 0;
      background: #fff;
      overflow-y: auto;
      overflow-x: hidden;
    }

    &-option {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px;
      align-self: stretch;
      z-index: 0;
      border-radius: 4px;
      background: #fff;

      &:hover {
        border-radius: 4px;
        background: var(--cnai-color-bg-selected, #f1f5fe);
      }

      &-active {
        border-radius: 4px;
        background: var(--cnai-color-bg-selected, #f1f5fe);
      }

      &-content {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 0;
      }

      &-icon {
        font-size: 16px;
        color: #666;
        flex-shrink: 0;
      }

      &-label {
        font-family: Alibaba PuHuiTi 3;
        font-size: 12px;
        font-weight: 500;
        line-height: 12px;
        letter-spacing: normal;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      // 通过增加选择器特异性提高优先级
      &-filter {
        display: flex;
        align-items: center;
        padding: 4px 6px;
        gap: 4px;
        z-index: 1;
        flex-shrink: 0;
        font-family: Alibaba PuHuiTi 3;
        font-size: 11px;
        font-weight: normal;
        line-height: 11px;
        letter-spacing: normal;
        color: #999;
        border-radius: 6px;
        box-sizing: border-box;
        border: 0.5px dashed rgba(0, 0, 0, 0.1);
      }

      // 使用重复类名提高 border 优先级
      & &-filter.cn-sender-schema-menu-option-filter {
        border: 0.5px solid rgba(0, 0, 0, 0.1);
      }

      // 所有交互状态都保持 border
      & &-filter.cn-sender-schema-menu-option-filter:hover,
      & &-filter.cn-sender-schema-menu-option-filter:active,
      & &-filter.cn-sender-schema-menu-option-filter:focus {
        border: 0.5px solid rgba(0, 0, 0, 0.1);
      }
    }
  }
}

.cn-ai-filter {
  // 与页面 AI 助理联动时的横向布局（左侧切换图标 + 输入区）
  &__agent-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  &__agent-row-body {
    flex: 1;
    min-width: 0;
    width: 100%;

    .cn-ai-filter__sender {
      width: 100%;
      flex: 1;
      min-width: 0;
    }
  }

  &__agent-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: background 0.4s ease-in-out;
    flex-shrink: 0;
    box-sizing: border-box;

    &:hover {
      background: rgba(0, 0, 0, 0.12);
    }

    img {
      width: 22px;
      min-width: 22px;
      height: 22px;
      min-height: 22px;
      display: block;
      object-fit: contain;
    }
  }

  &__sender {
    box-shadow: none;
    border-radius: var(--cnai-radius-pill, 20px);
    align-items: center;
    border: 1px solid var(--cnai-color-border-base, #e7e8ed);
    background-color: var(--cnai-color-bg-base, #fff);
    .cn-sender-content {
      min-height: 32px;
      align-items: center;
      padding: 0 0 0 6px;
      gap: 0;
    }

    // 覆盖 cn-sender-actions-list-presets 的 gap
    .cn-sender-actions-list-presets {
      gap: 4px;
    }

    // 覆盖录音按钮图标填充色（渐变色）
    .cn-sender-actions-btn-record-icon {
      position: relative;
      display: inline-block;
      width: 14px;
      height: 14px;

      img {
        // 隐藏原始图片但保持尺寸
        opacity: 0;
        width: 14px;
        height: 14px;
      }

      // 使用伪元素创建渐变背景
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 14px;
        height: 14px;
        background: var(
          --cnai-filter-record-mask-gradient,
          linear-gradient(144deg, #a114ff 3%, #4161fd 96%)
        );
        -webkit-mask: var(
            --cnai-filter-record-mask-url,
            url('https://img.alicdn.com/imgextra/i4/O1CN01f26w1Z1Wh9YdajZBl_!!6000000002819-55-tps-16-16.svg')
          )
          no-repeat center;
        mask: var(
            --cnai-filter-record-mask-url,
            url('https://img.alicdn.com/imgextra/i4/O1CN01f26w1Z1Wh9YdajZBl_!!6000000002819-55-tps-16-16.svg')
          )
          no-repeat center;
        -webkit-mask-size: contain;
        mask-size: contain;
      }
    }

    // 覆盖录音按钮圆角为圆形
    .cn-sender-actions-btn-record {
      border-radius: 50% !important;
      width: 26px !important;
      height: 26px !important;
    }
  }

  // Footer 布局：按钮显示在右侧
  &__footer {
    display: flex;
    align-items: center;
    padding-right: 6px;
    gap: 4px;
    .cn-ai-filter__send-button {
      > img {
        width: 16px;
        height: 16px;
      }
      border-radius: 28px;
      height: 24px;
      width: 36px;
      background-color: var(--cnai-filter-send-btn-bg, rgba(247, 240, 254, 1));
      &:hover {
        background-color: var(--cnai-filter-send-btn-hover-bg, #e3cafa);
      }
    }
    .cn-sender-actions-btn-loading-button {
      width: 40px;
      border-radius: 28px;
      background-color: var(--cnai-filter-send-btn-bg, rgba(247, 240, 254, 1));
      &:hover {
        background-color: var(--cnai-filter-send-btn-hover-bg, #e3cafa);
      }
    }
  }

  // prefix
  &__prefix {
    border-radius: 20px;
    // width: 36px;
    height: 22px;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin-right: 8px;
    cursor: pointer;
    padding: 4px;
    box-sizing: border-box;
    transition: background 0.4s ease-in-out;

    &-icon-clock {
      font-size: 14px;
      color: #333;
      flex-shrink: 0;
    }
    &-icon-arrow {
      --cn-icon_font-size: 12px !important;
      color: #999;
      flex-shrink: 0;

      // 覆盖 ::before 伪元素的 font-size
      &::before {
        font-size: 12px !important;
      }
    }

    &:hover {
      background: #f2f2f6;
    }
  }

  // 常用查询条件弹层
  &__common-query-popup {
    position: relative;
    // 与 @/utils/floating-layer FLOATING_LAYER_Z_INDEX 一致
    z-index: 1100;
    background: var(--cnai-color-bg-base, #fff);
    border-radius: var(--cnai-radius-lg, 12px);
    box-shadow: var(--cnai-shadow-popup, 0 4px 20px 0 rgba(0, 0, 0, 0.2));
    padding: 8px 0;
    min-width: 300px;
    max-width: 400px;
    max-height: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  &__common-query-title {
    padding: 0 12px 6px;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 6px;
  }

  &__common-query-list {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    gap: 4px;
  }

  &__common-query-item {
    padding: 6px 8px;
    font-family: PingFang SC;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.88);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    &:hover {
      background: var(
        --cnai-color-bg-content-light,
        linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%)
      );
    }

    &--pinned {
      background: var(--cnai-filter-tag-bg, rgba(102, 126, 234, 0.05));
    }
  }

  &__common-query-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

  &__common-query-pin-icon {
    color: var(--cnai-color-text-tertiary, #999);
    cursor: pointer;
    flex-shrink: 0;
    padding: 2px;
    border-radius: 4px;
    transition: all 0.2s;

    &:hover {
      color: var(--cnai-color-content-accent, #667eea);
      background-color: var(--cnai-filter-tag-bg, rgba(102, 126, 234, 0.1));
    }

    &--pinned {
      color: var(--cnai-color-content-accent, #667eea);
    }
  }

  &__common-query-section-title {
    padding: 8px 8px 4px;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    background: var(--cnai-gradient-content, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  &__common-query-divider {
    height: 1px;
    background: var(
      --cnai-gradient-divider-light,
      linear-gradient(90deg, transparent 0%, rgba(102, 126, 234, 0.2) 50%, transparent 100%)
    );
    margin: 6px 8px;
  }

  &__common-query-text {
    color: rgba(0, 0, 0, 0.88);
    line-height: 1.6;
    font-size: 12px;
  }

  &__common-query-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  &__common-query-tag {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--cnai-filter-tag-bg, rgba(102, 126, 234, 0.1));
    color: var(--cnai-color-content-accent, #667eea);
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
    border: 1px solid var(--cnai-filter-tag-border, rgba(102, 126, 234, 0.2));
  }

  &__common-query-loading,
  &__common-query-empty {
    padding: 16px;
    text-align: center;
    font-family: Alibaba PuHuiTi 3;
    font-size: 12px;
    color: #999;
  }

  .translate-tags-container {
    display: flex;
    align-items: center;
    margin-top: $s-2;

    .translate-tags-title {
      display: flex;
      flex-shrink: 0;
      margin-right: 6px;
      line-height: 18px;
      align-items: center;

      .success-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-success, #0aceac);
        color: var(--color-white, #fff);
        border-radius: 18px;
        height: 18px;
        width: 18px;
      }
      .success-label {
        margin-left: 5px;
      }
    }

    .translate-tags-content {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 1;
      min-width: 0;
      max-width: 100%;
      max-height: 60px;
      overflow: hidden;

      .translate-tag-word {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
        line-height: 20px;
        flex-shrink: 1;
        min-width: 0;
      }

      .translate-tag-copy {
        color: #9fa5b7;
        margin-left: 4px;
        cursor: pointer;
        flex-shrink: 0;
      }

      .translate-tag {
        display: flex;
        align-items: center;
        padding: 2px 6px;
        border-radius: 10px;
        background: var(--cnai-filter-translate-tag-bg, #e9edf8);
        color: var(--cnai-color-text-primary, #333);
        line-height: 20px;

        .translate-tag-word {
          max-width: 500px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 12px;
        }
      }
      .translate-tags-feedback {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .cn-one-search-condition-slot {
      display: flex;
      align-items: center;
      margin-bottom: var(--s-1, 4px);
    }
  }
}

.translate-tags-container {
  display: flex;

  .translate-tags-title {
    display: flex;
    flex-shrink: 0;
    margin-right: 6px;
    line-height: 18px;
    align-items: center;

    .success-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--cnai-color-success, var(--color-success, #0aceac));
      color: var(--color-white, #fff);
      border-radius: 18px;
      height: 18px;
      width: 18px;
    }
    .success-label {
      margin-left: 5px;
    }
  }

  .translate-tags-content {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    max-height: 60px;
    overflow: hidden;

    .translate-tag-word {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 12px;
      line-height: 20px;
      flex-shrink: 1;
      min-width: 0;
    }

    .translate-tag {
      display: flex;
      align-items: center;
      padding: 0 8px;
      border-radius: 10px;
      background: var(--cnai-filter-translate-tag-bg, #e9edf8);
      color: var(--cnai-color-text-primary, #333);
      line-height: 20px;

      .translate-tag-word {
        max-width: 500px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 12px;
      }

      .translate-tag-copy {
        color: #9fa5b7;
        margin-left: 4px;
        cursor: pointer;
      }
    }

    .translate-tag-copy {
      color: #9fa5b7;
      margin-left: 4px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .translate-tags-feedback {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .cn-one-search-condition-slot {
    display: flex;
    align-items: center;
    margin-bottom: var(--s-1, 4px);
  }
}
