/* UniDoc Ink UI — 画笔/荧光笔/套索/橡皮擦独立样式模块。 */
.pen-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; overflow: visible; }
.pen-layer .pen-stroke { pointer-events: none; transition: filter .12s, opacity .12s; }
.pen-layer .pen-stroke.pen-selected { filter: drop-shadow(0 0 1.5px #1677ff) drop-shadow(0 0 3px rgba(22,119,255,.65)); }
.pen-layer .pen-lasso-path { fill: rgba(22,119,255,.07); stroke: #1677ff; stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; pointer-events: none; }
body.pen-active .page { cursor: crosshair; }
body.pen-active .page-content, body.pen-active .udoc-textbox { pointer-events: none !important; }
body.pen-active .pen-layer {
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
body.pen-active #canvas { overscroll-behavior: contain; }
body.pen-active.pen-erase .pen-layer { cursor: none; }

.pen-eraser-cursor {
  position: fixed; left: 0; top: 0; z-index: 100005; display: none;
  width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid rgba(25,32,44,.82); background: rgba(255,255,255,.45);
  box-shadow: 0 0 0 1px rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.5);
  transform: translate(-50%, -50%); pointer-events: none;
}
body.pen-active.pen-erase .pen-eraser-cursor.visible { display: block; }

.pen-selection-box {
  position: absolute; z-index: 8; box-sizing: border-box; border: 1.5px solid #1677ff;
  background: rgba(22,119,255,.035); cursor: move; touch-action: none;
}
.pen-selection-box::before {
  content: ""; position: absolute; inset: -5px; border: 1px solid rgba(255,255,255,.8); pointer-events: none;
}
.pen-selection-box .ps-handle {
  position: absolute; width: 11px; height: 11px; margin: 0;
  border: 1.5px solid #1677ff; border-radius: 2px; background: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9);
}
.pen-selection-box .ps-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.pen-selection-box .ps-n  { left: 50%; top: -6px; transform: translateX(-50%); cursor: ns-resize; }
.pen-selection-box .ps-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.pen-selection-box .ps-e  { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.pen-selection-box .ps-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.pen-selection-box .ps-s  { left: 50%; bottom: -6px; transform: translateX(-50%); cursor: ns-resize; }
.pen-selection-box .ps-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.pen-selection-box .ps-w  { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
/* 旋转手柄：顶部圆形 Material 按钮，与对象旋转手柄观感一致 */
.pen-selection-box .ps-rot {
  position: absolute; left: 50%; top: -36px; transform: translateX(-50%);
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: #1677ff; color: #fff;
  font-size: 15px; line-height: 1; cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,.3);
  user-select: none;
}
.pen-selection-box .ps-rot::before {
  content: ""; position: absolute; top: 24px; left: 50%; width: 1px; height: 12px;
  background: #1677ff; transform: translateX(-50%);
}
#present-mode .pen-selection-box,
#present-mode .pen-lasso-path { display: none !important; }
#present-mode .pen-stroke.pen-selected { filter: none !important; }

#pen-toolbar {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 88; display: flex; align-items: center; gap: 9px;
  max-width: calc(100vw - 24px); box-sizing: border-box;
  padding: 8px 10px 8px 14px; background: rgba(255,255,255,.97); border: 1px solid #c3c9d2;
  border-radius: 18px; box-shadow: 0 12px 34px rgba(15,25,40,.24);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); touch-action: manipulation;
  font: 12px "Segoe UI", "Microsoft YaHei", sans-serif; color: #2b3038;
}
#pen-toolbar.hidden { display: none; }
#pen-toolbar .pt-title { display: flex; flex-direction: column; min-width: 50px; line-height: 1.05; }
#pen-toolbar .pt-title b { font-size: 12px; }
#pen-toolbar .pt-title small { margin-top: 3px; color: #8992a1; font-size: 9px; font-weight: 500; white-space: nowrap; }
#pen-toolbar .pt-colors { display: flex; gap: 5px; }
#pen-toolbar .pt-c { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #c3c9d2; cursor: pointer; padding: 0; }
#pen-toolbar .pt-c.active { box-shadow: 0 0 0 2px var(--accent); }
#pen-toolbar .pt-size { display: flex; align-items: center; gap: 6px; color: #5a6270; }
#pen-toolbar .pt-size input { width: 84px; touch-action: none; }
#pen-toolbar .pt-eraser-size { display: none; }
#pen-toolbar.erasing .pt-ink-size { display: none; }
#pen-toolbar.erasing .pt-eraser-size { display: flex; }
#pen-toolbar button { min-height: 30px; border: 1px solid #d7dce4; background: #fff; border-radius: 8px; padding: 5px 9px; cursor: pointer; font: inherit; color: #2b3038; white-space: nowrap; }
#pen-toolbar button:hover { border-color: var(--accent); }
#pen-toolbar .pt-done { background: var(--accent); color: #fff; border-color: var(--accent); }
#pen-toolbar .pt-modes { display: flex; gap: 3px; }
#pen-toolbar .pt-mode.active, #pen-toolbar .pt-shape.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#pen-toolbar .pt-mode[data-tool="highlighter"].active { background: #f4c542; border-color: #dcae22; color: #3c3210; }
#pen-toolbar .pt-mode[data-tool="lasso"].active { background: #1677ff; border-color: #1677ff; }
#pen-toolbar .pt-input { display: flex; padding: 2px; gap: 2px; border-radius: 10px; background: #eef1f5; }
#pen-toolbar .pt-input .pt-input-mode { min-height: 26px; border: 0; padding: 4px 8px; background: transparent; color: #697386; }
#pen-toolbar .pt-input .pt-input-mode.active { background: #fff; color: #1769aa; box-shadow: 0 1px 3px rgba(24,37,55,.16); }
#pen-toolbar.erasing .pt-colors, #pen-toolbar.lassoing .pt-colors { opacity: .35; pointer-events: none; }
#pen-toolbar .pt-shape { padding-inline: 8px; }

@media (max-width: 1060px) {
  #pen-toolbar { justify-content: center; flex-wrap: wrap; gap: 7px; width: max-content; padding: 7px 9px; border-radius: 16px; }
  #pen-toolbar .pt-title { display: none; }
  #pen-toolbar .pt-size input { width: 72px; }
  #pen-toolbar button { padding-inline: 8px; }
}
@media (max-width: 620px) {
  #pen-toolbar { width: calc(100vw - 16px); bottom: max(8px, env(safe-area-inset-bottom)); }
  #pen-toolbar .pt-size span { display: none; }
  #pen-toolbar .pt-size input { width: 60px; }
  #pen-toolbar .pt-c { width: 20px; height: 20px; }
  #pen-toolbar #pt-clear { font-size: 0; width: 32px; padding: 0; }
  #pen-toolbar #pt-clear::before { content: "⌫"; font-size: 16px; }
}
@media print {
  #pen-toolbar, .pen-eraser-cursor, .pen-selection-box, .pen-lasso-path { display: none !important; }
  .pen-stroke.pen-selected { filter: none !important; }
}