:root {
  --preview-width: 50%; /* 初始宽度 */
}

/* 面板基础样式 */
#preview-panel {
  position: fixed;
  top: 0; 
  right: 0;
  width: var(--preview-width);
  height: 100%;
  background: #ffffff;              
  border-left: 2px solid #008cff90;  
  border-radius: 4px 0 0 4px;
  box-shadow: 0 2px 12px rgba(255, 255, 255, 0.12);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform .25s ease, width .15s ease;
  display: flex;
  flex-direction: column;
  z-index: 200;
}

/* 打开时 */
#preview-panel.open {
  transform: translateX(0);
}

/* header */
.preview-header {
  background:#00000012;
  color: #ffffff;
  font-family: var(--md-font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.013);
}

/* header title */
.preview-header .title {
  color: #008cff;      /* 黑色 */
  font-family: var(--md-font-sans);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* 关闭按钮 */
#preview-close {
  background: #060606;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: color 0.2s;
}
#preview-close:hover {
  color: #bbdefb;
}

/* 内容区 */
#preview-panel .preview-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}

#preview-panel .content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  box-sizing: border-box;
  background: #f7f9fc;
}

/* 拖拽条 */
#preview-resizer {
  width: 6px;
  cursor: col-resize;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 300;
}

/* 主内容让位 */
body.preview-open .md-content {
  transition: width .25s;
  display: inline-block;
  vertical-align: top;
}

/* 拖拽时 cursor */
body.resizing {
  cursor: col-resize !important;
}

/* 深色模式 */
[data-md-color-scheme="slate"] #preview-panel {
  background: #1c1f23;
  border-left-color: #2196F3;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.081);
}

[data-md-color-scheme="slate"] .preview-header {
  background: #2196F3;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.081);
}

[data-md-color-scheme="slate"] #preview-close:hover {
  color: #bbdefb;
}

[data-md-color-scheme="slate"] #preview-panel .content {
  background: #222529;
  color: #00000030;
}

/* ------------------------------------------ */
/* 移动端禁用预览面板 (小于 960px)            */
/* ------------------------------------------ */

@media screen and (max-width: 960px) {
    /* 强制隐藏面板，以防 JS 逻辑出错 */
    #preview-panel {
        display: none !important;
    }

    /* 强制主内容区宽度恢复 100%，即使 body 上有 preview-open 类 */
    body.preview-open .md-content {
        width: 100% !important;
        transition: none; /* 移除过渡效果 */
    }

    /* 禁用拖拽时的鼠标样式 */
    body.resizing {
        cursor: default !important;
    }
}