/* ============================================================
   T笔记 · 编辑器样式（顶栏 / 画布区 / 页面 / 图片层）
   ============================================================ */

/* ---------- 顶部栏 ---------- */
#topbar{
  height:var(--top-h);flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:0 10px;background:var(--card);border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-s);z-index:30;
}
.tb-btn{
  height:40px;padding:0 13px;border-radius:10px;display:flex;align-items:center;gap:7px;
  font-size:14px;font-weight:500;color:var(--text);transition:background .15s;flex:0 0 auto;
}
.tb-btn:hover{background:#f1f4f9;}
.tb-btn:active{background:#e6ecf7;}
.tb-btn.primary{background:var(--brand);color:#fff;}
.tb-btn.primary:hover{background:var(--brand-dark);}
.tb-name{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 6px;}
.tb-name b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-name span{font-size:11.5px;color:var(--muted);}

/* ---------- 画布区 ---------- */
/* 画布区容器：viewer / 激光层 / 目录面板都在里面，共用同一套坐标 */
#viewerWrap{
  position:relative;flex:1;min-height:0;display:flex;overflow:hidden;
}
#viewer{
  flex:1;position:relative;overflow:auto;background:var(--bg);
  touch-action:none;overscroll-behavior:contain;
  /* 关掉滚动锚定：双指拖动时页面对象会被创建/销毁，
     浏览器若自动"补偿"滚动位置，就会和我们的手动滚动打架，表现成画面抖动 */
  overflow-anchor:none;
}
#pages{position:relative;padding:0;}

/* 页面容器：位置与尺寸由 JS 用整数像素设定，
   这样 canvas 不会被浏览器按半像素重采样，画面才不会发虚 */
.page-wrap{
  position:absolute;left:0;top:0;
  background:#fff;border-radius:2px;
  box-shadow:0 2px 10px rgba(23,32,48,.12),0 1px 2px rgba(23,32,48,.08);
  overflow:hidden;
}
.page-wrap canvas{position:absolute;left:0;top:0;display:block;}

.pdf-canvas{z-index:1;}
.anno-canvas{z-index:2;}

/* ---------- 激光笔 / 笔迹预览的屏幕层 ----------
   一层放光晕（低分辨率 + CSS 高斯模糊），一层放细亮的核心线。
   放在屏幕坐标系里而不是每页各一张，内存固定、缩放时不用重建 */
#laserLayer{
  position:absolute;z-index:6;pointer-events:none;overflow:hidden;
}
#laserLayer canvas{position:absolute;left:0;top:0;display:block;}
/* 默认隐藏（不用激光笔时不占合成层）；注意要写得比 "#laserLayer canvas" 更具体 */
#laserLayer #laserGlow{filter:blur(9px);display:none;}
#laserCore{} /* 核心线不加模糊，保持清晰 */

.page-num{
  position:absolute;left:0;right:0;bottom:6px;text-align:center;
  font-size:11px;color:#c8ceda;z-index:4;pointer-events:none;
}

/* 页面位图还没渲染好时的占位，避免出现一整片白 */
.page-loading{
  position:absolute;inset:0;z-index:5;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--muted);font-size:13px;
}
.page-loading .mini-spinner{
  width:28px;height:28px;border-radius:50%;
  border:3px solid #e2e8f3;border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
/* 占位里的细进度条：走不确定态（单页渲染拿不到百分比），
   只表达"正在渲染中"，确定性的页数进度由顶部的 .render-hint 负责 */
.page-loading .mini-bar{
  position:relative;width:120px;height:4px;border-radius:2px;
  background:#e9edf5;overflow:hidden;
}
.page-loading .mini-bar i{
  position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:2px;
  background:linear-gradient(90deg,#b9cdff,var(--brand));
  animation:miniSlide 1.15s ease-in-out infinite;
}
@keyframes miniSlide{
  0%{left:-42%;}
  100%{left:102%;}
}

/* ---------- 渲染进度提示（慢渲染才出现） ---------- */
/* 期望用户行为：渲染快时完全不出现（不给"页面在忙"的错觉）；
   超过 RENDER_HINT_DELAY 还没好，才浮出来告诉用户"正在渲染、别以为卡了"。
   放在顶部居中：底部中间被"收起工具栏"后的浮动把手占着，会打架 */
.render-hint{
  position:absolute;left:50%;transform:translateX(-50%);
  top:12px;z-index:24;pointer-events:none;
  min-width:230px;max-width:60%;
  padding:10px 14px 11px;border-radius:12px;
  background:rgba(28,32,36,.9);color:#fff;
  box-shadow:var(--shadow-l);
  backdrop-filter:blur(6px);
  animation:rhIn .18s ease-out;
}
.render-hint.hidden{display:none;}
@keyframes rhIn{from{opacity:0;transform:translateX(-50%) translateY(-8px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.render-hint .rh-head{display:flex;align-items:center;gap:8px;font-size:12.5px;white-space:nowrap;}
.render-hint .rh-spin{
  width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.28);border-top-color:#fff;
  animation:spin .75s linear infinite;
}
.render-hint .rh-count{margin-left:auto;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.72);}
.render-hint .rh-track{
  margin-top:8px;height:4px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.2);
}
.render-hint .rh-track i{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,#8fb3ff,#fff);
  transition:width .18s ease-out;
}
/* 只有一页在渲染时，进度百分比没意义 → 用不确定态来回扫 */
.render-hint.indeterminate .rh-track i{
  width:40% !important;animation:miniSlide 1.15s ease-in-out infinite;
}
.render-hint.indeterminate .rh-count{display:none;}

/* ---------- 图片编辑浮层 ---------- */
#imgEditor{position:absolute;z-index:6;pointer-events:none;}
#imgEditor.on{pointer-events:auto;}
#imgEditor .ie-box{position:absolute;inset:0;border:2px solid var(--brand);background:rgba(47,107,255,.06);}
#imgEditor .ie-img{width:100%;height:100%;display:block;}
#imgEditor .ie-h{
  position:absolute;width:26px;height:26px;border-radius:50%;
  background:#fff;border:2px solid var(--brand);
}
#imgEditor .ie-h[data-h="nw"]{left:-14px;top:-14px;cursor:nwse-resize;}
#imgEditor .ie-h[data-h="ne"]{right:-14px;top:-14px;cursor:nesw-resize;}
#imgEditor .ie-h[data-h="sw"]{left:-14px;bottom:-14px;cursor:nesw-resize;}
#imgEditor .ie-h[data-h="se"]{right:-14px;bottom:-14px;cursor:nwse-resize;}
#imgEditor .ie-tools{
  position:absolute;left:50%;transform:translateX(-50%);top:-56px;
  display:flex;gap:6px;background:#fff;border-radius:12px;padding:6px;
  box-shadow:var(--shadow-l);border:1px solid var(--line);pointer-events:auto;
  /* 关键：宽度按内容撑开，不然会被小图片的宽度挤成竖排文字 */
  width:max-content;max-width:none;white-space:nowrap;
}
#imgEditor .ie-tools button{
  height:38px;padding:0 12px;border-radius:8px;display:flex;align-items:center;gap:6px;
  font-size:13.5px;background:#f4f6fa;
}
#imgEditor .ie-tools button:active{background:#e6ecf7;}
#imgEditor .ie-tools button.danger{background:var(--danger-soft);color:var(--danger);}