// ============================================================================
// AI 总结组件公共样式
// ============================================================================

@import '../../../../../styles/markdown.scss';

// ----------------------------------------------------------------------------
// 变量定义
// ----------------------------------------------------------------------------

// AI 相关颜色
$color-ai-primary: #f1e3ff;
$color-ai-hover: #e3cafa;
$color-ai-border: #9436eb;
$color-ai-background: #fbf7ff;
$color-error: #ff4d4f;

// 间距变量
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;

// AI 总结最大宽度
$ai-summary-max-height: 300px;

// ----------------------------------------------------------------------------
// Mixins
// ----------------------------------------------------------------------------

// AI 渐变背景 mixin
@mixin ai-gradient-bg($opacity-start: 0.12, $opacity-end: 0.06) {
  background: linear-gradient(
    135deg,
    rgba(174, 146, 247, $opacity-start) 0%,
    rgba(174, 146, 247, $opacity-end) 100%
  );
}

// ----------------------------------------------------------------------------
// 动画定义
// ----------------------------------------------------------------------------

@keyframes ai-dot-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

@keyframes ai-cursor-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes ai-loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes ai-content-fade-in {
  from {
    opacity: 0;
    transform: translateY(-$spacing-sm);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// ----------------------------------------------------------------------------
// AI 总结组件样式
// ----------------------------------------------------------------------------

.ai-summary-wrapper {
  // 默认：绝对定位在右上角（idle/loading 状态）
  position: absolute;
  top: $spacing-sm;
  right: $spacing-sm;
  z-index: 10;

  // 结果状态：恢复正常文档流
  &--result {
    position: relative;
    top: auto;
    right: auto;
    margin: $spacing-lg 0;
    flex-shrink: 0;
  }
}

// AI 总结触发按钮
.ai-summary-trigger {
  display: inline-flex;
  align-items: center;
  gap: $spacing-xs;
  height: 24px;
  padding: 0 10px 0 6px;
  border-radius: 12px;
  @include ai-gradient-bg(0.12, 0.06);
  border: 1px solid $color-ai-border;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: $color-ai-primary;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(123, 97, 255, 0.15);

  &:hover {
    @include ai-gradient-bg(0.18, 0.1);
    box-shadow: 0 4px 12px rgba(123, 97, 255, 0.25);
    transform: translateY(-1px);
  }

  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(123, 97, 255, 0.2);
  }
}

.ai-summary-trigger-icon {
  width: 16px;
  height: 16px;
}

// 加载状态
.ai-summary-loading {
  display: inline-flex;
  align-items: center;
  gap: $spacing-sm;
  height: 28px;
  padding: 0 $spacing-md;
  border-radius: 14px;
  @include ai-gradient-bg(0.1, 0.05);
  border: 1px solid $color-ai-border;
  font-size: 12px;
  color: $color-ai-primary;
  box-shadow: 0 2px 8px rgba(123, 97, 255, 0.15);
  animation: ai-content-fade-in 0.3s ease-out;
}

.ai-summary-loading-icon {
  animation: ai-loading-spin 1s linear infinite;
  color: $color-ai-primary;
}

// 结果展示
.ai-summary-result {
  background: $color-ai-background;
  border: 1px solid $color-ai-border;
  border-radius: 12px;
  padding: $spacing-md $spacing-lg;
  animation: ai-content-fade-in 0.4s ease-out;
  position: relative;
  box-shadow: 0 2px 12px rgba(123, 97, 255, 0.12);
  max-height: $ai-summary-max-height;
  transition: all 0.3s ease;

  // 收起状态
  &--collapsed {
    .ai-summary-result-content {
      p {
        margin: 0;
      }
    }
  }
}

// 右上角角标
.ai-summary-result-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  display: flex;
  align-items: center;
  gap: $spacing-xs;
  padding: 2px 6px 2px 4px;
  @include ai-gradient-bg(0.15, 0.1);
  border-radius: 0 12px 0 12px;
  color: #a17dff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;

  img {
    width: 16px;
    height: 16px;
  }
  &:hover {
    background: $color-ai-hover;
  }
}

// 收起/展开图标
.ai-summary-collapse-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: $color-ai-primary;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  margin-left: $spacing-xs;

  &:hover {
    opacity: 1;
  }
}

.ai-summary-result-header {
  display: none; // 隐藏原来的 header，用角标代替
}

.ai-summary-result-icon {
  width: 20px;
  height: 20px;
}

// 打字机光标
.ai-summary-cursor {
  display: inline;
  color: $color-ai-border;
  font-weight: 700;
  animation: ai-cursor-blink 0.8s step-end infinite;
}

// 内联刷新按钮（文字链接）
.ai-summary-refresh {
  display: inline;
  margin-left: $spacing-sm;
  cursor: pointer;
  color: $color-ai-border;
  font-size: 13px;
  transition: color 0.2s ease;

  &:hover {
    color: $color-ai-primary;
    text-decoration: underline;
  }
}

// 内容区域 loading 状态
.ai-summary-content-loading {
  display: flex;
  align-items: center;
  gap: $spacing-sm;
  color: $color-ai-primary;
  font-size: 13px;
  padding: $spacing-sm 0;
}

.ai-summary-content-loading-icon {
  animation: ai-loading-spin 1s linear infinite;
  font-size: 16px;
}

// loading 状态的圆点动画
.ai-summary-loading-dot {
  display: inline-block;
  animation: ai-dot-pulse 1.5s ease-in-out infinite;
  font-size: 12px;
  color: $color-ai-primary;
}

// 结果内容区域 loading 状态样式
.ai-summary-result-content--loading {
  min-height: 40px;
  display: flex;
  align-items: center;
}

.ai-summary-result-content {
  max-height: calc(300px - 24px);
  font-size: 13px;
  color: var(--cnai-color-text-heading, rgba(0, 0, 0, 0.88));
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
  transition: max-height 0.3s ease;
  // 隐藏滚动条
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }

  &--error {
    color: $color-error;
  }

  .cn-ui-text-clip {
    display: block !important; // 影响内部样式
  }

  // Markdown 内容区域样式覆盖
  // 避免父级 white-space: pre-wrap 影响 markdown 块级元素排版
  @include markdown-content-styles-content;
  .markdown-body {
    white-space: normal;
    word-break: break-word;
  }
}
