/* ========== 文件预览容器 ========== */

.file-preview {
  background: #000;               /* 黑色背景 */
  width: 100%;                    /* 与聊天容器同宽 */
  max-width:100%;
  margin: 10px 0;                 /* 上下外边距 */
  padding: 15px;                  /* 内边距 */
  border-radius: 8px;             /* 圆角 */
  max-height: 25vh;               /* 最大高度为视口的25% */
  overflow: hidden;               /* 隐藏外部溢出 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* 阴影效果 */
}

/* ========== 网格布局容器 ========== */
.preview-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左右等宽分栏 */
  gap: 20px;                      /* 分栏间距 */
  height: 100%;                   /* 继承父容器高度 */
  min-height: 200px;              /* 最小高度保障 */
}



/* ========== 左右分栏通用样式 ========== */
.preview-column,
.analysis-column {
  display: flex;
  flex-direction: column;         /* 垂直布局 */
  background: #1a1a1a;            /* 深灰背景 */
  border-radius: 6px;             /* 圆角 */
  padding: 15px;                  /* 内边距 */
  height: 100%;                   /* 继承父容器高度 */
  box-sizing: border-box;         /* 包含padding */
  overflow-y: auto;               /* 垂直滚动条 */
  min-height: 0;                  /* 修复flex滚动问题 */
}

/* ========== 文件元信息 ========== */
.file-meta {
  height: 50px;                   /* 固定高度 */
  min-height: 50px;               /* 防止高度压缩 */
  color: #fff;                    /* 文字颜色 */
  padding: 1px;                  /* 内边距 */
  border-bottom: 1px solid #333;  /* 底部边框 */
  margin-bottom: 1px;            /* 下边距 */
  position: sticky;               /* 粘性定位 */
  top: 0;                         /* 固定在顶部 */
  background: #1a1a1a;            /* 背景色 */
  z-index: 2;                     /* 层级控制 */
  display: flex;                  /* 弹性布局 */
  align-items: center;            /* 垂直居中 */
  gap: 10px;                      /* 元素间距 */
}

/* ========== 内容区域 ========== */
.preview-content,
.result-content {
  flex: 1;                        /* 填充剩余空间 */
  overflow-y: auto;               /* 垂直滚动条 */
  padding: 0 10px;                /* 左右内边距 */
  color: #e0e0e0;                 /* 文字颜色 */
  line-height: 1.5;               /* 行高 */
  min-height: 150px;              /* 最小高度保障 */
}

/* ========== 分页控件 ========== */
.pagination-controls {
  position: sticky;               /* 粘性定位 */
  bottom: 0;                      /* 固定在底部 */
  display: flex;                  /* 弹性布局 */
  justify-content: center;        /* 水平居中 */
  gap: 15px;                      /* 按钮间距 */
  padding: 2px 2px;             /* 内边距 */
  background: #333;               /* 背景色 */
  border-radius: 4px;             /* 圆角 */
  margin-top: auto;               /* 推到容器底部 */
  z-index: 2;                     /* 层级控制 */
}

/* ========== 智能分析按钮 ========== */
.analyze-btn {
  background: #007bff;            /* 蓝色背景 */
  color: white;                   /* 文字颜色 */
  border: none;                   /* 无边框 */
  padding: 8px 15px;              /* 内边距 */
  border-radius: 4px;             /* 圆角 */
  cursor: pointer;                /* 手型指针 */
  transition: background 0.3s;    /* 过渡动画 */
}

.analyze-btn:hover {
  background: #0056b3;            /* 悬停颜色 */
}

/* ========== 滚动条样式 ========== */
::-webkit-scrollbar {
  width: 8px;                     /* 垂直滚动条宽度 */
  height: 8px;                    /* 水平滚动条高度 */
}

::-webkit-scrollbar-track {
  background: #2a2a2a;            /* 轨道颜色 */
  border-radius: 4px;             /* 圆角 */
}

::-webkit-scrollbar-thumb {
  background: #4a4a4a;            /* 滑块颜色 */
  border-radius: 4px;             /* 圆角 */
}

::-webkit-scrollbar-thumb:hover {
  background: #5a5a5a;            /* 悬停颜色 */
}

/* ========== 响应式设计 ========== */
@media (max-height: 600px) {
  .file-preview {
    max-height: 30vh;             /* 小屏幕增加高度 */
  }
  
  .preview-content,
  .result-content {
    font-size: 0.9em;             /* 缩小文字 */
  }
}

/* ========== 错误提示 ========== */
.error-notice {
  color: #ff4444;                 /* 红色文字 */
  padding: 10px;                  /* 内边距 */
  border: 1px solid #ff4444;      /* 边框 */
  border-radius: 4px;             /* 圆角 */
  margin: 10px 0;                 /* 外边距 */
  background: rgba(255,68,68,0.1);/* 背景色 */
}

/* 调整预览内容区文字颜色 */
.preview-content {
  color: black; /* 提高对比度 */
}

/* 文件元信息单行显示 */
.file-meta {
  flex-wrap: nowrap; /* 禁止换行 */
  overflow: hidden;
}
.file-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 60%; /* 控制文件名显示长度 */
}
.file-size {
  flex-shrink: 0; /* 禁止缩小 */
}


/* ========== 文件元信息高度优化 ========== */
.file-meta {
  height: 24px;                   /* 原50px → 36px */
  min-height: 24px;               /* 同步调整 */
  padding: 6px 10px;              /* 减少内边距 */
  font-size: 0.9em;               /* 缩小字体 */
  gap: 8px;                       /* 缩小元素间距 */
}

.file-icon {
  font-size: 1.1em;               /* 适当缩小图标 */
}

/* ========== 分页控件高度优化 ========== */
.pagination-controls {
  padding: 4px 8px;              /* 原10px 20px → 6px 12px */
  gap: 10px;                      /* 缩小按钮间距 */
}

.page-prev, 
.page-next {
  padding: 4px 10px;              /* 原8px 15px → 4px 10px */
  font-size: 0.85em;              /* 缩小按钮文字 */
}

.page-info {
  font-size: 0.9em;               /* 缩小页码文字 */
}

/* ========== 复合优化 ========== */
.preview-column {
  padding: 10px;                  /* 原15px → 10px */
}

.preview-content {
  min-height: 120px;              /* 原150px → 120px */
}




/* ========== 全局文字颜色修正 ========== */
.preview-content {
  color: #f0f0f0 !important; /* 强制覆盖所有文字颜色 */
}

/* ========== 分页控件文字颜色 ========== */
.pagination-controls {
 // color: #fff !important; /* 强制白色文字 */
  background: rgba(0, 0, 0, 0.7) !important; /* 深色半透明背景 */
}

.page-prev, 
.page-next {
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}

/* ========== 表格内容颜色修正 ========== */
.table-preview table {
  color: #e0e0e0 !important;
}
.table-preview td,
.table-preview th {
  color: inherit !important; /* 继承父级颜色 */
}

/* ========== PDF内容颜色修正 ========== */
.pdf-page .page-content {
  color: #f0f0f0 !important;
  background: transparent !important;
}

/* ========== 代码高亮修正 ========== */
.code-preview {
  color: #c0c0c0 !important;
  background: rgba(255,255,255,0.1) !important;
}

/* ========== 强制覆盖内联样式 ========== */
.preview-content *:not(pre) {
  color: inherit !important;
}







/* 修改global.css中的#chat-history部分 */
#chat-history {
    /* 保持原有基础样式 */
    height: calc(100vh - 240px);
    min-height: 300px;
    overflow-y: auto;
    background: linear-gradient(...);
    
    /* 新增关键属性 */
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 90px;
}

/* 在file.css中添加以下规则 */
.file-preview {
    /* 保持原有样式 */
    background: #000;
    width: 100%;
    margin: 10px 0;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    
    /* 新增关键属性 */
    flex-shrink: 0; /* 禁止高度压缩 */
    min-height: 300px; /* 最小高度保障 */
    height: auto; /* 自动高度 */
}

.preview-grid-container {
    height: 100%;
    min-height: 250px;
    display: grid;
    grid-template-rows: 1fr; /* 固定行高 */
}

.preview-column,
.analysis-column {
    overflow-y: auto; /* 内部滚动 */
    max-height: 250px; /* 限制内容区域高度 */
}




/* 在file.css中添加 */
.preview-content .doc-preview {
  background: transparent !important;
  color: #f0f0f0 !important;
}

.preview-content .doc-preview * {
  color: inherit !important;
  background-color: transparent !important;
}