// ===================
// 🌗 主题变量定义（仅使用项）
// ===================

:root
  // ai_summary
  --liushen-title-font-color: #0883b7
  --liushen-maskbg: rgba(255, 255, 255, 0.85)
  --liushen-ai-bg: conic-gradient(from 1.5708rad at 50% 50%, #d6b300 0%, #42A2FF 54%, #d6b300 100%)

  // card 背景
  --liushen-card-secondbg: #f1f3f8

  // text
  --liushen-text: #4c4948
  --liushen-secondtext: #3c3c43cc

[data-theme='dark']
  // ai_summary
  --liushen-title-font-color: #0883b7
  --liushen-maskbg: rgba(0, 0, 0, 0.85)
  --liushen-ai-bg: conic-gradient(from 1.5708rad at 50% 50%, rgba(214, 178, 0, 0.46) 0%, rgba(66, 161, 255, 0.53) 54%, rgba(214, 178, 0, 0.49) 100%)

  // card 背景
  --liushen-card-secondbg: #3e3f41

  // text
  --liushen-text: #ffffffb3
  --liushen-secondtext: #a1a2b8

// ===================
// 📘 AI 摘要模块样式
// ===================

if hexo-config('ai_summary.enable')
  .ai-summary
    background-color var(--liushen-maskbg)
    background var(--liushen-card-secondbg)
    border-radius 12px
    padding 8px 8px 12px 8px
    line-height 1.3
    flex-direction column
    margin-bottom 16px
    display flex
    gap 5px
    position relative

    &::before
      content ''
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      z-index 1
      filter blur(8px)
      opacity .4
      background-image var(--liushen-ai-bg)
      transform scaleX(1) scaleY(.95) translateY(2px)
    
    &::after
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      border-radius: 12px;
      background: var(--liushen-maskbg);

    .ai-explanation
      z-index 10
      padding 8px 12px
      font-size 15px
      line-height 1.4
      color var(--liushen-text)
      text-align justify

      // ✅ 打字机光标动画
      &::after
        content ''
        display inline-block
        width 8px
        height 2px
        margin-left 2px
        background var(--liushen-text)
        vertical-align bottom
        animation blink-underline 1s ease-in-out infinite
        transition all .3s
        position relative
        bottom 3px

      // 平滑滚动动画
      // .char
      //   display inline-block
      //   opacity 0
      //   animation chat-float .5s ease forwards
    
    .ai-title
      z-index 10
      font-size 14px
      display flex
      border-radius 8px
      align-items center
      position relative
      padding 0 12px
      cursor default
      user-select none

      .ai-title-left
        display flex
        align-items center
        color var(--liushen-title-font-color)

        i
          margin-right 3px
          display flex
          color var(--liushen-title-font-color)
          border-radius 20px
          justify-content center
          align-items center

        .ai-title-text
          font-weight 500

      .ai-tag
        color var(--liushen-secondtext)
        font-weight 300
        margin-left auto
        display flex
        align-items center
        justify-content center
        transition .3s

  // 平滑滚动动画
  // @keyframes chat-float
  //   0% 
  //     opacity 0
  //     transform translateY(20px)
  //   100% 
  //       opacity 1
  //       transform translateY(0)
  
  // ✅ 打字机光标闪烁动画
  @keyframes blink-underline
    0%, 100%
      opacity 1
    50%
      opacity 0