/* 10-16 第十二轮（白晨：随手记靠颜色区分没人看得懂；用户可能要自定义）：便签色换成用户自己的标签。
   一、八种标签色（同明度，五种沿用原便签色，补粉、青、橙）与「未分类」；二、便签左下角的标签签；三、便签板顶上的标签一排（图例兼筛选）与 AI 的新标签提议；
   四、换标签菜单；五、管理标签对话框；六、手机与减少动态效果。规矩照旧：颜色只做辨认，意思永远写在字上。 */

/* ============ 一、标签色 ============ */
.nc-blue { --sn-c: oklch(64% .08 250); --sn-p: oklch(96.6% .014 240); --sn-e: oklch(90.5% .026 240); }
.nc-amber { --sn-c: oklch(72% .11 66); --sn-p: oklch(96.9% .026 78); --sn-e: oklch(90.5% .045 74); }
.nc-green { --sn-c: oklch(66% .09 152); --sn-p: oklch(96.6% .022 150); --sn-e: oklch(90.5% .036 150); }
.nc-violet { --sn-c: oklch(64% .08 296); --sn-p: oklch(96.6% .018 296); --sn-e: oklch(90.5% .03 296); }
.nc-rose { --sn-c: oklch(66% .1 356); --sn-p: oklch(96.7% .018 356); --sn-e: oklch(90.5% .032 356); }
.nc-teal { --sn-c: oklch(64% .07 200); --sn-p: oklch(96.6% .016 200); --sn-e: oklch(90.5% .028 200); }
.nc-coral { --sn-c: oklch(67% .11 40); --sn-p: oklch(96.8% .02 46); --sn-e: oklch(90.5% .038 44); }
.nc-gray { --sn-c: oklch(68% .012 70); --sn-p: oklch(96.8% .007 75); --sn-e: oklch(90.5% .012 75); }
/* 未分类：白纸，颜色点是一个空心圈 */
.nc-none { --sn-c: oklch(72% .008 70); --sn-p: #FFFDFA; --sn-e: var(--line-strong); }
.lb-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sn-c); }
.nc-none .lb-dot, .nc-none.lb-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }

/* ============ 二、便签左下角的标签签 ============ */
.nt-meta { gap: 6px; margin-left: -3px; }
.nt-lb { display: inline-flex; flex: none; align-items: center; gap: 5px; max-width: 100%; height: 24px; padding: 0 5px 0 8px; border: 0; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--sn-c) 34%, transparent); color: var(--ink-2); font: 600 12px/1 var(--font-sans); cursor: pointer;
  transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease), color 160ms var(--ease); }
.nt-lb .lb-n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 7em; }
.nt-lb .lb-cv { flex: none; width: 12px; height: 12px; color: var(--ink-3); stroke-width: 2.2; transition: transform 160ms var(--ease); }
button.nt-lb:hover, .nt-lb[aria-expanded="true"] { background: #FFFFFF; color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--sn-c) 70%, transparent); }
.nt-lb[aria-expanded="true"] .lb-cv { transform: rotate(180deg); }
.nt-lb.is-none { color: var(--ink-3); background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px var(--line-strong); }
.nt-ghost .nt-lb { cursor: default; padding-right: 9px; }
.nt.is-recv .nt-lb { background: var(--sn-p); }
/* 便签底色跟着标签：没打字时输入便签保持空白虚线框，打了字或正在看某个标签就换上那个色 */

/* 输入时就能选标签（策划第二轮）：便签板的输入便签、顶栏胶囊「随手记」底栏各一枚 */
.lb-in { flex: none; }
.nt-new .lb-in { background: rgba(255, 255, 255, .85); }
.nt-new:not([class*="nc-"]) .lb-in.is-none { background: transparent; }
.isl-lbw { display: inline-flex; flex: none; }
.isl-lbw .lb-in { height: 28px; background: rgba(255, 255, 255, .7); }
.isl.t-ask .isl-lbw { display: none; }

/* ============ 三、标签一排与 AI 提议 ============ */
.nb-lbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 14px; }
.nb-lb { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2); font: 600 12.5px/1 var(--font-sans); white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--ease), box-shadow 160ms var(--ease), color 160ms var(--ease); }
.nb-lb b { font: 600 12px/1 var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.nb-lb:hover { background: var(--surface-3); color: var(--ink); }
.nb-lb[aria-pressed="true"] { background: var(--sn-p, #FFFFFF); box-shadow: inset 0 0 0 1.5px var(--sn-c, var(--ink)); color: var(--ink); }
.nb-lb[aria-pressed="true"] b { color: var(--ink-2); }
.nb-lbm { display: inline-flex; align-items: center; gap: 5px; height: 28px; margin-left: auto; padding: 0 8px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-3); font: 600 12px var(--font-sans); cursor: pointer; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.nb-lbm:hover { background: var(--surface-2); color: var(--ink); }
.nb-lbm .ico { width: 13px; height: 13px; }
.nb-none { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
/* AI 提议新标签：一条淡横幅；指上去时，被提到的那几张便签描一圈、其余变淡 */
.nb-sug { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 7px 8px 7px 12px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-2); }
.nb-sug > .ico { flex: none; width: 14px; height: 14px; color: var(--ink-3); }
.nb-sug > span { flex: 1; min-width: 0; }
.nb-sug b { font: 700 13px var(--font-num); color: var(--ink); }
.nb-sug .btn { flex: none; }
.nb .nt[data-sn] { transition: translate 220ms var(--ease), box-shadow 220ms var(--ease), opacity 200ms var(--ease); }
.nb:has(.nb-sug:hover, .nb-sug:focus-within) .nt[data-sn]:not(.in-sug) { opacity: .42; }
.nb:has(.nb-sug:hover, .nb-sug:focus-within) .nt.in-sug { box-shadow: inset 0 0 0 1.5px var(--ink-2), 0 12px 24px -16px rgba(90, 60, 40, .5); }

/* ============ 四、换标签菜单 ============ */
.lb-pop { min-width: 212px; }
.lb-pop .lb-i { justify-content: flex-start; gap: 9px; }
.lb-pop .lb-i .lb-dot { width: 9px; height: 9px; }
.lb-pop .lb-i .ok { margin-left: auto; }
.lb-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.lb-pop .lb-act { justify-content: flex-start; gap: 9px; color: var(--ink-2); }
.lb-pop .lb-act .ico { width: 15px; height: 15px; color: var(--ink-3); }
.lb-pop .lb-act small { margin-left: 8px; font-size: 12px; color: var(--ink-3); }
.lb-pop .lb-act[disabled] { opacity: .55; cursor: not-allowed; }
.lb-pop .lb-act[disabled]:hover { background: none; }
.lb-form { align-items: center; }
.lb-form .lb-dot { width: 9px; height: 9px; }
.lb-sws { display: flex; flex-wrap: wrap; padding: 2px 4px 6px; }
.lb-sws .sn-sw, .lbm-pal .sn-sw { width: 26px; height: 26px; }
.lb-sws .sn-sw i, .lbm-pal .sn-sw i { width: 16px; height: 16px; }
.lb-foot { max-width: 232px; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; line-height: 1.5; }

/* ============ 五、管理标签对话框 ============ */
.dlg-lb { width: min(480px, calc(100% - 24px)); }
.lbm { display: grid; gap: 6px; }
.lbm-r { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 28px 28px 28px; align-items: center; gap: 2px; padding: 4px 6px 4px 4px; border-radius: 12px; background: var(--sn-p); box-shadow: inset 0 0 0 1px var(--sn-e); }
.lbm-r.is-del { box-shadow: inset 0 0 0 1.5px var(--sn-c); }
.lbm-c { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: background-color 160ms var(--ease); }
.lbm-c:hover, .lbm-c[aria-expanded="true"] { background: rgba(255, 255, 255, .85); }
.lbm-c .lb-dot { width: 13px; height: 13px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.lbm-n { min-width: 0; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 600 14px var(--font-sans); outline: none; transition: background-color 140ms var(--ease), box-shadow 140ms var(--ease); }
.lbm-n:hover { background: rgba(255, 255, 255, .6); }
.lbm-n:focus { background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--sn-c); }
.lbm-cnt { margin: 0 6px 0 4px; font: 500 12px var(--font-num); color: var(--ink-3); white-space: nowrap; }
.lbm-ic { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-3); cursor: pointer; transition: background-color 140ms var(--ease), color 140ms var(--ease); }
.lbm-ic .ico { width: 14px; height: 14px; }
.lbm-ic:hover { background: rgba(255, 255, 255, .85); color: var(--ink); }
.lbm-ic.lbm-x:hover { color: var(--late-ink); }
.lbm-ic[disabled] { opacity: .3; cursor: default; }
.lbm-ic[disabled]:hover { background: none; color: var(--ink-3); }
.lbm-pal { display: flex; flex-wrap: wrap; padding: 0 4px 4px 32px; }
.lbm-del { padding: 10px 12px 12px; border-radius: 12px; background: var(--surface-2); }
.lbm-del p { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.lbm-to { display: flex; flex-wrap: wrap; gap: 6px; }
.lbm-to .nb-lb { background: #FFFFFF; }
.lbm-to .nb-lb[aria-pressed="true"] { background: var(--sn-p); }
.lbm-del-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.lbm-new { display: flex; align-items: center; gap: 8px; margin-top: 2px; padding: 5px 5px 5px 14px; border-radius: 12px; outline: 1.5px dashed var(--line-strong); outline-offset: -1.5px; }
.lbm-new:focus-within { outline-color: var(--sn-c); background: var(--sn-p); }
.lbm-new .lb-dot { width: 12px; height: 12px; margin-right: 4px; }
.lbm-new input { flex: 1; min-width: 0; height: 30px; border: 0; background: none; outline: none; font-size: 14px; }
.lbm-full { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.lbm-tip { display: flex; gap: 6px; margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.lbm-tip .ico { flex: none; width: 13px; height: 13px; margin-top: 3px; }

/* ============ 六、手机与减少动态效果 ============ */
@media (max-width: 760px) {
  .nb-lbs { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .nb-lbs::-webkit-scrollbar { display: none; }
  .nb-lbm { margin-left: 4px; }
  .nb-sug { flex-wrap: wrap; }
  .nb-sug > span { flex-basis: calc(100% - 24px); }
  .nb-sug .btn:first-of-type { margin-left: 22px; }
  .nt-lb .lb-n { max-width: 5em; }
  .nt-meta { flex-wrap: wrap; gap: 2px 4px; overflow: visible; }   /* 放不下时间就换到第二行，不截字 */
  .nt-lb { gap: 3px; padding: 0 3px 0 6px; }
  .nt-meta .nt-src { display: none; }   /* 窄屏：附件卡上方已有缩略图，来源图标让位给时间 */
  .nt-meta .nt-src + .nt-at::before { content: none; }
  .lbm-r { grid-template-columns: 32px minmax(0, 1fr) auto 26px 26px 26px; }
  .lbm-cnt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nt-lb, .nt-lb .lb-cv, .nb-lb, .nb .nt[data-sn], .lbm-n { transition: none; }
}