$prefix: 'cn-ai-filter-item';

.#{$prefix} {
  &__trigger {
    &__wrapper {
      display: flex;
      align-items: center;
      line-height: 16px;
      cursor: pointer;

      &--required {
        color: #d11515;
        margin-left: 4px;
      }

      &__label {
        /** 超过8个中文用省略号 **/
        max-width: 98px;
        margin-left: 4px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      &__invalid {
        background-color: rgba(255, 204, 199, 0.52);
      }
    }
  }

  &__content {
    width: 350px;
    padding: 0;
    border-radius: 0;
    background: #fff;
    &__date-range {
      width: 544px;
    }
  }
}

// ============================================================================
// 字段标签弹层样式适配
// ============================================================================
.cn-sender-slot-custom-field-popup {
  // 覆盖内联样式，使用 fill-available 让宽度填充可用空间
  width: -webkit-fill-available;

  // 时间选择器宽度自适应
  // 使用更具体的选择器提高特异性，避免使用 !important
  .cn-next-time-picker2.cn-next-time-picker2-small,
  .cn-ui-time-picker-pro.cn-next-time-picker2 {
    width: auto;
  }
}

// 解决时间区间选择器宽度问题
.cn-dropdown-filter-item__content
  > .cn-search-custom-select-container
  .cn-next-time-picker2-wrapper {
  width: max-content;
}
