// 气泡列表相关样式 (需要 :deep 穿透)

// 基础气泡列表样式
@mixin bubble-list-base {
  :deep(.el-bubble-list) {
    padding-top: 24px;

    @media (max-width: 768px) {
      padding-top: 16px;
    }
  }
}

// 气泡基础样式
@mixin bubble-base {
  :deep(.el-bubble) {
    padding: 0 12px 24px;

    // 隐藏头像
    .el-avatar {
      display: none !important;
    }

    // 用户消息样式
    &[class*="end"] {
      width: 100%;
      max-width: 100%;

      .el-bubble-content-wrapper {
        flex: none;
        max-width: fit-content;
      }

      .el-bubble-content {
        width: fit-content;
        max-width: 100%;
      }
    }

    @media (max-width: 768px) {
      padding: 0 8px 16px;
    }

    @media (max-width: 480px) {
      padding: 0 6px;
      padding-bottom: 12px;
    }
  }
}

// AI消息样式
@mixin bubble-ai-style {
  :deep(.el-bubble[class*="start"]) {
    width: 100%;
    max-width: 100%;

    .el-bubble-content-wrapper {
      flex: auto;
    }

    .el-bubble-content {
      width: 100%;
      max-width: 100%;
      padding: 0;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }
  }
}

// 用户编辑模式样式
@mixin bubble-edit-mode {
  :deep(.el-bubble[class*="end"]) {
    &:has(.edit-message-wrapper-full) {
      .el-bubble-content-wrapper {
        flex: auto;
        max-width: 100%;
      }

      .el-bubble-content {
        width: 100%;
        max-width: 100%;
      }
    }
  }
}

// 删除模式气泡样式
@mixin bubble-delete-mode {
  :deep(.el-bubble-list.delete-mode) {
    .el-bubble {
      &[class*="end"] .el-bubble-content-wrapper {
        flex: auto;
        max-width: 100%;
      }

      .el-bubble-content {
        position: relative;
        min-height: 44px;
        padding: 12px 16px;
        background-color: #f5f7fa;
        border: 1px solid transparent;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;

        &:hover {
          background-color: #e8f0fe;
          border-color: #c6dafc;
        }
      }

      &:has(.el-checkbox.is-checked) .el-bubble-content {
        background-color: #d2e3fc;
        border-color: #8ab4f8;
      }
    }

    .delete-checkbox-inline {
      position: absolute;
      left: 12px;
      top: 12px;
      z-index: 2;

      :deep(.el-checkbox) {
        --el-checkbox-input-height: 20px;
        --el-checkbox-input-width: 20px;
      }
    }

    .ai-content-wrapper,
    .user-content-wrapper {
      margin-left: 36px;
      width: calc(100% - 36px);
    }

    .user-content-wrapper {
      align-items: flex-start;

      .edit-message-wrapper-full {
        width: 100%;
        max-width: 100%;
      }
    }
  }
}

// Typewriter 样式
@mixin typewriter-style {
  :deep(.el-typewriter) {
    overflow: hidden;
    border-radius: 12px;
  }
}

// Markdown 容器样式
@mixin markdown-container {
  :deep(.elx-xmarkdown-container) {
    padding: 8px 4px;
  }
}

// 代码块头部样式
@mixin code-header {
  :deep(.markdown-elxLanguage-header-div) {
    top: -25px !important;
  }
}