/* paperless-ext.css —— 反代注入层的设计系统
 *
 * 约定：
 *  - 所有选择器都在 #pngx-ext-* / .pngx-* 命名空间下，绝不触碰上游类名
 *  - 颜色/圆角/字体全部取自 Bootstrap 5.3 与 paperless 的 CSS 变量，深色模式自动适配
 *  - 淡色阴影/焦点环用 color-mix（--bs-primary-rgb 在上游是过期的默认值，不可用）
 */

#pngx-ext-dock {
  position: fixed;
  right: 1.25rem;
  bottom: 5rem;
  z-index: 2147483645;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;                          /* 各入口彼此分开、独立成钮 */
  font-family: var(--bs-body-font-family, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif);
}

/* ---------- 圆形动作按钮 ---------- */
.pngx-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--bs-border-width, 1px) solid var(--bs-border-color);
  border-radius: 50%;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .08);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pngx-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 6px 16px rgba(0, 0, 0, .14);
}
.pngx-fab:active { transform: translateY(0) scale(.97); }
.pngx-fab:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(68, 103, 208, .25);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--bs-primary) 25%, transparent);
}
.pngx-fab[disabled] { opacity: .45; pointer-events: none; }
.pngx-fab > svg { width: 1.25rem; height: 1.25rem; }

/* 主动作（文档编辑）：独立按钮中的唯一强调色 */
.pngx-fab--primary {
  width: 3.25rem;
  height: 3.25rem;
  border: 0;
  background: var(--bs-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(68, 103, 208, .35), 0 6px 18px rgba(68, 103, 208, .28);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--bs-primary) 35%, transparent),
              0 6px 18px color-mix(in srgb, var(--bs-primary) 28%, transparent);
}
.pngx-fab--primary:hover {
  background: color-mix(in srgb, var(--bs-primary) 88%, #000);
  color: #fff;
  box-shadow: 0 4px 10px rgba(68, 103, 208, .40), 0 10px 24px rgba(68, 103, 208, .30);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--bs-primary) 40%, transparent),
              0 10px 24px color-mix(in srgb, var(--bs-primary) 30%, transparent);
}
.pngx-fab--primary > svg { width: 1.5rem; height: 1.5rem; }

/* 悬浮提示（左侧） */
.pngx-fab__tip {
  position: absolute;
  right: calc(100% + .75rem);
  top: 50%;
  transform: translateY(-50%);
  padding: .375rem .625rem;
  border-radius: .375rem;
  background: var(--bs-emphasis-color, #000);
  color: var(--bs-body-bg);
  font-size: .75rem;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.pngx-fab:hover .pngx-fab__tip,
.pngx-fab:focus-visible .pngx-fab__tip { opacity: 1; }

/* ---------- 浮层面板（分类 / 上传 / 编辑器共用外壳） ---------- */
.pngx-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 10.5rem;
  z-index: 2147483644;
  display: flex;
  flex-direction: column;
  width: min(28rem, calc(100vw - 2.5rem));
  max-height: calc(100vh - 12rem);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: var(--bs-border-width, 1px) solid var(--bs-border-color);
  border-radius: .625rem;
  box-shadow: 0 .5rem 1.875rem rgba(0, 0, 0, .18);
  font-family: var(--bs-body-font-family, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif);
  font-size: .8125rem;
  line-height: 1.6;
  overflow: hidden;
}
/* 详情页多了「编辑」主按钮，Dock 更高，面板相应上移 */
body.pngx-has-edit .pngx-panel {
  bottom: 14.5rem;
  max-height: calc(100vh - 16rem);
}
.pngx-panel__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
  padding: .625rem 1rem;
  border-bottom: var(--bs-border-width, 1px) solid var(--bs-border-color);
  font-weight: 600;
}
.pngx-panel__title { flex: 1; }
.pngx-panel__body { flex: 1 1 auto; padding: .75rem 1rem; overflow: auto; }
.pngx-panel__foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
  padding: .625rem 1rem;
  border-top: var(--bs-border-width, 1px) solid var(--bs-border-color);
}

/* ---------- 通用小按钮 ---------- */
.pngx-btn {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .375rem .75rem;
  border: var(--bs-border-width, 1px) solid transparent;
  border-radius: .375rem;
  background: transparent;
  color: var(--bs-body-color);
  font: inherit;
  font-size: .8125rem;
  line-height: 1.5;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.pngx-btn:hover { background: var(--pngx-bg-alt, rgba(0, 0, 0, .04)); }
.pngx-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(68, 103, 208, .25);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--bs-primary) 25%, transparent);
}
.pngx-btn--primary {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}
.pngx-btn--primary:hover { background: color-mix(in srgb, var(--bs-primary) 85%, #000); }
.pngx-btn--muted {
  border-color: var(--bs-border-color);
  color: var(--bs-secondary-color, #6c757d);
}
.pngx-btn--danger { color: var(--bs-danger, #dc3545); }
.pngx-btn--icon {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  color: var(--bs-secondary-color, #6c757d);
}
.pngx-btn--icon svg { width: 1rem; height: 1rem; }

/* ---------- 上传面板 ---------- */
.pngx-drop {
  padding: 1rem;
  text-align: center;
  color: var(--bs-primary);
  background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
  border: 2px dashed color-mix(in srgb, var(--bs-primary) 45%, transparent);
  border-radius: .5rem;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.pngx-drop:hover,
.pngx-drop--over {
  background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
  border-color: var(--bs-primary);
}
.pngx-field { margin-top: .5rem; font-size: .75rem; color: var(--bs-secondary-color, #6c757d); }
.pngx-select {
  margin-left: .375rem;
  padding: .125rem .25rem;
  border: var(--bs-border-width, 1px) solid var(--bs-border-color);
  border-radius: .25rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font: inherit;
  font-size: .75rem;
}
.pngx-up-list { margin-top: .625rem; max-height: 32vh; overflow: auto; }
.pngx-up-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem 0;
  border-bottom: 1px dashed var(--bs-border-color);
}
.pngx-up-row:last-child { border-bottom: 0; }
.pngx-up-info { flex: 1; min-width: 0; }
.pngx-up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pngx-up-meta { color: var(--bs-secondary-color, #6c757d); font-size: .75rem; }
.pngx-up-meta a { color: var(--bs-primary); text-decoration: none; }
.pngx-up-meta a:hover { text-decoration: underline; }
.pngx-up-flag { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; flex: 0 0 auto; }
.pngx-up-flag > svg { width: 1rem; height: 1rem; }
.pngx-up-flag--ok { color: var(--bs-success, #198754); }
.pngx-up-flag--error { color: var(--bs-danger, #dc3545); }
.pngx-up-flag--stale { color: var(--bs-warning, #ffc107); }
.pngx-up-flag--busy { color: var(--bs-secondary-color, #6c757d); }
.pngx-up-status { margin-top: .375rem; min-height: 1.2em; font-size: .75rem; color: var(--bs-secondary-color, #6c757d); }

/* ---------- 分类浏览面板 ---------- */
.pngx-tree-item { display: block; padding: .25rem .375rem; border-radius: .25rem; color: var(--bs-body-color); text-decoration: none; }
.pngx-tree-item:hover { background: var(--pngx-bg-alt, rgba(0, 0, 0, .04)); color: var(--bs-body-color); }
.pngx-tree-item--active { background: color-mix(in srgb, var(--bs-primary) 12%, transparent); color: var(--bs-primary); }
.pngx-tree-count { margin-left: .375rem; font-size: .6875rem; color: var(--bs-secondary-color, #6c757d); }

/* ---------- 编辑器浮层 ---------- */
.pngx-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  flex-direction: column;
  background: var(--bs-body-bg);
}
.pngx-oo-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: 0 0 auto;
  padding: .5rem .75rem;
  background: #1f2937;
  color: #fff;
  font-size: .8125rem;
  line-height: 1.5;
}
.pngx-oo-bar .pngx-btn { color: inherit; }
.pngx-oo-bar .pngx-btn--muted { border-color: color-mix(in srgb, currentColor 40%, transparent); color: inherit; }
.pngx-oo-bar .pngx-btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.pngx-oo-status { opacity: .85; }
.pngx-oo-frame { flex: 1 1 auto; width: 100%; border: 0; }

/* ---------- 提示条 ---------- */
.pngx-toast {
  position: fixed;
  left: 50%;
  bottom: 6rem;
  transform: translateX(-50%);
  z-index: 2147483647;
  padding: .625rem 1rem;
  border-radius: .375rem;
  background: var(--bs-success, #166534);
  color: #fff;
  font: .875rem/1.5 system-ui, -apple-system, "PingFang SC", sans-serif;
  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .3);
}
.pngx-toast--error { background: var(--bs-danger, #b91c1c); }

/* ---------- 卡片视图：复选框常显（上游默认仅 hover 显示） ----------
 * 说明：这是唯一一处覆盖上游类名的样式，用于提升多选可发现性；
 * 复选框自身 pointer-events:none，点击会落到缩略图容器，由上游逻辑切换选中（不会重复触发）。
 * 删除本段即回退上游默认行为。
 */
.document-card .document-card-check { display: block; }

/* ---------- 上游 file-drop 卡死兜底（3.1.x 竞态） ----------
 * 上游状态残留时：内容包装层有 .pe-none，但覆盖层未激活（正常文件拖拽时覆盖层一定 active）。
 * 此时强制恢复点击；覆盖层激活时保持 pe-none，不影响正常文件拖放。
 * 注意：必须排除覆盖层自身（它也带 .pe-none），否则会把覆盖层变成可点击、拦截全页点击。
 */
pngx-file-drop:not(:has(> .global-dropzone-overlay.active)) > div.pe-none:not(.global-dropzone-overlay) {
  pointer-events: auto !important;
}

/* ---------- 深色模式：颜色随变量走，仅微调阴影与主按钮对比 ---------- */
[data-bs-theme="dark"] .pngx-fab {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
  html[data-bs-theme="auto"] .pngx-fab {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .5);
  }
}

/* ---------- 小屏适配：按钮贴近底部拇指区，面板作为底部抽屉 ---------- */
@media (max-width: 767.98px) {
  #pngx-ext-dock { bottom: 1.25rem; }
  .pngx-panel,
  body.pngx-has-edit .pngx-panel {
    left: 1rem;
    right: 1rem;
    width: auto;
    bottom: 12rem;
    max-height: calc(100vh - 14rem);
  }
}

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .pngx-fab, .pngx-fab__tip, .pngx-btn, .pngx-drop { transition: none; }
  .pngx-fab:hover, .pngx-fab:active { transform: none; }
}

/* ---------- 打印预览浮层（编辑器内「打印预览」） ---------- */
.pngx-print-overlay {
  position: fixed; inset: 0; z-index: 2147483647;
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center;
}
.pngx-print-panel {
  width: min(1040px, 94vw); height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .4);
}
.pngx-print-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.pngx-print-hint {
  padding: 6px 12px; font-size: 12px; line-height: 1.5;
  color: var(--bs-secondary-color, #6b7280);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.pngx-print-bar .pngx-select { width: auto; margin-left: 0; }
.pngx-print-title { font-weight: 600; margin-right: auto; }
.pngx-print-body { position: relative; flex: 1; display: flex; min-height: 0; }
.pngx-print-frame { flex: 1; width: 100%; border: 0; background: #525659; }
.pngx-print-busy, .pngx-print-error {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff; text-align: center; padding: 24px;
}
.pngx-print-busy { background: rgba(31, 35, 40, .55); }
.pngx-print-busy::before {
  content: ''; width: 18px; height: 18px; margin-right: 10px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  border-radius: 50%; animation: pngx-spin .8s linear infinite;
}
.pngx-print-error { display: none; background: rgba(127, 29, 29, .8); }
@keyframes pngx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pngx-print-busy::before { animation: none; }
}
@media (prefers-color-scheme: dark) {
  .pngx-print-panel { background: #1f2328; }
  .pngx-print-bar { border-bottom-color: rgba(255, 255, 255, .12); }
}

/* ---------- 打印弹层：头部 / 设置区 / 操作区 / 自定义控件 ---------- */
.pngx-print-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px 6px;
}
.pngx-print-head .pngx-print-hint { border: 0; padding: 0; flex: 1; min-width: 200px; }
.pngx-print-settings {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 8px 14px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.pngx-print-field { display: inline-flex; align-items: center; gap: 6px; }
.pngx-print-field__label {
  font-size: 12px; color: var(--bs-secondary-color, #6b7280); white-space: nowrap;
}
.pngx-print-input {
  width: 64px; padding: .125rem .25rem; font: inherit; font-size: .75rem;
  border: 1px solid var(--bs-border-color); border-radius: .25rem;
  background: var(--bs-body-bg); color: var(--bs-body-color);
}
.pngx-print-input--wide { width: 120px; }
.pngx-print-custom {
  display: none; align-items: center; gap: 4px; font-size: 12px;
  color: var(--bs-secondary-color, #6b7280);
}
.pngx-print-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
/* 关闭确认弹窗（未保存修改） */
/* 注意：用「遮罩层滚动 + 弹窗 margin:auto」而不是「弹窗内部滚动」——
   内部滚动在 macOS/iOS 上滚动条不可见、移动端动态视口（vh 偏大）时底部会被裁掉，
   导致文字/按钮显示不全；遮罩层滚动则任何窗口高度下内容都可滚到。 */
.pngx-confirm-overlay {
  position: fixed; inset: 0; z-index: 2147483647;
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: flex-start; justify-content: center;
  overflow: auto; box-sizing: border-box;
  padding: 5vh 12px;
  scrollbar-width: thin;
}
.pngx-confirm {
  width: min(440px, 92vw); background: #fff; color: #1f2328;
  border-radius: 12px; padding: 18px 18px 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .4);
  margin: auto;               /* 空间足够时自动居中，不够时从顶部开始可滚动 */
  overflow-wrap: anywhere;    /* 超长文件夹名/路径不撑破弹窗 */
}
.pngx-confirm__msg { font-weight: 600; font-size: 15px; }
.pngx-confirm__sub { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: #6b7280; }
.pngx-confirm__list { margin: 6px 0 0; padding-left: 1.2em; }
.pngx-confirm__list li { margin-top: 2px; }
.pngx-confirm__row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
@media (prefers-color-scheme: dark) {
  .pngx-confirm { background: #1f2328; color: #e6e8eb; }
  .pngx-confirm__sub { color: #9aa1ab; }
  .pngx-print-settings, .pngx-print-actions { border-bottom-color: rgba(255, 255, 255, .12); }
}
.pngx-confirm__status {
  margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  font-size: 13px; background: rgba(37, 99, 235, .08); color: #2563eb;
}
@media (prefers-color-scheme: dark) {
  .pngx-confirm__status { background: rgba(96, 165, 250, .12); color: #93c5fd; }
}

/* ---------- 已删除文件夹的引用确认（标签仍有文档时的删除提示） ---------- */
.pngx-confirm--wide { width: min(680px, 94vw); }
.pngx-orphan {
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid rgba(220, 53, 69, .35);
  border-radius: 8px;
  background: rgba(220, 53, 69, .05);
}
.pngx-orphan .pngx-confirm__row { margin-top: 10px; flex-wrap: wrap; }
.pngx-orphan .pngx-btn { flex: 0 0 auto; }
.pngx-orphan__note { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: #6b7280; }
@media (prefers-color-scheme: dark) {
  .pngx-orphan__note { color: #9aa1ab; }
}
@media (max-width: 560px) {
  .pngx-confirm-overlay { padding: 3vh 8px; }
  .pngx-orphan .pngx-confirm__row { flex-direction: column; }
  .pngx-orphan .pngx-btn { width: 100%; justify-content: center; }
}
@media (prefers-color-scheme: dark) {
  .pngx-orphan {
    background: rgba(220, 53, 69, .12);
    border-color: rgba(220, 53, 69, .5);
  }
}

/* ---------- 编辑区左上角工具按钮（打印 / 打印预览） ---------- */
.pngx-oo-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.pngx-oo-bar { flex-wrap: wrap; }
@media (max-width: 720px) {
  .pngx-oo-btn span { display: none; }        /* 窄屏只留图标，交互不变 */
}

/* ---------- 打印缩放步进器（对齐 WPS 的 − / 输入 / % / + / 100%） ---------- */
.pngx-print-scale-input { width: 58px; text-align: right; }
.pngx-step {
  padding: .125rem .5rem !important;
  line-height: 1.4 !important;
  font-size: .8125rem !important;
  min-width: 28px;
}