// ============================================================================
// DetailPanelSummaryRight — 摘要右分栏布局
// 左侧：标题 + Tabs + 字段详情 + 底部导航
// 右侧：独立 AiSummary（固定宽度 + 独立滚动）
// ============================================================================

.detail-panel-summary-right {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
  min-height: 0;
}

// 左栏 — 详情主内容
.detail-panel-summary-right__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  transition: flex 0.3s ease;
}

// 顶部标题栏 — 固定不滚动
.detail-panel-summary-right__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 8px;
  flex-shrink: 0;

  .detail-view-detail-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
}

// 收起/展开切换按钮
.detail-panel-summary-right__toggle {
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  flex-shrink: 0;
  background: linear-gradient(135deg, #a93aff 3%, #586eff 96%);
  cursor: pointer;
  color: #fff;
  transition: opacity 0.2s ease;

  &:hover {
    opacity: 0.85;
  }
}

// Tab 区域 — tab 栏固定，仅面板内容滚动
.detail-panel-summary-right__tabs {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-left: 16px;

  .cn-next-tabs-content {
    height: 100%;
    // 隐藏滚动条（跨浏览器兼容）
    scrollbar-width: none; // Firefox
    -ms-overflow-style: none; // IE/Edge

    &::-webkit-scrollbar {
      display: none; // Chrome/Safari
    }
  }
}

// 右栏 — AI 摘要内容直出
.detail-panel-summary-right__aside {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 16px;
  box-sizing: border-box;
  background: #fbf7ff;
  opacity: 1;
  transition:
    flex-basis 0.3s ease,
    padding 0.3s ease,
    opacity 0.25s ease;

  &--collapsed {
    flex-basis: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
}

// ----------------------------------------------------------------------------
// 右栏内容区极简样式 —— 后续可按设计稿二次美化
// ----------------------------------------------------------------------------
.summary-right-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  &-title {
    font-size: 16px;
    font-weight: 500;
    color: #000;
  }

  &-time {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  &-time-icon {
    cursor: pointer;
    color: #333;
  }
}

.summary-right-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.summary-right-content__body {
  font-size: 13px;
  color: var(--cnai-color-text-heading, rgba(0, 0, 0, 0.88));
  white-space: pre-wrap;
  word-break: break-word;

  &--error {
    color: #ff4d4f;
  }

  &--loading {
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  .markdown-body {
    white-space: normal;
    word-break: break-word;
  }
}
