/* ═══════════════════════════════════════════════════════════════
   NOTE EDITOR — Fullscreen distraction-free editor
   ═══════════════════════════════════════════════════════════════ */

.note-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: 90000;
    background: var(--pc-bg, var(--bg-deep, #0a0a0f));
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.note-editor-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.note-editor-overlay.visible { opacity: 1; visibility: visible; }

.note-editor-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Header ── */
.note-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border, #2a2a3a);
    flex-shrink: 0;
    background: var(--pc-bg, var(--bg-deep, #0a0a0f));
    position: relative; z-index: 1;
}
.note-breadcrumb {
    display: flex; align-items: center; gap: 4px;
    font-size: 13px; color: var(--pc-bg-text, var(--text-muted, #5a5f6d)); opacity: 0.5; overflow: hidden;
}
.note-crumb {
    padding: 2px 6px; border-radius: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
.note-crumb-nav {
    cursor: pointer; transition: background 0.15s, color 0.15s;
}
.note-crumb-nav:hover { background: var(--bg-elevated, #1a1a24); color: var(--pc-controls-text-hover, var(--text-primary, #f0f2f5)); }
.note-crumb:last-child { color: var(--pc-bg-text, var(--text-primary, #f0f2f5)); font-weight: 500; opacity: 1; }
.note-crumb-sep { color: var(--pc-bg-text, var(--text-muted, #3a3f4d)); opacity: 0.4; font-size: 14px; }

.note-header-actions { display: flex; align-items: center; gap: 8px; }
.note-btn {
    padding: 6px 14px; border: 1px solid var(--border, #2a2a3a); border-radius: 6px;
    background: var(--bg-elevated, #1a1a24); color: var(--pc-controls-text, var(--text-secondary, #a0a4b0));
    font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.note-btn:hover { background: var(--bg-node, var(--bg-surface, #12121a)); color: var(--pc-controls-text-hover, var(--text-primary, #f0f2f5)); border-color: var(--text-muted); }
.note-btn-save { background: var(--accent, #4a9eff); border-color: var(--accent); color: #fff; }
.note-btn-save:hover { background: var(--accent-bright, #6ab0ff); border-color: var(--accent-bright); }
.note-btn-close { width: 32px; padding: 6px; text-align: center; font-size: 16px; }

/* ── Main layout ── */
.note-editor-main { display: flex; flex: 1; overflow: hidden; background: var(--pc-bg, var(--bg-deep, #0a0a0f)); position: relative; z-index: 1; }
.note-editor-content {
    flex: 1; display: flex; flex-direction: column;
    overflow-y: auto;
}

/* ── Title ── */
.note-title {
    width: 100%; border: none; background: transparent;
    color: var(--pc-bg-text, var(--text-primary, #f0f2f5));
    font-size: 32px; font-weight: 700; font-family: 'Outfit', sans-serif;
    padding: 32px 48px 0; margin-bottom: 20px; outline: none;
    flex-shrink: 0;
}
.note-title::placeholder { color: var(--pc-bg-text, var(--text-muted, #3a3f4d)); opacity: 0.4; }

/* ── Toolbar — STICKY ── */
.note-toolbar {
    display: flex; align-items: center; gap: 1px;
    padding: 6px 16px;
    border-top: 1px solid var(--border, #2a2a3a);
    border-bottom: 1px solid var(--border, #2a2a3a);
    flex-shrink: 0; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--pc-toolbar, var(--bg-deep, #0a0a0f));
    color: var(--pc-toolbar-text, var(--text-primary, #f0f2f5));
    scrollbar-width: none;
}
.note-toolbar::-webkit-scrollbar { display: none; }
.note-tool {
    width: 28px; height: 28px; min-width: 28px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--pc-toolbar-text, var(--text-secondary, #a0a4b0));
    opacity: 0.6;
    font-size: 12px; border-radius: 4px; cursor: pointer;
    transition: background 0.1s, color 0.1s, opacity 0.1s;
}
.note-tool:hover { background: var(--bg-node, var(--bg-elevated, #1a1a24)); color: var(--pc-controls-text-hover, var(--text-primary, #f0f2f5)); opacity: 1; }

/* ★ ACTIVE toolbar button state ★ */
.note-tool.active {
    background: var(--accent-dim, rgba(74, 158, 255, 0.18));
    color: var(--accent-active-text, var(--accent, #4a9eff));
    box-shadow: inset 0 0 0 1px var(--accent-active-text, var(--accent, #4a9eff));
}

.note-tool-divider { width: 1px; height: 18px; background: var(--border, #2a2a3a); margin: 0 3px; flex-shrink: 0; }

/* ── Editor body ── */
.note-body {
    flex: 1; outline: none;
    color: var(--pc-bg-text, var(--text-primary, #f0f2f5));
    font-size: 15px; line-height: 1.8;
    font-family: 'Outfit', sans-serif;
    min-height: 200px;
    padding: 16px 48px 0;
}
/* Spacer after content so user can scroll text to center of screen */
.note-body::after {
    content: '';
    display: block;
    height: 60vh;
    pointer-events: none;
}
.note-body:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted, #3a3f4d); pointer-events: none;
}

/* ★ ITALIC CARET — slanted cursor when typing in italic ★ 
   We use a CSS trick: apply a skew transform to the caret via caret-shape
   where supported, and fall back to a subtle visual indicator.
   We do NOT set font-style:italic on the body as that would style all text. */
.note-body.caret-italic {
    caret-shape: bar;
    caret-color: var(--accent, #4a9eff);
}
/* Webkit/Blink: use animation to simulate slanted caret */
@supports (caret-color: auto) {
    .note-body.caret-italic {
        caret-color: var(--accent, #4a9eff);
    }
}

/* ── Content styles ── */
.note-body h2 { font-size: 22px; font-weight: 600; margin: 16px 0 4px; }
.note-body h3 { font-size: 18px; font-weight: 600; margin: 12px 0 3px; }
.note-body h2:first-child, .note-body h3:first-child { margin-top: 0; }
.note-body h2 + *, .note-body h3 + * { margin-top: 2px; }

/* ★ BLOCKQUOTE with clear visual and exit hint ★ */
.note-body blockquote {
    border-left: 3px solid var(--accent, #4a9eff);
    padding: 8px 16px; margin: 12px 0;
    color: var(--pc-controls-text-hover, var(--text-secondary, #a0a4b0));
    background: var(--bg-elevated, #1a1a24);
    border-radius: 0 6px 6px 0;
}
.note-body hr { border: none; border-top: 1px solid var(--border, #2a2a3a); margin: 24px 0; }

/* ★ LIST INDENTATION — tab creates nested lists ★ */
.note-body ul, .note-body ol { padding-left: 24px; margin: 8px 0; }
.note-body li { margin: 4px 0; }

/* Nested unordered lists: disc → circle → square */
.note-body ul { list-style-type: disc; }
.note-body ul ul { list-style-type: circle; }
.note-body ul ul ul { list-style-type: square; }

/* ★ Nested ordered lists: numbers → letters → roman ★ */
.note-body ol { list-style-type: decimal; }
.note-body ol ol { list-style-type: lower-alpha; }
.note-body ol ol ol { list-style-type: lower-roman; }
.note-body ol ol ol ol { list-style-type: upper-alpha; }

/* ★ TASK ITEMS — checkbox and text on SAME LINE ★ */
.note-body .task-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 0;
    cursor: default;
    min-height: 28px;
}
.note-body .task-item input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 5px;
    width: 16px; height: 16px;
    accent-color: var(--accent, #4a9eff);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto;
}
.note-body .task-item .task-text {
    flex: 1;
    outline: none;
    min-width: 0;
    word-break: break-word;
    line-height: 1.6;
    cursor: text;
}
/* Checked task gets strikethrough */
.note-body .task-item input[type="checkbox"]:checked + .task-text {
    text-decoration: line-through;
    opacity: 0.5;
}

/* ── Node links ── */
.note-node-link {
    display: inline;
    color: var(--accent, #4a9eff);
    background: var(--accent-dim, rgba(74, 158, 255, 0.1));
    padding: 1px 6px; border-radius: 4px;
    cursor: pointer; font-weight: 500;
    transition: background 0.15s;
    text-decoration: none;
}
.note-node-link:hover {
    background: rgba(74, 158, 255, 0.25);
    text-decoration: underline;
    text-decoration-color: var(--accent, #4a9eff);
    text-underline-offset: 2px;
}

/* ── Link dropdown ── */
.note-link-dropdown {
    position: fixed; z-index: 90010;
    min-width: 280px; max-width: 400px; max-height: 300px; overflow-y: auto;
    background: var(--bg-surface, #12121a);
    border: 1px solid var(--border, #2a2a3a); border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); padding: 4px;
}
.note-link-dropdown.hidden { display: none; }
.note-link-option {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 6px; cursor: pointer;
    font-size: 13px; color: var(--pc-sidebar-text, var(--text-secondary, #a0a4b0)); opacity: 0.7; transition: background 0.1s;
}
.note-link-option:hover, .note-link-option.active {
    background: var(--accent-dim, rgba(74, 158, 255, 0.12));
    color: var(--accent-active-text, var(--accent, #4a9eff));
    opacity: 1;
}
.note-link-type { font-size: 10px; flex-shrink: 0; opacity: 0.6; }
.note-link-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-link-title mark { background: rgba(74, 158, 255, 0.3); color: inherit; border-radius: 2px; padding: 0 1px; }
.note-link-depth { font-size: 11px; color: var(--text-muted, #3a3f4d); flex-shrink: 0; }

.note-link-picker-header {
    padding: 6px 12px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted, #5a5f6d);
    border-bottom: 1px solid var(--border, #2a2a3a);
    margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Create-new section in [[ dropdown */
.note-link-sep {
    height: 1px;
    background: var(--border, #2a2a3a);
    margin: 4px 8px;
}
.note-link-create-header {
    padding: 6px 12px 4px; font-size: 11px; font-weight: 600;
    color: var(--text-muted, #5a5f6d);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-link-create .note-link-title {
    color: var(--accent, #4a9eff);
}

/* ── Sidebar ── */
.note-sidebar {
    width: 260px; flex-shrink: 0;
    border-left: 1px solid var(--border, #2a2a3a);
    padding: 24px 16px; overflow-y: auto;
    background: var(--pc-note-sidebar, var(--pc-sidebar, var(--bg-surface, #0d0d14)));
}
.note-sidebar-section { margin-bottom: 16px; }
.note-sidebar-title {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--pc-sidebar-text, var(--text-muted, #5a5f6d)); opacity: 0.5; margin: 0 0 8px;
    cursor: default; user-select: none;
}
.note-tree-list, .note-siblings-list, .note-backlinks-list,
.note-samelevel-list, .note-recent-list {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 200px; overflow-y: auto;
}
.note-backlinks-empty { font-size: 12px; color: var(--pc-sidebar-text, var(--text-muted, #3a3f4d)); opacity: 0.5; line-height: 1.5; }
.note-backlink-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; border-radius: 6px; cursor: pointer;
    font-size: 13px; color: var(--pc-sidebar-text, var(--text-secondary, #a0a4b0)); opacity: 0.7; transition: background 0.1s;
}
.note-backlink-item:hover { background: var(--accent-dim, rgba(74, 158, 255, 0.1)); color: var(--accent-active-text, var(--accent, #4a9eff)); opacity: 1; }
.note-backlink-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Sidebar items (shared style for tree/siblings/same-level/recent) ── */
.note-sidebar-item {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 8px; border-radius: 6px; cursor: pointer;
    font-size: 13px; color: var(--pc-sidebar-text, var(--text-secondary, #a0a4b0)); opacity: 0.7;
    transition: background 0.1s;
}
.note-sidebar-item:hover {
    background: var(--accent-dim, rgba(74, 158, 255, 0.1));
    color: var(--accent-active-text, var(--accent, #4a9eff));
    opacity: 1;
}
.note-sidebar-item.current {
    background: var(--accent-dim, rgba(74, 158, 255, 0.08));
    color: var(--accent-active-text, var(--accent, #4a9eff));
    font-weight: 600;
    cursor: default;
    opacity: 1;
    box-shadow: inset 0 0 0 1px var(--accent-active-text, var(--accent, #4a9eff));
}
.note-item-icon {
    font-size: 11px; flex-shrink: 0; opacity: 0.6; width: 14px; text-align: center;
}
.note-item-title {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-item-depth {
    font-size: 10px; color: var(--pc-controls-text, var(--text-muted, #3a3f4d)); flex-shrink: 0;
    background: var(--bg-elevated, #1a1a24); padding: 1px 5px; border-radius: 8px;
}
.note-sidebar-empty {
    font-size: 12px; color: var(--pc-sidebar-text, var(--text-muted, #3a3f4d)); opacity: 0.5; font-style: italic; padding: 4px 0;
}

.note-info { font-size: 12px; color: var(--pc-sidebar-text, var(--text-muted, #5a5f6d)); opacity: 0.6; }
.note-info-row { display: flex; flex-wrap: wrap; gap: 4px; }
.note-info-muted { color: var(--pc-sidebar-text, var(--text-muted, #3a3f4d)); opacity: 0.5; font-style: italic; }
.note-tag {
    display: inline-block; padding: 2px 8px;
    background: var(--bg-elevated, #1a1a24);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 10px; font-size: 11px; color: var(--pc-controls-text, var(--text-secondary, #a0a4b0));
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .note-title { padding: 20px 16px 0; font-size: 24px; }
    .note-toolbar { padding: 6px 8px; }
    .note-body { padding: 16px 16px 0; }
    .note-sidebar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   IMAGES — with alignment and text wrapping
   ═══════════════════════════════════════════════════════════════ */

.note-img-wrap {
    position: relative;
    margin: 16px 0;
    clear: both;
}
.note-img-wrap:hover .note-img-toolbar { opacity: 1; }
.note-img {
    max-width: 100%;
    border-radius: 6px;
    display: block;
}
.note-img-toolbar {
    position: absolute;
    top: 8px; right: 8px;
    display: flex; gap: 2px;
    background: rgba(0,0,0,0.7);
    border-radius: 6px;
    padding: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}
.note-img-toolbar button {
    width: 28px; height: 28px;
    border: none; background: transparent;
    color: #ccc; font-size: 14px;
    border-radius: 4px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.note-img-toolbar button:hover { background: rgba(255,255,255,0.15); color: #fff; }
.note-img-toolbar button.active { background: var(--accent-dim); color: var(--accent-active-text, var(--accent)); }

/* Alignment modes */
.note-img-center { text-align: center; }
.note-img-center .note-img { margin: 0 auto; max-width: 80%; }

.note-img-left { float: left; margin-right: 16px; max-width: 50%; }
.note-img-left .note-img { max-width: 100%; }

.note-img-right { float: right; margin-left: 16px; max-width: 50%; }
.note-img-right .note-img { max-width: 100%; }

.note-img-full .note-img { width: 100%; max-width: 100%; }

/* ── Image Resize Handle ── */
.note-img-resize-handle {
    position: absolute;
    bottom: 0; right: 0;
    width: 20px; height: 20px;
    cursor: nwse-resize;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}
.note-img-resize-handle::before {
    content: '';
    position: absolute;
    bottom: 4px; right: 4px;
    width: 10px; height: 10px;
    border-right: 2px solid rgba(255,255,255,0.6);
    border-bottom: 2px solid rgba(255,255,255,0.6);
    border-radius: 0 0 3px 0;
}
.note-img-wrap:hover .note-img-resize-handle { opacity: 1; }
.note-img-resize-handle:active { opacity: 1; }
.note-img-resizing { user-select: none; }
.note-light .note-img-resize-handle::before {
    border-right-color: rgba(0,0,0,0.5);
    border-bottom-color: rgba(0,0,0,0.5);
}

/* ── FSN Background layers (backgroundImage + cover-as-bg) ── */
.note-editor-overlay > .note-editor-container {
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════
   CONTEXT MENU — Create node from selection
   ═══════════════════════════════════════════════════════════════ */

.note-context-menu {
    position: fixed; z-index: 100000;
    min-width: 200px;
    background: var(--bg-surface, #12121a);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    padding: 4px;
    animation: ctx-in 0.1s ease;
}
@keyframes ctx-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.note-ctx-header {
    padding: 6px 12px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #5a5f6d);
}
.note-ctx-item {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-primary, #f0f2f5);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}
.note-ctx-item:hover {
    background: var(--accent-dim, rgba(74, 158, 255, 0.12));
}
.note-ctx-sep {
    height: 1px;
    background: var(--border, #2a2a3a);
    margin: 4px 8px;
}

/* ═══════════════════════════════════════════════════════════════
   SLASH COMMANDS DROPDOWN
   ═══════════════════════════════════════════════════════════════ */

.note-slash-dropdown {
    position: fixed; z-index: 90010;
    min-width: 260px; max-width: 360px; max-height: 340px; overflow-y: auto;
    background: var(--bg-surface, #12121a);
    border: 1px solid var(--border, #2a2a3a); border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5); padding: 4px;
}
.note-slash-dropdown.hidden { display: none; }
.note-slash-option {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 6px; cursor: pointer;
    transition: background 0.1s;
}
.note-slash-option:hover, .note-slash-option.active {
    background: var(--accent-dim, rgba(74, 158, 255, 0.12));
}
.note-slash-icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-elevated, #1a1a24);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 6px;
    font-size: 13px; flex-shrink: 0;
    color: var(--text-primary, #f0f2f5);
}
.note-slash-text { flex: 1; min-width: 0; }
.note-slash-label {
    display: block; font-size: 13px; font-weight: 500;
    color: var(--text-primary, #f0f2f5);
}
.note-slash-desc {
    display: block; font-size: 11px;
    color: var(--text-muted, #5a5f6d);
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE DRAG INDICATORS
   ═══════════════════════════════════════════════════════════════ */

.note-img-dragging {
    opacity: 0.4;
}
.note-img-drop-target {
    border-top: 2px solid var(--accent, #4a9eff) !important;
    padding-top: 4px;
}
/* Selected image: accent border */
.note-img-wrap.note-img-selected .note-img {
    outline: 3px solid #4a9eff;
    outline: 3px solid var(--accent, #4a9eff);
    outline-offset: 2px;
    border-radius: 6px;
    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.4), 0 0 16px rgba(74, 158, 255, 0.25);
}
.note-img-wrap.note-img-selected .note-img-toolbar { opacity: 1; }
.note-img-wrap.note-img-selected .note-img-resize-handle { opacity: 1; }
/* Accent-colored resize handle when selected/hovered */
.note-img-wrap.note-img-selected .note-img-resize-handle::before,
.note-img-wrap:hover .note-img-resize-handle::before {
    border-right-color: var(--accent, #4a9eff);
    border-bottom-color: var(--accent, #4a9eff);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — ancestor highlight for core nodes
   ═══════════════════════════════════════════════════════════════ */

.note-sidebar-item.ancestor {
    background: rgba(74, 158, 255, 0.05);
    border-left: 2px solid var(--accent, #4a9eff);
    padding-left: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   HIGHLIGHT COLORS — context menu color swatches
   ═══════════════════════════════════════════════════════════════ */

.note-ctx-colors {
    display: flex; gap: 4px; padding: 4px 12px 6px; align-items: center;
}
.note-ctx-color {
    width: 22px; height: 22px;
    border: 2px solid transparent; border-radius: 50%;
    cursor: pointer; transition: transform 0.1s, border-color 0.1s;
}
.note-ctx-color:hover {
    transform: scale(1.2);
    border-color: rgba(255,255,255,0.4);
}
.note-ctx-color-clear {
    background: transparent !important;
    border: 2px dashed var(--border, #2a2a3a) !important;
    font-size: 10px; color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   WORD COUNT — info section
   ═══════════════════════════════════════════════════════════════ */

.note-info-stats {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--border, #2a2a3a);
}
.note-word-count {
    font-size: 12px; color: var(--text-muted, #5a5f6d);
    font-variant-numeric: tabular-nums;
}
.note-char-count {
    display: block;
    font-size: 11px; color: var(--text-muted, #3a3f4d);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   KEYBOARD SHORTCUTS PANEL
   ═══════════════════════════════════════════════════════════════ */

.note-shortcuts-panel {
    position: fixed; inset: 0; z-index: 90020;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    animation: ctx-in 0.15s ease;
}
.note-shortcuts-content {
    background: var(--bg-surface, #12121a);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 12px;
    padding: 24px; min-width: 340px; max-width: 440px;
}
.note-shortcuts-content h3 {
    margin: 0 0 16px; font-size: 16px;
    color: var(--text-primary, #f0f2f5);
}
.note-shortcut-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-bottom: 16px;
}
.note-sc {
    font-size: 13px; color: var(--text-secondary, #a0a4b0);
    display: flex; align-items: center; gap: 8px;
}
.note-sc kbd {
    display: inline-block;
    padding: 2px 6px;
    background: var(--bg-elevated, #1a1a24);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 4px;
    font-size: 11px; font-family: monospace;
    color: var(--text-primary, #f0f2f5);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE
   ═══════════════════════════════════════════════════════════════ */

.note-editor-overlay.note-light {
    background: #f8f9fb;
}
.note-light .note-editor-header {
    border-color: #e2e4e8;
    background: #fff;
}
.note-light .note-editor-main {
    background: #fff;
}
.note-light .note-title {
    color: #1a1a2e;
}
.note-light .note-title::placeholder { color: #b0b4bc; }
.note-light .note-toolbar {
    border-color: #e2e4e8;
    background: #f8f9fb;
}
.note-light .note-tool {
    color: #5a5f6d;
}
.note-light .note-tool:hover {
    background: #eef0f4; color: #1a1a2e;
}
.note-light .note-tool.active {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    box-shadow: inset 0 0 0 1px #2563eb;
}
.note-light .note-tool-divider { background: #e2e4e8; }
.note-light .note-body {
    color: #1a1a2e;
}
.note-light .note-body:empty::before { color: #b0b4bc; }
.note-light .note-body h2,
.note-light .note-body h3 { color: #1a1a2e; }
.note-light .note-body blockquote {
    background: #f0f2f6; color: #4a4f5d;
    border-left-color: #2563eb;
}
.note-light .note-body hr { border-top-color: #e2e4e8; }
.note-light .note-sidebar {
    background: #f0f2f6; border-color: #e2e4e8;
}
.note-light .note-sidebar-title { color: #6b7280; }
.note-light .note-sidebar-item { color: #4a4f5d; }
.note-light .note-sidebar-item:hover { background: rgba(59, 130, 246, 0.08); color: #1a1a2e; }
.note-light .note-sidebar-item.current { background: rgba(59, 130, 246, 0.08); color: #2563eb; }
.note-light .note-sidebar-item.ancestor { background: rgba(59, 130, 246, 0.04); border-left-color: #2563eb; }
.note-light .note-sidebar-empty { color: #b0b4bc; }
.note-light .note-item-depth { background: #e2e4e8; color: #6b7280; }
.note-light .note-backlinks-empty { color: #b0b4bc; }
.note-light .note-backlink-item { color: #4a4f5d; }
.note-light .note-backlink-item:hover { background: rgba(59, 130, 246, 0.08); color: #1a1a2e; }
.note-light .note-tag { background: #e2e4e8; border-color: #d0d2d8; color: #4a4f5d; }
.note-light .note-info-stats { border-color: #e2e4e8; }
.note-light .note-word-count { color: #6b7280; }
.note-light .note-char-count { color: #9ca3af; }
.note-light .note-btn {
    background: #eef0f4; border-color: #d0d2d8; color: #4a4f5d;
}
.note-light .note-btn:hover { background: #e2e4e8; color: #1a1a2e; }
.note-light .note-btn-save { background: #2563eb; border-color: #2563eb; color: #fff; }
.note-light .note-btn-save:hover { background: #1d4ed8; }
.note-light .note-breadcrumb { color: #6b7280; }
.note-light .note-crumb-nav:hover { background: #eef0f4; color: #1a1a2e; }
.note-light .note-crumb:last-child { color: #1a1a2e; }
.note-light .note-crumb-sep { color: #d0d2d8; }
.note-light .note-node-link {
    color: #2563eb; background: rgba(59, 130, 246, 0.08);
}
.note-light .note-node-link:hover {
    background: rgba(59, 130, 246, 0.15);
    text-decoration-color: #2563eb;
}
.note-light .note-body .task-item input[type="checkbox"] {
    accent-color: #2563eb;
}
/* Light mode dropdowns/panels */
.note-light .note-link-dropdown,
.note-light .note-slash-dropdown,
.note-light .note-context-menu {
    background: #fff; border-color: #e2e4e8;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.note-light .note-link-option,
.note-light .note-slash-option,
.note-light .note-ctx-item { color: #4a4f5d; }
.note-light .note-link-option:hover, .note-light .note-link-option.active,
.note-light .note-slash-option:hover, .note-light .note-slash-option.active,
.note-light .note-ctx-item:hover {
    background: rgba(59, 130, 246, 0.08); color: #1a1a2e;
}
.note-light .note-ctx-header, .note-light .note-link-create-header { color: #6b7280; }
.note-light .note-ctx-sep, .note-light .note-link-sep { background: #e2e4e8; }
.note-light .note-slash-icon { background: #f0f2f6; border-color: #e2e4e8; color: #1a1a2e; }
.note-light .note-slash-label { color: #1a1a2e; }
.note-light .note-slash-desc { color: #6b7280; }
.note-light .note-img-toolbar { background: rgba(0,0,0,0.6); }
/* Light shortcuts panel */
.note-light .note-shortcuts-content { background: #fff; border-color: #e2e4e8; }
.note-light .note-shortcuts-content h3 { color: #1a1a2e; }
.note-light .note-sc { color: #4a4f5d; }
.note-light .note-sc kbd { background: #f0f2f6; border-color: #e2e4e8; color: #1a1a2e; }

/* ═══════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════ */

.note-table-wrap {
    margin: 16px 0; position: relative;
}
.note-table-wrap:hover .note-table-toolbar { opacity: 1; }
.note-table-toolbar {
    display: flex; gap: 2px; margin-bottom: 6px;
    opacity: 0; transition: opacity 0.2s;
}
.note-table-toolbar button {
    padding: 3px 8px; font-size: 11px;
    border: 1px solid var(--border, #2a2a3a);
    background: var(--bg-elevated, #1a1a24);
    color: var(--text-secondary, #a0a4b0);
    border-radius: 4px; cursor: pointer;
}
.note-table-toolbar button:hover { background: var(--accent-dim); color: var(--accent-active-text, var(--accent)); }

.note-table {
    width: 100%; border-collapse: collapse;
    font-size: 14px;
}
.note-table th, .note-table td {
    border: 1px solid var(--border, #2a2a3a);
    padding: 8px 12px; text-align: left;
    min-width: 60px; outline: none;
    color: var(--text-primary, #f0f2f5);
}
.note-table th {
    background: var(--bg-elevated, #1a1a24);
    font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--text-secondary, #a0a4b0);
}
.note-table td:focus, .note-table th:focus {
    box-shadow: inset 0 0 0 2px var(--accent, #4a9eff);
}

/* ═══════════════════════════════════════════════════════════════
   CODE BLOCK
   ═══════════════════════════════════════════════════════════════ */

.note-code-wrap {
    margin: 16px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border, #2a2a3a);
}
.note-code-header {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: var(--bg-elevated, #1a1a24);
    border-bottom: 1px solid var(--border, #2a2a3a);
}
.note-code-lang {
    background: var(--bg-deep, #0a0a0f);
    color: var(--text-secondary, #a0a4b0);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 4px; padding: 2px 6px; font-size: 11px;
    outline: none;
}
.note-code-copy, .note-code-del {
    margin-left: auto; padding: 2px 8px;
    background: transparent; border: 1px solid var(--border, #2a2a3a);
    color: var(--text-muted, #5a5f6d); border-radius: 4px;
    font-size: 11px; cursor: pointer;
}
.note-code-del { margin-left: 4px; }
.note-code-copy:hover, .note-code-del:hover { color: var(--text-primary); }
.note-code-content {
    margin: 0; padding: 16px;
    background: var(--bg-deep, #0a0a0f);
    color: #e2e8f0;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 13px; line-height: 1.6;
    white-space: pre-wrap; word-break: break-word;
    outline: none; min-height: 40px;
    tab-size: 2;
}

/* ═══════════════════════════════════════════════════════════════
   FIND & REPLACE BAR
   ═══════════════════════════════════════════════════════════════ */

.note-find-bar {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 48px;
    background: var(--bg-elevated, #1a1a24);
    border-bottom: 1px solid var(--border, #2a2a3a);
    position: sticky; top: 42px; z-index: 11;
    flex-wrap: wrap;
}
.note-find-row {
    display: flex; align-items: center; gap: 4px;
}
.note-find-input, .note-replace-input {
    padding: 4px 8px; font-size: 13px;
    background: var(--bg-deep, #0a0a0f);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 4px; color: var(--text-primary, #f0f2f5);
    outline: none; width: 180px;
}
.note-find-input:focus, .note-replace-input:focus { border-color: var(--accent); }
.note-find-count {
    font-size: 11px; color: var(--text-muted); min-width: 40px; text-align: center;
}
.note-find-btn {
    padding: 4px 8px; font-size: 11px;
    background: var(--bg-deep, #0a0a0f);
    border: 1px solid var(--border, #2a2a3a);
    color: var(--text-secondary); border-radius: 4px; cursor: pointer;
}
.note-find-btn:hover { background: var(--accent-dim); color: var(--accent-active-text, var(--accent)); }
.note-find-close {
    margin-left: auto; background: transparent; border: none;
    color: var(--text-muted); font-size: 16px; cursor: pointer;
    padding: 4px 8px;
}
.note-find-close:hover { color: var(--text-primary); }
.note-find-highlight {
    background: rgba(250, 204, 21, 0.4);
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   LINK PREVIEW TOOLTIP
   ═══════════════════════════════════════════════════════════════ */

.note-link-preview {
    position: fixed; z-index: 90015;
    width: 280px; max-height: 200px;
    background: var(--bg-surface, #12121a);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 8px; padding: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    overflow: hidden;
    animation: ctx-in 0.15s ease;
}
.note-preview-title {
    font-size: 14px; font-weight: 600;
    color: var(--text-primary, #f0f2f5);
    margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-preview-meta {
    font-size: 11px; color: var(--text-muted, #5a5f6d);
    margin-bottom: 8px; text-transform: capitalize;
}
.note-preview-body {
    font-size: 12px; line-height: 1.5;
    color: var(--text-secondary, #a0a4b0);
    overflow: hidden;
    max-height: 120px;
}

/* ═══════════════════════════════════════════════════════════════
   ALIGNMENT TOOLBAR ICONS
   ═══════════════════════════════════════════════════════════════ */

.note-tool[data-action="align-left"] { font-size: 14px; text-align: left; }
.note-tool[data-action="align-center"] { font-size: 14px; letter-spacing: -2px; }
.note-tool[data-action="align-right"] { font-size: 14px; direction: rtl; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — new components
   ═══════════════════════════════════════════════════════════════ */

.note-light .note-table th { background: #f0f2f6; color: #4a4f5d; border-color: #d0d2d8; }
.note-light .note-table td { border-color: #d0d2d8; color: #1a1a2e; }
.note-light .note-table td:focus, .note-light .note-table th:focus { box-shadow: inset 0 0 0 2px #2563eb; }
.note-light .note-table-toolbar button { background: #eef0f4; border-color: #d0d2d8; color: #4a4f5d; }
.note-light .note-code-header { background: #f0f2f6; border-color: #d0d2d8; }
.note-light .note-code-lang { background: #fff; border-color: #d0d2d8; color: #4a4f5d; }
.note-light .note-code-content { background: #fafafa; color: #1a1a2e; }
.note-light .note-code-wrap { border-color: #d0d2d8; }
.note-light .note-find-bar { background: #eef0f4; border-color: #d0d2d8; }
.note-light .note-find-input, .note-light .note-replace-input { background: #fff; border-color: #d0d2d8; color: #1a1a2e; }
.note-light .note-find-btn { background: #fff; border-color: #d0d2d8; color: #4a4f5d; }
.note-light .note-find-highlight { background: rgba(250, 204, 21, 0.5); }
.note-light .note-link-preview { background: #fff; border-color: #d0d2d8; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.note-light .note-preview-title { color: #1a1a2e; }
.note-light .note-preview-body { color: #4a4f5d; }
.note-light .note-title { padding: 32px 48px 0; }
.note-light .note-title-row { }

/* ═══════════════════════════════════════════════════════════════
   HEADER SEPARATOR
   ═══════════════════════════════════════════════════════════════ */

.note-header-sep {
    width: 1px; height: 20px;
    background: var(--border, #2a2a3a);
    margin: 0 4px;
}

/* ═══════════════════════════════════════════════════════════════
   IMPORT DIALOG
   ═══════════════════════════════════════════════════════════════ */

.note-import-dialog {
    position: fixed; inset: 0; z-index: 90020;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    animation: ctx-in 0.15s ease;
}
.note-import-content {
    background: var(--bg-surface, #12121a);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 12px;
    padding: 24px; min-width: 380px; max-width: 500px;
}
.note-import-content h3 {
    margin: 0 0 8px; font-size: 16px;
    color: var(--text-primary, #f0f2f5);
}
.note-import-desc {
    font-size: 12px; color: var(--text-muted, #5a5f6d);
    margin: 0 0 16px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 440px;
}
.note-import-options {
    display: flex; flex-direction: column; gap: 12px;
    margin-bottom: 20px;
}
.note-import-option label {
    font-size: 13px; color: var(--text-secondary, #a0a4b0);
    display: block; margin-bottom: 4px;
}
.note-import-option strong {
    color: var(--text-primary, #f0f2f5);
}
.note-import-radio-group {
    display: flex; flex-direction: column; gap: 6px;
    padding-left: 4px;
}
.note-import-radio-group label {
    display: flex; align-items: center; gap: 6px;
    cursor: pointer;
}
.note-import-radio-group input[type="radio"],
.note-import-option input[type="checkbox"] {
    accent-color: var(--accent, #4a9eff);
}
.note-import-actions {
    display: flex; justify-content: flex-end; gap: 8px;
}

/* Light mode import */
.note-light .note-import-content { background: #fff; border-color: #e2e4e8; }
.note-light .note-import-content h3 { color: #1a1a2e; }
.note-light .note-import-desc { color: #6b7280; }
.note-light .note-import-option label { color: #4a4f5d; }
.note-light .note-import-option strong { color: #1a1a2e; }

/* ═══════════════════════════════════════════════════════════════
   SAVE STATUS INDICATOR
   ═══════════════════════════════════════════════════════════════ */

.note-save-status {
    display: inline-block;
    width: 42px; /* fixed width: fits "Editing" / "Saved" / "Saving" */
    font-size: 10px;
    text-align: right;
    line-height: 1;
    align-self: center;
    white-space: nowrap;
    transition: opacity 0.4s, color 0.3s;
    opacity: 0.35;
    pointer-events: none;
}
.note-save-status.saved {
    color: #4ade80;
    opacity: 0.35;
}
.note-save-status.saved.bright {
    color: #4ade80;
    opacity: 1;
    transition: none;
}
.note-save-status.unsaved {
    color: #fb923c;
    opacity: 0.8;
}
.note-save-status.saving {
    color: var(--text-muted, #5a5f6d);
    opacity: 0.6;
}

/* Light mode */
.note-light .note-save-status.saved { color: #16a34a; }
.note-light .note-save-status.saved.bright { color: #16a34a; opacity: 1; }
.note-light .note-save-status.unsaved { color: #ea580c; }

/* ═══════════════════════════════════════════════════════════════
   SETTINGS PANEL
   ═══════════════════════════════════════════════════════════════ */

.note-settings-panel {
    position: absolute;
    top: 48px; right: 0;
    width: 300px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    background: var(--pc-sidebar, var(--bg-surface, #12121a));
    color: var(--pc-sidebar-text, var(--text-primary, #f0f2f5));
    border-left: 1px solid var(--border, #2a2a3a);
    border-bottom: 1px solid var(--border, #2a2a3a);
    border-radius: 0 0 0 12px;
    box-shadow: -4px 8px 32px rgba(0,0,0,0.3);
    z-index: 90010;
    animation: settings-in 0.15s ease;
}
@keyframes settings-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

.note-settings-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px; border-bottom: 1px solid var(--border, #2a2a3a);
}
.note-settings-header h3 {
    margin: 0; font-size: 15px; font-weight: 600;
    color: var(--pc-sidebar-text, var(--text-primary, #f0f2f5));
}
.note-settings-close {
    background: transparent; border: none;
    color: var(--pc-sidebar-text, var(--text-muted, #5a5f6d));
    opacity: 0.5;
    font-size: 16px; cursor: pointer; padding: 4px 8px;
}
.note-settings-close:hover { opacity: 1; }

.note-settings-group {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border, #1a1a24);
}
.note-settings-group:last-child { border-bottom: none; }
.note-settings-group-title {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--pc-sidebar-text, var(--text-muted, #5a5f6d));
    opacity: 0.5;
    margin-bottom: 10px;
}

/* Theme toggle */
.note-settings-toggle {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; color: var(--pc-sidebar-text, var(--text-secondary, #a0a4b0));
    opacity: 0.8;
    cursor: pointer; padding: 4px 0;
}
.note-settings-toggle input[type="checkbox"] { display: none; }
.note-toggle-track {
    width: 36px; height: 20px;
    background: var(--border, #2a2a3a);
    border-radius: 10px; position: relative;
    transition: background 0.2s;
}
.note-settings-toggle input:checked + .note-toggle-track { background: var(--accent, #4a9eff); }
.note-toggle-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff; border-radius: 50%;
    transition: transform 0.2s;
}
.note-settings-toggle input:checked + .note-toggle-track .note-toggle-thumb { transform: translateX(16px); }

/* Sidebar order items */
.note-settings-order-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; margin: 2px 0;
    background: var(--bg-elevated, #0a0a0f);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 6px;
    font-size: 13px; color: var(--pc-controls-text, var(--text-secondary, #a0a4b0));
    cursor: grab; user-select: none;
}
.note-settings-order-item:active { cursor: grabbing; }
.note-settings-order-item.dragging { opacity: 0.4; }
.note-settings-drag-handle {
    color: var(--pc-sidebar-text, var(--text-muted, #3a3f4d));
    opacity: 0.4;
    font-size: 14px; letter-spacing: -2px;
}

/* Action buttons */
.note-settings-actions {
    display: flex; flex-direction: column; gap: 4px;
}
.note-settings-action {
    display: block; width: 100%;
    padding: 8px 10px; text-align: left;
    background: transparent; border: 1px solid transparent;
    color: var(--pc-sidebar-text, var(--text-secondary, #a0a4b0));
    opacity: 0.7;
    border-radius: 6px; font-size: 13px;
    cursor: pointer; transition: background 0.1s;
}
.note-settings-action:hover {
    background: var(--accent-dim, rgba(74, 158, 255, 0.06));
    border-color: var(--border, #2a2a3a);
    color: var(--accent-active-text, var(--accent, #4a9eff));
    opacity: 1;
}

/* Shortcuts inside settings */
.note-settings-shortcuts {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.note-settings-shortcuts .note-sc {
    font-size: 11px; color: var(--pc-sidebar-text, var(--text-muted, #5a5f6d));
    opacity: 0.5;
    padding: 2px 0;
}
.note-settings-shortcuts .note-sc kbd {
    background: var(--bg-elevated, #0a0a0f);
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 3px; padding: 1px 4px;
    font-size: 10px; font-family: inherit;
    color: var(--pc-controls-text, var(--text-secondary, #a0a4b0));
}

/* Light mode */
.note-light .note-settings-panel { background: #fff; border-color: #e2e4e8; box-shadow: -4px 8px 32px rgba(0,0,0,0.08); }
.note-light .note-settings-header { border-color: #e2e4e8; }
.note-light .note-settings-header h3 { color: #1a1a2e; }
.note-light .note-settings-group { border-color: #f0f2f4; }
.note-light .note-settings-toggle { color: #4a4f5d; }
.note-light .note-toggle-track { background: #d0d2d8; }
.note-light .note-settings-order-item { background: #f5f6f8; border-color: #e2e4e8; color: #4a4f5d; }
.note-light .note-settings-action { color: #4a4f5d; }
.note-light .note-settings-action:hover { background: rgba(37, 99, 235, 0.06); border-color: #e2e4e8; color: #1a1a2e; }
.note-light .note-settings-shortcuts .note-sc { color: #6b7280; }
.note-light .note-settings-shortcuts kbd { background: #f0f2f4; border-color: #d0d2d8; color: #4a4f5d; }

/* ── Sidebar Views visibility in settings ── */
.note-settings-vis-label {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--accent, #4a9eff);
    margin: 10px 0 4px; padding: 0 2px;
}
.note-settings-vis-label.note-settings-vis-hidden {
    color: var(--text-muted, #3a3f4d);
}
.note-settings-order-group { margin-bottom: 6px; }
.note-settings-order-item.is-hidden {
    opacity: 0.5;
    border-style: dashed;
}
.note-settings-order-item.is-hidden .note-settings-drag-handle {
    visibility: hidden;
}
.note-settings-vis-btn {
    background: transparent; border: none;
    font-size: 14px; cursor: pointer; padding: 2px 4px;
    opacity: 0.5; transition: opacity 0.15s;
    margin-left: auto;
}
.note-settings-order-item:hover .note-settings-vis-btn { opacity: 1; }
.note-settings-item-label { flex: 1; }

/* ── Task sidebar section ── */
.note-sidebar-task {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 5px 8px; cursor: pointer;
    border-radius: 4px; transition: background 0.1s;
}
.note-sidebar-task:hover { background: rgba(74, 158, 255, 0.06); }
.note-sidebar-task-check { font-size: 13px; margin-top: 1px; flex-shrink: 0; }
.note-sidebar-task-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.note-sidebar-task-text {
    font-size: 12px; color: var(--text-secondary, #a0a4b0);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-sidebar-task-from {
    font-size: 10px; color: var(--text-muted, #3a3f4d);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.note-sidebar-task.done .note-sidebar-task-text {
    text-decoration: line-through; opacity: 0.5;
    font-size: 11px;
}
.note-sidebar-task.done { padding: 2px 8px; }
.note-sidebar-task-done-header {
    font-size: 10px; color: var(--text-muted, #3a3f4d);
    padding: 8px 8px 2px; text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Tag sidebar section ── */
.note-sidebar-tag-group { margin-bottom: 8px; }
.note-sidebar-tag-name {
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary, #a0a4b0);
    padding: 4px 8px;
}
.note-sidebar-tag-count {
    font-size: 10px; font-weight: 400;
    color: var(--text-muted, #3a3f4d);
    background: var(--bg-deep, #0a0a0f);
    padding: 1px 5px; border-radius: 8px;
}

/* ── Orphan sidebar section ── */
.note-sidebar-depth {
    font-size: 10px; color: var(--text-muted, #3a3f4d);
    margin-left: auto; flex-shrink: 0;
}

/* ── Sidebar empty state ── */
.note-sidebar-empty {
    display: block; padding: 4px 8px;
    font-size: 11px; color: var(--text-muted, #3a3f4d);
    font-style: italic;
}

/* Light mode additions */
.note-light .note-sidebar-task-text { color: #4a4f5d; }
.note-light .note-sidebar-task-from { color: #9ca3af; }
.note-light .note-sidebar-tag-name { color: #4a4f5d; }
.note-light .note-sidebar-tag-count { background: #f0f2f4; color: #6b7280; }
.note-light .note-settings-vis-label { color: #2563eb; }
.note-light .note-settings-vis-label.note-settings-vis-hidden { color: #9ca3af; }

/* ── Share badge ── */
.note-share-badge {
    display: inline-flex; align-items: center;
    font-size: 10px; font-weight: 600;
    color: #4ade80; padding: 2px 8px;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.15);
    border-radius: 10px; cursor: pointer;
    transition: all 0.15s; white-space: nowrap;
}
.note-share-badge:hover {
    background: rgba(74, 222, 128, 0.14);
    border-color: rgba(74, 222, 128, 0.3);
}
.note-share-badge.share-hidden { display: none; }
.note-light .note-share-badge {
    color: #16a34a;
    background: rgba(22, 163, 106, 0.06);
    border-color: rgba(22, 163, 106, 0.15);
}
/* ── Node Background Image ── */
.note-section-bg {
    position: fixed; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}
.note-editor-container { position: relative; z-index: 1; }
.note-light .note-section-bg { opacity: 0.08; }

/* ── Highlight spans ── */
.note-hl { border-radius: 2px; padding: 0 1px; }
.note-hl-red    { background: rgba(239,68,68,.3); }
.note-hl-orange { background: rgba(249,115,22,.3); }
.note-hl-yellow { background: rgba(234,179,8,.3); }
.note-hl-green  { background: rgba(34,197,94,.3); }
.note-hl-blue   { background: rgba(59,130,246,.3); }
.note-hl-purple { background: rgba(168,85,247,.3); }
.note-hl-pink   { background: rgba(236,72,153,.3); }
.note-tool-hl {
    font-size: 11px !important; font-weight: 700 !important;
    min-width: 22px; border-radius: 4px !important;
}
.note-hl-indicator {
    padding: 4px 16px; font-size: 12px; font-weight: 500;
    text-align: center; color: var(--pc-bg-text, #ddd);
    border-radius: 0; flex-shrink: 0;
}

/* ── Cover Image Banner ── */
.note-cover-banner {
    width: 100%; height: 200px;
    background-size: cover; background-position: center;
    flex-shrink: 0; position: relative;
    border-bottom: 1px solid var(--border, #2a2a3a);
}
.note-cover-banner::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 50%, var(--pc-bg, var(--bg-deep, #0a0a0f)) 100%);
    pointer-events: none;
}
.note-cover-reposition-btn {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    padding: 5px 12px; font-size: 11px; font-weight: 500;
    background: rgba(0,0,0,.55); color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 6px; cursor: grab;
    opacity: 0; transition: opacity .2s;
    backdrop-filter: blur(4px); font-family: inherit;
    user-select: none;
}
.note-cover-banner:hover .note-cover-reposition-btn { opacity: 1; }
.note-cover-reposition-btn.active {
    opacity: 1; cursor: grabbing;
    background: rgba(74,158,255,.5);
    border-color: rgba(74,158,255,.6);
}
.note-light .note-cover-banner { border-bottom-color: #d0d0d8; }
.note-light .note-cover-banner::after {
    background: linear-gradient(to bottom, transparent 50%, #fff 100%);
}
.note-light .note-cover-reposition-btn {
    background: rgba(255,255,255,.7); color: #333;
    border-color: rgba(0,0,0,.1);
}

/* ── Title Row (icon + title inline) ── */
.note-title-row {
    display: flex; align-items: center;
    padding: 24px 48px 0; gap: 10px;
    flex-shrink: 0;
    margin-bottom: 20px;
}
.note-title-row .note-title {
    padding: 0; margin-bottom: 0;
    flex: 1; min-width: 0;
}
.note-title-icon {
    font-size: 30px; line-height: 1;
    flex-shrink: 0; cursor: default; user-select: none;
}
.note-title-icon img {
    width: 30px; height: 30px; object-fit: contain;
}
/* ── Custom List Items (fsn-list-item) ── */
.fsn-list-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 2px 0;
    line-height: 1.6;
}
.fsn-list-marker {
    flex-shrink: 0;
    user-select: none;
    color: var(--text-secondary, #888);
    min-width: 1.2em;
    text-align: right;
    font-size: 0.95em;
}
.fsn-list-text {
    flex: 1;
    outline: none;
    min-width: 0;
}
.fsn-list-text:empty::before {
    content: '\200B';
}
/* ═══════════════════════════════════════════════════════════════
   SPEECH-TO-TEXT — mic button & live preview (FSN)
   ═══════════════════════════════════════════════════════════════ */

/* ── Mic button base ── */
.speech-mic-btn {
    position: relative;
    background: none;
    border: 1px solid var(--border, #2a2a3a);
    border-radius: 6px;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1;
    color: var(--text-secondary, #888);
    transition: all 0.15s ease;
}
.speech-mic-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #e0e0e0);
    border-color: var(--border-light, #3a3a4a);
}

/* Active (listening) state */
.speech-mic-btn.speech-active {
    background: rgba(239, 68, 68, 0.12);
    border-color: #ef4444;
    color: #ef4444;
}
.speech-mic-btn.speech-active:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Pulsing red dot */
.speech-mic-btn.speech-active::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    animation: speech-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes speech-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.7); }
}

/* ── Mic in FSN toolbar ── */
.note-toolbar .speech-mic-btn {
    height: 28px;
    padding: 2px 8px;
    flex-shrink: 0;
}

/* ── Mic in FSN header ── */
.note-header-actions .speech-mic-btn {
    height: 28px;
    padding: 2px 8px;
}

/* ── Live preview bar ── */
.speech-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 6px;
    margin: 4px 12px;
    font-size: 13px;
    color: var(--text-primary, #e0e0e0);
    min-height: 28px;
    animation: speech-preview-in 0.2s ease;
    overflow: hidden;
}
@keyframes speech-preview-in {
    from { opacity: 0; max-height: 0; padding: 0 12px; margin: 0 12px; }
    to { opacity: 1; max-height: 60px; }
}

.speech-preview-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    animation: speech-dot-pulse 1.2s ease-in-out infinite;
}

.speech-preview-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.speech-preview-text em {
    color: var(--text-secondary, #888);
    font-style: italic;
}

/* ── Light mode ── */
body.light-mode .speech-mic-btn {
    border-color: #ddd;
    color: #666;
}
body.light-mode .speech-mic-btn:hover {
    background: rgba(0,0,0,0.05);
    color: #333;
}
body.light-mode .speech-mic-btn.speech-active {
    background: rgba(239, 68, 68, 0.08);
    border-color: #ef4444;
    color: #ef4444;
}
body.light-mode .speech-preview {
    background: rgba(239, 68, 68, 0.04);
    border-color: rgba(239, 68, 68, 0.12);
    color: #333;
}
/* AI-generated highlights — ensure visibility everywhere */
.node-description mark,
.note-page mark,
mark[style*="background-color"] {
    border-radius: 3px !important;
    padding: 2px 4px !important;
    color: inherit !important;
    display: inline !important;
}
/* Override browser default yellow for marks with inline background-color */
.node-description mark:not([style]),
.note-page mark:not([style]) {
    background-color: rgba(234,179,8,0.3) !important;
}

/* FF-synced highlight spans in node cards */
.node-description .note-hl,
.note-page .note-hl {
    border-radius: 3px;
    padding: 2px 4px;
}