/* ==========================================================================
   星际导航 · 全局便签
   - 右下角入口：电脑端在音乐图标上方；手机端放进右下角操作列（音乐上方）
   - 已植入便签浮层：nav-note.js 渲染，可拖动，位置按视口百分比保存在本地
   ========================================================================== */

/* ---------------- 右下角入口 ---------------- */
.nav-note-fab{
  position:fixed;right:20px;bottom:calc(190px + env(safe-area-inset-bottom));
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);color:var(--accent);
  display:grid;place-items:center;font-size:17px;cursor:pointer;z-index:94;
  box-shadow:var(--shadow);transition:all .2s ease;
  -webkit-appearance:none;appearance:none;padding:0;line-height:1;
}
.nav-note-fab:hover{color:#fff;background:var(--grad);border-color:transparent;transform:translateY(-2px)}
.nav-note-fab:active{transform:scale(.94)}
/* 有便签已植入前端时，入口右上角一个小圆点提示 */
.nav-note-fab.has-pin::after{
  content:'';position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 2px var(--surface);
}
body.no-note .nav-note-fab,
body.no-note .mdock-acts .tbtn.nav-note-mact{display:none}

/* ---------------- 已植入便签浮层 ---------------- */
.nav-note-layer{position:fixed;inset:0;z-index:92;pointer-events:none}
.nn-item{
  position:absolute;width:248px;max-width:calc(100vw - 16px);
  border-radius:13px;background:#fff6b7;color:#23262d;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 12px 28px rgba(15,23,42,.16),0 2px 6px rgba(15,23,42,.06);
  pointer-events:auto;overflow:hidden;
  transition:box-shadow .18s ease;
  animation:nn-in .18s ease;
}
@keyframes nn-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.nn-item.nn-static{animation:none}
.nn-item:hover{box-shadow:0 16px 34px rgba(15,23,42,.2),0 3px 8px rgba(15,23,42,.08)}
.nn-item.nn-drag{transition:none;box-shadow:0 20px 44px rgba(15,23,42,.24)}
.nn-hd{
  display:flex;align-items:center;gap:4px;padding:6px 8px 5px 7px;
  cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;
  background:rgba(255,255,255,.32);border-bottom:1px solid rgba(15,23,42,.06);
}
.nn-item.nn-drag .nn-hd{cursor:grabbing}
.nn-grip{font-size:13px;color:rgba(35,38,45,.38);flex:none}
.nn-title{
  flex:1;min-width:0;font-size:12.5px;font-weight:800;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nn-hd button{
  flex:none;width:22px;height:22px;border-radius:6px;border:0;background:transparent;
  color:rgba(35,38,45,.55);cursor:pointer;display:grid;place-items:center;font-size:12px;
  opacity:0;transition:opacity .15s,background .15s,color .15s;
  -webkit-appearance:none;appearance:none;padding:0;line-height:1;
}
.nn-item:hover .nn-hd button,.nn-hd button:focus-visible{opacity:1}
.nn-hd button:hover{background:rgba(15,23,42,.08);color:#23262d}
.nn-hd button.nn-del:hover{background:#ff5f57;color:#fff}
.nn-body{
  padding:2px 10px 10px;font-size:12.5px;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;overflow:auto;max-height:168px;
}
.nn-body:empty{display:none}

@media(max-width:640px){
  /* 手机端入口在右下角操作列里，和音乐按钮同一套 34px 圆形 */
  .nav-note-fab{display:none}
  .mdock-acts .tbtn.nav-note-mact{display:inline-flex}
  .nn-item{width:220px;border-radius:12px}
  .nn-hd button{opacity:1}
  .nn-body{max-height:132px;font-size:12px}
}