/**
 * story-fab.module.less
 * AI Cinema Studio 设计系统
 *
 * 色彩规范：
 * - 深炭底：#0C0D14（背景）
 * - 琥珀光：#FF9F43（主强调/CTA）
 * - 电青色：#00D4FF（AI 状态/信息）
 * - 玻璃拟态：rgba(20, 21, 32, 0.8) + backdrop-filter: blur(20px)
 *
 * 字体：Outfit（标题）+ Figtree（正文）
 */

// ============================================================================
// 变量
// ============================================================================

@bg-deep: #0C0D14;
@amber: #FF9F43;
@cyan: #00D4FF;
@text-primary: #FFFFFF;
@text-secondary: rgba(255, 255, 255, 0.65);
@text-muted: rgba(255, 255, 255, 0.4);

@glass-bg: rgba(20, 21, 32, 0.8);
@glass-border: rgba(255, 255, 255, 0.08);
@glass-highlight: rgba(255, 255, 255, 0.12);

@amber-glow: rgba(255, 159, 67, 0.3);
@cyan-glow: rgba(0, 212, 255, 0.4);

@radius-lg: 16px;
@radius-md: 10px;
@radius-sm: 6px;

// ============================================================================
// 关键帧动画
// ============================================================================

// 电青色脉冲（进行中状态）
@keyframes cyanPulse {
  0% {
    box-shadow: 0 0 0 0 @cyan-glow;
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 8px rgba(0, 212, 255, 0);
    opacity: 0.85;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 212, 255, 0);
    opacity: 1;
  }
}

// 内容入场动画
@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// 步骤图标旋转（完成瞬间）
@keyframes checkBounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

// 连接线填充动画
@keyframes connectorFill {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

// ============================================================================
// 主容器
// ============================================================================

.cutDeck {
  display: flex;
  width: 100%;
  height: 100%;
  background: @bg-deep;
  gap: 0;
  position: relative;
  overflow: hidden;
}

// ============================================================================
// 左侧边栏 - 步骤列表
// ============================================================================

.sidebar {
  width: 280px;
  min-width: 280px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: @glass-bg;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid @glass-border;
  padding: 28px 20px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;

  // 滚动条美化
  &::-webkit-scrollbar {
    width: 4px;
  }

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

  &::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
  }
}

.sidebarHeader {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid @glass-border;
}

.sidebarTitle {
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: @text-primary;
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}

.sidebarSubtitle {
  font-family: 'Figtree', 'Segoe UI', sans-serif;
  font-size: 13px;
  color: @text-muted;
  margin: 0;
}

// ============================================================================
// 步骤列表
// ============================================================================

.stepList {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.stepWrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

// 连接线
.stepConnector {
  width: 2px;
  height: 28px;
  background: rgba(255, 255, 255, 0.1);
  margin-left: 27px; // 居中于图标
  transition: background 0.4s ease;
  border-radius: 1px;

  &.connectorCompleted {
    background: linear-gradient(
      to bottom,
      @amber,
      rgba(255, 159, 67, 0.6)
    );
  }
}

// ============================================================================
// 步骤项
// ============================================================================

.stepItem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: @radius-md;
  cursor: default;
  transition: all 0.25s ease;
  position: relative;
  user-select: none;

  &.stepItemAccessible {
    cursor: pointer;

    &:hover:not(.stepItemActive):not(.stepItemCompleted) {
      background: rgba(255, 255, 255, 0.05);
    }
  }

  // 默认/等待态
  &.stepItemPending {
    .stepIcon {
      background: rgba(255, 255, 255, 0.06);
      color: @text-muted;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .stepTitle {
      color: @text-muted;
    }
  }

  // 激活态（当前步骤但未完成）
  &.stepItemActive {
    background: rgba(0, 212, 255, 0.08);

    .stepIcon {
      background: rgba(0, 212, 255, 0.15);
      color: @cyan;
      border: 1px solid rgba(0, 212, 255, 0.3);
    }

    .stepTitle {
      color: @text-primary;
      font-weight: 500;
    }
  }

  // 进行中态（当前步骤正在执行）
  &.stepItemInProgress {
    background: rgba(0, 212, 255, 0.08);

    .stepIcon {
      background: rgba(0, 212, 255, 0.15);
      color: @cyan;
      border: 1px solid @cyan;
      animation: cyanPulse 1.8s ease-in-out infinite;
    }

    .stepTitle {
      color: @text-primary;
      font-weight: 600;
    }
  }

  // 完成态
  &.stepItemCompleted {
    .stepIcon {
      background: linear-gradient(135deg, @amber 0%, #FFB366 100%);
      color: @bg-deep;
      border: none;
      animation: checkBounce 0.4s ease-out;
    }

    .stepTitle {
      color: @text-secondary;
    }
  }
}

// ============================================================================
// 步骤图标
// ============================================================================

.stepIconWrapper {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.stepIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  transition: all 0.3s ease;

  &.iconPending {
    background: rgba(255, 255, 255, 0.06);
    color: @text-muted;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  &.iconInProgress {
    background: rgba(0, 212, 255, 0.15);
    color: @cyan;
    border: 1px solid @cyan;
    animation: cyanPulse 1.8s ease-in-out infinite;
  }

  &.iconCompleted {
    background: linear-gradient(135deg, @amber 0%, #FFB366 100%);
    color: @bg-deep;
    border: none;
    animation: checkBounce 0.4s ease-out;
  }
}

// ============================================================================
// 步骤文字
// ============================================================================

.stepText {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stepTitle {
  font-family: 'Figtree', 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: @text-muted;
  transition: color 0.25s ease;
  line-height: 1.4;
}

.stepStatus {
  font-family: 'Figtree', 'Segoe UI', sans-serif;
  font-size: 11px;
  color: @amber;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.stepStatusInProgress {
  font-family: 'Figtree', 'Segoe UI', sans-serif;
  font-size: 11px;
  color: @cyan;
  font-weight: 500;
  letter-spacing: 0.02em;
}

// ============================================================================
// 右侧内容区
// ============================================================================

.contentArea {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding: 32px;
  box-sizing: border-box;
  background: @bg-deep;

  // 滚动条美化
  &::-webkit-scrollbar {
    width: 6px;
  }

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

  &::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
  }

  // 内容入场动画
  &.contentEntering {
    animation: contentFadeIn 0.35s ease-out;
  }
}

.contentCard {
  max-width: 960px;
  margin: 0 auto;
  background: @glass-bg;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid @glass-border;
  border-radius: @radius-lg;
  padding: 32px;
  min-height: calc(100% - 64px);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 @glass-highlight;
}
