.nt-btn { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; background: var(--piece, #3d5afe); color: var(--on-piece, #fff); box-shadow: 0 4px 0 var(--piece-edge, #2a3fc4), 0 10px 24px rgba(20, 17, 43, .18); font: 600 15px/1 var(--font-ui, Lexend, system-ui, sans-serif); cursor: pointer; }
.nt-btn svg, .nt-pin svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nt-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--piece-edge, #2a3fc4); }
.nt-btn.on { background: var(--ink, #14112b); color: var(--desk, #fff); box-shadow: 0 4px 0 var(--ink-2, #38345c); }
.nt-picking, .nt-picking * { cursor: crosshair !important; }
.nt-hover { outline: 2px solid var(--piece, #3d5afe) !important; outline-offset: 2px !important; border-radius: 6px; }
.nt-pin { position: absolute; z-index: 61; width: 30px; height: 30px; margin: -30px 0 0 -4px; display: grid; place-items: center; border-radius: 15px 15px 15px 3px; background: var(--piece, #3d5afe); color: var(--on-piece, #fff); box-shadow: 0 3px 0 var(--piece-edge, #2a3fc4); pointer-events: none; }
.nt-pin svg { width: 15px; height: 15px; }
.nt-pop { position: absolute; z-index: 62; display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--glass-strong, rgba(255,255,255,.92)); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--lens, 0 12px 32px rgba(20,17,43,.2)); color: var(--ink, #14112b); font-family: var(--font-ui, Lexend, system-ui, sans-serif); }
.nt-pop textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 76px; border: 0; border-bottom: 2px solid var(--piece, #3d5afe); background: transparent; color: inherit; font-family: inherit; font-size: 16px; line-height: 1.4; padding: 6px 2px; outline: none; }
.nt-row { display: flex; justify-content: flex-end; gap: 8px; }
.nt-row button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; background: var(--key, #fff); color: var(--on-key, #14112b); box-shadow: 0 3px 0 var(--key-edge, #c9cde6); }
.nt-row .nt-send { background: var(--piece, #3d5afe); color: var(--on-piece, #fff); box-shadow: 0 3px 0 var(--piece-edge, #2a3fc4); }
.nt-sent { margin: 0; font-weight: 600; color: var(--go, #1b8a5a); }
.nt-tip { position: fixed; z-index: 61; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 58px); width: min(280px, calc(100vw - 32px)); box-sizing: border-box; display: grid; gap: 10px; padding: 14px; border-radius: 18px 18px 6px 18px; background: var(--glass-strong, rgba(255,255,255,.92)); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--lens, 0 12px 32px rgba(20,17,43,.2)); color: var(--ink, #14112b); font: 500 15px/1.4 var(--font-ui, Lexend, system-ui, sans-serif); transform-origin: 100% 100%; }
.nt-tip p { margin: 0; }
.nt-tip .nt-ok { justify-self: end; min-height: 36px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--key, #fff); color: var(--on-key, #14112b); box-shadow: 0 3px 0 var(--key-edge, #c9cde6); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .nt-tip, .nt-pop { animation: nt-grow 260ms cubic-bezier(.2,.9,.3,1.15) both; } }
@keyframes nt-grow { from { opacity: 0; transform: scale(.6); } }
.nt-pop { transform-origin: 0 0; }
body.kp-open .nt-btn, body.kp-open .nt-tip { display: none; }