/* 基础样式 - 移动优先设计 */
.document-preview-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* 控制按钮容器 */
.document-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  background: #f8f9fa;
  z-index:99999999;
}

/* 控制按钮样式 */
.document-controls button, .fullscreen-btn {
  margin: 8px 0px;
  max-width: 18%;
  min-width:8%;
  height:30px;
  line-height:30px
  cursor: pointer;
  border: none;
  background:none;
}

.preview-content { transform-origin: top left; }

/* 按钮图标样式 */
.document-controls button img {
    width: 24px; /* 图标宽度 */
    height: 24px; /* 图标高度 */
    vertical-align: middle;
    opacity: 0.8;
    margin:0 auto !important;
    box-shadow:none !important;
    
    
}

.word-preview-container{
    padding-bottom: 60px;
    height: 85vh;
}

/* 按钮悬停效果 */
.document-controls button img:hover {
    width: 30px; /* 图标宽度 */
    height: 30px; /* 图标高度 */
    opacity: 1;
    vertical-align: middle;
   transition: opacity 0.6s;
}


.page-info{
    display:block;
    height:30px;
    line-height:30px;
  margin: 0 1.5rem;
  font-size: 1.2rem;
  color: #555;
  text-align: center;
}

/* 预览内容区域 */
.preview-content {
  position: relative;
  width: 100%;
  height: calc(100% - 0px); /* 减去控制栏高度 */
  background: #fff;
}

/* 防下载覆盖层 */
.document-protection-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

/* iframe和canvas基础样式 */
.word-iframe, .ppt-iframe, .pdf-canvas {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;
}

/* PDF画布特定样式 */
.ppt-iframe, .pdf-canvas {
  height: auto;
}


/* 响应式调整 - 平板设备 (768px以上) */
@media (min-width: 768px) {
  .document-preview-container {
    width: 90%;
    max-width: 1200px;
  }

  .document-controls {
    padding: 0.8rem;
  }

}

/* 响应式调整 - 桌面设备 (1024px以上) */
@media (min-width: 1024px) {
  .document-preview-container {
    width: 85%;
  }

}

/* 响应式调整 - 大屏设备 (1440px以上) */
@media (min-width: 1440px) {
  .document-preview-container {
    width: 80%;
    max-width: 1600px;
  }
}

/* 小屏幕特殊处理 */
@media (max-width: 480px) {
  .document-controls {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .page-info {
    width: 25%;
    margin: 0.5rem 0 0;
  }

  .document-controls button {
    flex: 1;
    max-width: 10%;
    min-width:8%;
  }
  /* 全屏状态下控制栏样式 */
:-webkit-full-screen  .word-iframe, 
:-webkit-full-screen  .ppt-iframe, 
:-webkit-full-screen  .pdf-canvas {
   height: auto;
    width: 100%;
  display: block; /* 避免inline元素的默认间距 */
  margin: 0 auto; /* 水平居中 */
}
}
/* 全屏状态样式 */
.document-preview-container:-webkit-full-screen,
.document-preview-container:-moz-full-screen,
.document-preview-container:-ms-fullscreen,
.document-preview-container:fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  margin: 0;
}

:-webkit-full-screen .document-controls {
  position:fixed;
  bottom:50px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(248, 249, 250, 0.9);
  border-radius: 5px;
  width:90%;
  z-index: 10000;
}

.preview-content-wrapper {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

/* Chrome/Safari/Edge */
.preview-content-wrapper::-webkit-scrollbar {
  display: none;
}