{% extends "base.html" %}

{% set active_page = 'notes' %}

{% block title %}Note - Deep Research System{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/notes.css">
<style>
    .ldr-note-detail-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    /* Two-column layout for wiki view */
    .ldr-note-layout {
        display: flex;
        gap: 1.5rem;
        align-items: flex-start;
    }

    .ldr-note-main {
        flex: 1;
        min-width: 0;
        max-width: 800px;
    }

    .ldr-note-sidebar {
        width: 280px;
        flex-shrink: 0;
        position: sticky;
        top: 1rem;
    }

    @media (max-width: 1024px) {
        .ldr-note-layout {
            flex-direction: column;
        }
        .ldr-note-sidebar {
            width: 100%;
            position: static;
            order: 2;
        }
        .ldr-note-main {
            max-width: 100%;
        }
    }

    /* Read Mode Title Display */
    .ldr-note-title-display {
        font-size: 2.25rem;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 0.5rem 0;
        line-height: 1.3;
    }

    /* Meta bar for read mode */
    .ldr-note-meta-bar {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .ldr-note-meta-bar span {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .ldr-note-meta-bar i {
        opacity: 0.6;
    }

    /* Rendered content area */
    .ldr-note-content-rendered {
        line-height: 1.8;
        color: var(--text-primary);
        font-size: 1rem;
    }

    .ldr-note-content-rendered h1,
    .ldr-note-content-rendered h2,
    .ldr-note-content-rendered h3 {
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .ldr-note-content-rendered h1 { font-size: 1.75rem; }
    .ldr-note-content-rendered h2 { font-size: 1.5rem; }
    .ldr-note-content-rendered h3 { font-size: 1.25rem; }

    .ldr-note-content-rendered p {
        margin-bottom: 1rem;
    }

    .ldr-note-content-rendered ul,
    .ldr-note-content-rendered ol {
        margin-bottom: 1rem;
        padding-left: 1.5rem;
    }

    .ldr-note-content-rendered li {
        margin-bottom: 0.35rem;
    }

    .ldr-note-content-rendered blockquote {
        border-left: 3px solid var(--accent-primary);
        padding-left: 1rem;
        margin: 1rem 0;
        color: var(--text-secondary);
        font-style: italic;
    }

    .ldr-note-content-rendered code {
        background: var(--bg-tertiary);
        padding: 0.15rem 0.4rem;
        border-radius: 4px;
        font-size: 0.9em;
    }

    .ldr-note-content-rendered pre {
        background: var(--bg-tertiary);
        padding: 1rem;
        border-radius: 8px;
        overflow-x: auto;
        margin: 1rem 0;
    }

    .ldr-note-content-rendered pre code {
        background: transparent;
        padding: 0;
    }

    /* Wiki-style note links */
    .ldr-note-content-rendered .ldr-wiki-link {
        background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.15) 0%, rgba(var(--accent-secondary-rgb), 0.1) 100%);
        padding: 0.1rem 0.4rem;
        border-radius: 4px;
        color: var(--accent-primary);
        text-decoration: none;
        cursor: pointer;
    }

    .ldr-note-content-rendered .ldr-wiki-link:hover {
        background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.25) 0%, rgba(var(--accent-secondary-rgb), 0.2) 100%);
    }

    /* Unresolved wiki-link: processWikiLinks() in note-detail.js leaves
       data-target-id empty when a [[link]] does not resolve to a stored
       NoteLink FK. Give those a muted, dashed treatment (the standard
       wiki/Obsidian convention for dangling links) so a broken link is
       distinguishable from a working one before the user clicks.
       Note: legacy notes not yet re-saved under v2 also have an empty
       target-id and still resolve via title-search fallback, so this is
       deliberately a gentle de-emphasis ("not yet linked") rather than an
       alarming error style. */
    .ldr-note-content-rendered .ldr-wiki-link[data-target-id=""] {
        background: none;
        color: var(--text-muted);
        text-decoration: underline dashed;
        text-underline-offset: 0.2em;
        opacity: 0.85;
    }

    .ldr-note-content-rendered .ldr-wiki-link[data-target-id=""]::after {
        content: "?";
        font-size: 0.7em;
        vertical-align: super;
        margin-left: 0.1em;
        opacity: 0.7;
    }

    .ldr-note-content-rendered .ldr-wiki-link[data-target-id=""]:hover {
        background: rgba(var(--accent-primary-rgb), 0.08);
        color: var(--accent-primary);
    }

    /* Tags inline display */
    .ldr-note-tags-inline {
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .ldr-note-tags-inline .ldr-tag-label {
        font-size: 0.85rem;
        color: var(--text-muted);
        font-weight: 500;
    }

    .ldr-note-tags-inline .ldr-tag {
        background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.12) 0%, rgba(var(--accent-secondary-rgb), 0.08) 100%);
        color: var(--accent-primary);
        padding: 0.3rem 0.7rem;
        border-radius: 14px;
        font-size: 0.8rem;
        font-weight: 500;
    }

    /* Right Panel Sections */
    .ldr-note-panel-section {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .ldr-note-panel-section-header {
        padding: 0.75rem 1rem;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ldr-note-panel-section-header i {
        color: var(--accent-primary);
        margin-right: 0.5rem;
    }

    /*
        Used on the Related Notes section header which is a real <button>
        (so keyboard users can expand the panel via Tab+Enter). Strips
        the default browser <button> chrome so it visually matches the
        sibling <div> section headers.
    */
    button.ldr-unstyled-button {
        width: 100%;
        text-align: inherit;
        font: inherit;
        color: inherit;
        background: var(--bg-secondary);
        border: 0;
        cursor: pointer;
    }
    button.ldr-unstyled-button:focus-visible {
        outline: 2px solid var(--accent-primary);
        outline-offset: -2px;
    }

    .ldr-note-panel-section-content {
        padding: 0.75rem;
    }

    /* Table of Contents */
    .ldr-toc-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .ldr-toc-item {
        margin-bottom: 0.25rem;
    }

    .ldr-toc-item a {
        display: block;
        padding: 0.35rem 0.5rem;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 0.85rem;
        border-radius: 6px;
        transition: all 0.15s;
    }

    .ldr-toc-item a:hover {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }

    .ldr-toc-item.active a {
        color: var(--accent-primary);
        background: rgba(var(--accent-primary-rgb), 0.1);
    }

    .ldr-toc-item.ldr-level-2 a {
        padding-left: 1.25rem;
    }

    .ldr-toc-item.ldr-level-3 a {
        padding-left: 2rem;
        font-size: 0.8rem;
    }

    .ldr-toc-empty {
        padding: 0.5rem;
        color: var(--text-muted);
        font-size: 0.8rem;
        font-style: italic;
    }

    /* Sidebar Backlink Items */
    .ldr-sidebar-backlink {
        display: block;
        padding: 0.6rem 0.75rem;
        background: var(--bg-secondary);
        border-radius: 8px;
        margin-bottom: 0.5rem;
        text-decoration: none;
        transition: all 0.15s;
        cursor: pointer;
    }

    .ldr-sidebar-backlink:hover {
        background: var(--bg-tertiary);
        transform: translateX(2px);
    }

    .ldr-sidebar-backlink:last-child {
        margin-bottom: 0;
    }

    .ldr-sidebar-backlink-title {
        font-weight: 600;
        color: var(--text-primary);
        font-size: 0.85rem;
        margin-bottom: 0.2rem;
    }

    .ldr-sidebar-backlink-preview {
        font-size: 0.75rem;
        color: var(--text-muted);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Floating Action Button */
    .ldr-fab-container {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        z-index: 100;
    }

    .ldr-fab {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(var(--accent-primary-rgb), 0.4);
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ldr-fab:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 24px rgba(var(--accent-primary-rgb), 0.5);
    }

    .ldr-fab.ldr-open {
        transform: rotate(45deg);
    }

    /* Busy indicator while any AI action is in flight. The .ldr-loading
       class is toggled by setButtonLoading() in note-detail.js — a
       spinning ring overlay around the magic-wand icon reads as "AI is
       working" without obscuring the icon itself. */
    .ldr-fab.ldr-loading {
        cursor: progress;
    }

    .ldr-fab.ldr-loading::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: rgba(255, 255, 255, 0.85);
        border-right-color: rgba(255, 255, 255, 0.45);
        animation: ldr-fab-spin 0.9s linear infinite;
        pointer-events: none;
    }

    @keyframes ldr-fab-spin {
        to { transform: rotate(360deg); }
    }

    /* Position relative so the absolute ::after centers on the FAB. */
    .ldr-fab {
        position: relative;
    }

    .ldr-fab-menu {
        position: absolute;
        bottom: 70px;
        right: 0;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 0.5rem;
        min-width: 180px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        display: none;
        /* The menu opens upward (bottom:70px) and can hold ~10 items.
           Cap it to the space above the FAB so its top items never
           render above the viewport on short/landscape screens, and let
           it scroll instead. 9rem accounts for the FAB + its bottom
           offset; the 56px mobile bottom nav is cleared by the FAB
           offset in the max-width:767px media query below. */
        max-height: calc(100vh - 9rem);
        max-height: calc(100dvh - 9rem);
        overflow-y: auto;
    }

    .ldr-fab-menu.ldr-open {
        display: block;
        animation: fadeInUp 0.2s ease;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .ldr-fab-menu-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.65rem 0.85rem;
        color: var(--text-secondary);
        background: transparent;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.9rem;
        width: 100%;
        text-align: left;
        transition: all 0.15s;
    }

    .ldr-fab-menu-item:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }

    .ldr-fab-menu-item i {
        width: 20px;
        text-align: center;
        color: var(--accent-primary);
    }

    /* On mobile the global bottom nav (.ldr-mobile-bottom-nav) is fixed at
       bottom:0 with height var(--mobile-nav-height) (56px) and z-index:1000.
       The FAB's default bottom:2rem puts its lower edge under that nav, where
       the nav paints over it and intercepts taps. Raise the FAB clear of the
       nav (and the iOS home indicator) and lift its z-index above the nav so
       the primary AI action is fully tappable. The 767px breakpoint matches
       where mobile-navigation.css reveals the nav. */
    @media (max-width: 767px) {
        .ldr-fab-container {
            bottom: calc(var(--mobile-nav-height, 56px) + 1rem + env(safe-area-inset-bottom));
            z-index: 1001;
        }
        /* Keep the upward-opening menu within the (now smaller) space above
           the raised FAB so its top items stay reachable above the nav. */
        .ldr-fab-menu {
            max-height: calc(100vh - var(--mobile-nav-height, 56px) - 10rem - env(safe-area-inset-bottom));
            max-height: calc(100dvh - var(--mobile-nav-height, 56px) - 10rem - env(safe-area-inset-bottom));
        }
    }

    /* Edit Mode Header */
    .ldr-edit-mode-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border-color);
    }

    .ldr-edit-mode-actions {
        display: flex;
        gap: 0.5rem;
    }

    .ldr-back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-secondary);
        text-decoration: none;
        margin-bottom: 1.25rem;
        padding: 0.5rem 0;
        transition: color 0.2s ease;
    }

    .ldr-back-link:hover {
        color: var(--accent-primary);
    }

    .ldr-note-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1.5rem;
        margin-bottom: 1.25rem;
    }

    .ldr-note-title-section {
        flex: 1;
    }

    .ldr-note-title-input {
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-primary);
        width: 100%;
        padding: 0.25rem 0;
        transition: border-color 0.2s ease;
    }

    .ldr-note-title-input:focus {
        outline: none;
        border-bottom-color: var(--accent-primary);
    }

    .ldr-note-title-input::placeholder {
        color: var(--text-muted);
    }

    .ldr-note-actions {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .ldr-note-action-btn {
        padding: 0.65rem 0.9rem;
        border-radius: 10px;
        border: 1px solid var(--border-color);
        background: var(--bg-secondary);
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
    }

    .ldr-note-action-btn:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
        transform: translateY(-1px);
    }

    .ldr-note-action-btn.ldr-primary {
        background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
        color: white;
        border: none;
        box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.3);
    }

    .ldr-note-action-btn.ldr-primary:hover {
        box-shadow: 0 6px 16px rgba(var(--accent-primary-rgb), 0.4);
    }

    .ldr-note-action-btn.ldr-pinned {
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }

    /* Disabled + in-flight (.ldr-loading) feedback. #save-btn is an
       .ldr-note-action-btn, NOT a Bootstrap .btn, so the site-wide
       .btn:disabled rule never reaches it — without this a save-in-progress
       (setButtonLoading('save-btn', true) adds .ldr-loading + disables the
       button) looked completely unchanged and the click seemed to do nothing. */
    .ldr-note-action-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .ldr-note-action-btn:disabled:hover {
        transform: none;
        box-shadow: none;
    }

    .ldr-note-action-btn.ldr-loading {
        position: relative;
        cursor: progress;
        /* Leave room for the spinner so it doesn't overlap the label. */
        padding-right: 1.9rem;
    }

    .ldr-note-action-btn.ldr-loading::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0.65rem;
        width: 13px;
        height: 13px;
        margin-top: -7px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: currentColor;
        border-right-color: currentColor;
        opacity: 0.75;
        animation: ldr-fab-spin 0.9s linear infinite;
        pointer-events: none;
    }

    .ldr-note-meta {
        display: flex;
        gap: 1.25rem;
        font-size: 0.875rem;
        color: var(--text-muted);
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        padding: 0.75rem 1rem;
        background: var(--bg-tertiary);
        border-radius: 10px;
    }

    .ldr-note-meta-item {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .ldr-note-meta-item i {
        color: var(--accent-primary);
        opacity: 0.7;
    }

    .ldr-note-meta-item.ldr-indexed {
        color: var(--success-color);
    }

    .ldr-note-meta-item.ldr-indexed i {
        color: var(--success-color);
    }

    .ldr-sections-container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .ldr-note-section {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 1.25rem;
    }

    .ldr-note-section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }

    .ldr-note-section-title {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .ldr-note-section-title i {
        color: var(--accent-primary);
    }

    /* Collections Section */
    .ldr-collections-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    .ldr-collection-badge {
        background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.1) 0%, rgba(var(--accent-secondary-rgb), 0.05) 100%);
        border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
        padding: 0.4rem 0.85rem;
        border-radius: 20px;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-primary);
    }

    .ldr-collection-badge .ldr-remove-collection {
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.2s;
    }

    .ldr-collection-badge .ldr-remove-collection:hover {
        opacity: 1;
        color: var(--error-color);
    }

    .ldr-collection-badge.ldr-indexed {
        background: linear-gradient(135deg, rgba(var(--success-color-rgb), 0.1) 0%, rgba(var(--success-color-rgb), 0.05) 100%);
        border-color: rgba(var(--success-color-rgb), 0.3);
    }

    .ldr-collection-badge.ldr-indexed::before {
        content: '\f00c';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 0.65rem;
        color: var(--success-color);
    }

    .ldr-add-collection-btn {
        background: transparent;
        border: 1px dashed var(--border-color);
        border-radius: 20px;
        padding: 0.4rem 0.85rem;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 0.8rem;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .ldr-add-collection-btn:hover {
        border-color: var(--accent-primary);
        color: var(--accent-primary);
        background: rgba(var(--accent-primary-rgb), 0.05);
    }

    /* Markdown Editor Container */
    .ldr-markdown-editor-container {
        border: 1px solid var(--border-color);
        border-radius: 10px;
        overflow: hidden;
        background: var(--bg-secondary);
    }

    .ldr-editor-tabs {
        display: flex;
        background: var(--bg-tertiary);
        border-bottom: 1px solid var(--border-color);
    }

    .ldr-editor-tab {
        padding: 0.6rem 1.2rem;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--text-secondary);
        cursor: pointer;
        font-weight: 500;
        font-size: 0.9rem;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .ldr-editor-tab:hover {
        color: var(--text-primary);
        background: rgba(var(--accent-primary-rgb), 0.05);
    }

    .ldr-editor-tab.active {
        color: var(--accent-primary);
        border-bottom-color: var(--accent-primary);
        background: rgba(var(--accent-primary-rgb), 0.08);
    }

    .ldr-editor-tab i {
        font-size: 0.85rem;
    }

    .ldr-markdown-toolbar {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.5rem 0.75rem;
        background: var(--bg-tertiary);
        border-bottom: 1px solid var(--border-color);
        flex-wrap: wrap;
    }

    .ldr-toolbar-group {
        display: flex;
        gap: 0.125rem;
    }

    .ldr-toolbar-separator {
        width: 1px;
        height: 20px;
        background: var(--border-color);
        margin: 0 0.5rem;
    }

    .ldr-toolbar-btn {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 6px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.15s;
    }

    .ldr-toolbar-btn:hover {
        background: var(--bg-secondary);
        color: var(--text-primary);
        border-color: var(--border-color);
    }

    .ldr-toolbar-btn:active {
        background: var(--accent-primary);
        color: white;
        border-color: var(--accent-primary);
    }

    .ldr-note-preview {
        min-height: 350px;
        padding: 1.25rem;
        background: var(--bg-secondary);
        color: var(--text-primary);
        line-height: 1.7;
    }

    .ldr-note-preview:empty::before {
        content: 'Nothing to preview';
        color: var(--text-secondary);
        font-style: italic;
    }

    /* Content Editor */
    .ldr-note-content-editor {
        width: 100%;
        min-height: 350px;
        padding: 1.25rem;
        background: var(--bg-secondary);
        border: none;
        border-radius: 0;
        color: var(--text-primary);
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 0.95rem;
        line-height: 1.7;
        resize: vertical;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .ldr-note-content-editor:focus {
        outline: none;
        box-shadow: inset 0 0 0 2px rgba(var(--accent-primary-rgb), 0.2);
    }

    /* Tags Section */
    .ldr-note-tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    .ldr-note-tag {
        background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.15) 0%, rgba(var(--accent-secondary-rgb), 0.1) 100%);
        color: var(--accent-primary);
        padding: 0.35rem 0.75rem;
        border-radius: 16px;
        font-size: 0.8rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
    }

    /* Tag/collection remove control. Rendered as real <button> (was <span>)
     * so keyboard users can focus and activate via Enter/Space. The resets
     * below strip the browser's native button chrome so the rendering is
     * visually identical to the previous <span> rendering. */
    .ldr-remove-tag {
        background: transparent;
        border: 0;
        padding: 0;
        font: inherit;
        line-height: 1;
        color: inherit;
    }

    .ldr-note-tag .ldr-remove-tag {
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.2s;
    }

    .ldr-note-tag .ldr-remove-tag:hover {
        opacity: 1;
        color: var(--error-color);
    }

    .ldr-collection-badge .ldr-remove-tag {
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.2s;
    }

    .ldr-collection-badge .ldr-remove-tag:hover {
        opacity: 1;
        color: var(--error-color);
    }

    .ldr-add-tag-input {
        background: transparent;
        border: 1px dashed var(--border-color);
        border-radius: 16px;
        padding: 0.35rem 0.75rem;
        color: var(--text-secondary);
        font-size: 0.8rem;
        width: 120px;
        transition: all 0.2s ease;
    }

    .ldr-add-tag-input:focus {
        outline: none;
        border-color: var(--accent-primary);
        border-style: solid;
        width: 150px;
    }

    /* Research Section */
    .ldr-research-section {
        margin-top: 0.5rem;
    }

    .ldr-research-trigger-btn {
        background: linear-gradient(135deg, var(--accent-primary) 0%, #2563eb 100%);
        color: white;
        border: none;
        padding: 0.6rem 1.25rem;
        border-radius: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 600;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    }

    .ldr-research-trigger-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
    }

    .ldr-research-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    /* .ldr-research-item styles are in notes.css */

    /* Modal improvements – scoped to note detail page */
    .ldr-note-page .modal-content {
        border-radius: 16px;
    }

    .ldr-note-page .modal-header {
        padding: 1.25rem 1.5rem;
    }

    .ldr-note-page .modal-body {
        padding: 1.5rem;
    }

    .ldr-note-page .modal-footer {
        padding: 1rem 1.5rem;
    }

    .ldr-note-page .form-control,
    .ldr-note-page .form-select {
        border-radius: 8px;
        padding: 0.75rem 1rem;
    }

    .ldr-note-page .btn-outline-primary {
        border-radius: 8px;
        font-weight: 500;
    }

    /* AI Features Section */
    .ldr-ai-section {
        border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
        background: linear-gradient(135deg, rgba(var(--accent-primary-rgb), 0.03) 0%, rgba(var(--accent-secondary-rgb), 0.02) 100%);
    }

    .ldr-ai-features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.75rem;
    }

    .ldr-ai-feature-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.85rem;
    }

    .ldr-ai-feature-btn:hover {
        background: var(--bg-tertiary);
        border-color: var(--accent-primary);
        color: var(--accent-primary);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.15);
    }

    .ldr-ai-feature-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    .ldr-ai-feature-btn i {
        font-size: 1.25rem;
    }

    .ldr-ai-feature-btn.ldr-loading {
        position: relative;
        color: transparent;
    }

    .ldr-ai-feature-btn.ldr-loading::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        border: 2px solid var(--accent-primary);
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* AI Results Panel */
    .ldr-ai-results-panel {
        margin-top: 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        overflow: hidden;
    }

    .ldr-ai-results-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        background: var(--bg-tertiary);
        border-bottom: 1px solid var(--border-color);
        font-weight: 600;
        color: var(--text-primary);
    }

    .ldr-ai-results-close {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 0.25rem;
        transition: color 0.2s;
    }

    .ldr-ai-results-close:hover {
        color: var(--text-primary);
    }

    .ldr-ai-results-content {
        padding: 1rem;
        max-height: 400px;
        overflow-y: auto;
    }

    .ldr-ai-results-content p {
        margin: 0;
        line-height: 1.7;
        color: var(--text-secondary);
    }

    .ldr-ai-results-content ul {
        margin: 0;
        padding-left: 1.25rem;
    }

    .ldr-ai-results-content li {
        margin-bottom: 0.5rem;
        color: var(--text-secondary);
    }

    /* .ldr-ai-result-card and .ldr-similarity-badge styles are in notes.css */

    /* Research question item */
    .ldr-research-question-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 0.75rem 1rem;
        margin-bottom: 0.5rem;
        transition: all 0.2s ease;
    }

    .ldr-research-question-item:hover {
        border-color: var(--accent-primary);
    }

    .ldr-research-question-text {
        flex: 1;
        color: var(--text-primary);
    }

    .ldr-research-question-btn {
        background: linear-gradient(135deg, var(--accent-primary) 0%, #2563eb 100%);
        color: white;
        border: none;
        padding: 0.35rem 0.65rem;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.75rem;
        font-weight: 500;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .ldr-research-question-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }

    /* Tag suggestion chips */
    .ldr-suggested-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        background: linear-gradient(135deg, rgba(var(--success-color-rgb), 0.15) 0%, rgba(var(--success-color-rgb), 0.1) 100%);
        border: 1px solid rgba(var(--success-color-rgb), 0.3);
        color: var(--success-color);
        padding: 0.35rem 0.65rem;
        border-radius: 20px;
        font-size: 0.8rem;
        font-family: inherit;
        line-height: 1.2;
        cursor: pointer;
        transition: all 0.2s ease;
        margin: 0.25rem;
    }

    .ldr-suggested-tag:hover {
        background: rgba(var(--success-color-rgb), 0.25);
        transform: scale(1.05);
    }

    .ldr-suggested-tag:focus-visible {
        outline: 2px solid var(--success-color);
        outline-offset: 2px;
    }

    .ldr-suggested-tag i {
        font-size: 0.7rem;
    }

    /* Key concepts display */
    .ldr-concepts-category {
        margin-bottom: 1rem;
    }

    .ldr-concepts-category:last-child {
        margin-bottom: 0;
    }

    .ldr-concepts-category-title {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.5rem;
    }

    .ldr-concepts-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .ldr-concept-chip {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        padding: 0.3rem 0.6rem;
        border-radius: 16px;
        font-size: 0.8rem;
        color: var(--text-secondary);
    }

    .ldr-concept-chip.ldr-entity {
        border-color: rgba(59, 130, 246, 0.3);
        color: var(--accent-primary);
    }

    .ldr-concept-chip.ldr-concept {
        border-color: rgba(var(--accent-primary-rgb), 0.3);
        color: var(--accent-primary);
    }

    .ldr-concept-chip.ldr-theme {
        border-color: rgba(var(--success-color-rgb), 0.3);
        color: var(--success-color);
    }

    /* Backlinks Section */
    .ldr-backlinks-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .ldr-backlink-item {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 0.85rem 1rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .ldr-backlink-item:hover {
        border-color: var(--accent-primary);
        transform: translateX(4px);
    }

    .ldr-backlink-item-title {
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.25rem;
    }

    .ldr-backlink-item-preview {
        font-size: 0.8rem;
        color: var(--text-muted);
        line-height: 1.4;
    }

    .ldr-backlink-item-link-text {
        font-size: 0.75rem;
        color: var(--accent-primary);
        margin-top: 0.35rem;
        font-style: italic;
    }

    /* Version History Section */
    .ldr-versions-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .ldr-version-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 0.75rem 1rem;
        transition: all 0.2s ease;
    }

    .ldr-version-item:hover {
        border-color: var(--accent-primary);
    }

    .ldr-version-item-info {
        flex: 1;
    }

    .ldr-version-item-title {
        font-weight: 500;
        color: var(--text-primary);
        font-size: 0.9rem;
    }

    .ldr-version-item-meta {
        font-size: 0.75rem;
        color: var(--text-muted);
        display: flex;
        gap: 0.75rem;
        margin-top: 0.25rem;
    }

    .ldr-version-item-summary {
        font-size: 0.8rem;
        color: var(--text-secondary);
        margin-top: 0.35rem;
        font-style: italic;
    }

    .ldr-version-item-actions {
        display: flex;
        gap: 0.5rem;
    }

    .ldr-version-action-btn {
        background: transparent;
        border: 1px solid var(--border-color);
        color: var(--text-muted);
        padding: 0.35rem 0.6rem;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.75rem;
        transition: all 0.2s ease;
    }

    .ldr-version-action-btn:hover {
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }

    .ldr-version-action-btn.ldr-restore:hover {
        border-color: var(--success-color);
        color: var(--success-color);
    }

    .ldr-version-type-badge {
        display: inline-block;
        padding: 0.15rem 0.4rem;
        border-radius: 8px;
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .ldr-version-type-badge.ldr-initial {
        background: rgba(var(--success-color-rgb), 0.15);
        color: var(--success-color);
    }

    .ldr-version-type-badge.ldr-manual_save {
        background: rgba(59, 130, 246, 0.15);
        color: var(--accent-primary);
    }

    .ldr-version-type-badge.ldr-auto_save {
        background: rgba(156, 163, 175, 0.15);
        color: #9ca3af;
    }

    .ldr-version-type-badge.ldr-restore,
    .ldr-version-type-badge.ldr-pre_restore {
        background: rgba(245, 158, 11, 0.15);
        color: var(--warning-color);
    }

    /* Link suggestion item */
    .ldr-link-suggestion-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 0.75rem 1rem;
        margin-bottom: 0.5rem;
        transition: all 0.2s ease;
    }

    .ldr-link-suggestion-item:hover {
        border-color: var(--accent-primary);
    }

    .ldr-link-suggestion-info {
        flex: 1;
    }

    .ldr-link-suggestion-title {
        font-weight: 600;
        color: var(--text-primary);
    }

    .ldr-link-suggestion-preview {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }

    .ldr-link-suggestion-add {
        background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
        color: white;
        border: none;
        padding: 0.35rem 0.65rem;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.75rem;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    .ldr-link-suggestion-add:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.3);
    }

    /* More Menu Dropdown */
    .ldr-more-menu {
        position: absolute;
        top: 100%;
        right: 0;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        padding: 0.5rem;
        min-width: 160px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        z-index: 100;
        display: none;
    }

    .ldr-more-menu.ldr-open {
        display: block;
    }

    .ldr-more-menu-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.65rem 0.85rem;
        color: var(--text-secondary);
        background: transparent;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 0.9rem;
        width: 100%;
        text-align: left;
        transition: all 0.15s;
    }

    .ldr-more-menu-item:hover {
        background: var(--bg-tertiary);
        color: var(--text-primary);
    }

    .ldr-more-menu-item.ldr-danger:hover {
        background: rgba(var(--error-color-rgb), 0.1);
        color: var(--error-color);
    }

    .ldr-more-menu-item i {
        width: 16px;
        text-align: center;
    }

    /* Badge for counts */
    .ldr-badge {
        background: var(--accent-primary);
        color: white;
        font-size: 0.7rem;
        padding: 0.15rem 0.5rem;
        border-radius: 10px;
        font-weight: 600;
    }

    /* Note actions container needs relative positioning for dropdown */
    .ldr-note-actions {
        position: relative;
    }
</style>
{% endblock %}

{% block content %}
<div class="ldr-page active ldr-note-page" id="note-detail">
    <div class="ldr-note-detail-container">
        <!-- Back Link -->
        <a href="/notes/" class="ldr-back-link">
            <i class="fas fa-arrow-left"></i>
            Back to Notes
        </a>

        <!-- Loading State -->
        <div id="note-loading" class="ldr-loading-spinner ldr-centered" role="status" aria-live="polite" aria-label="Loading note">
            <div class="ldr-spinner" aria-hidden="true"></div>
            <span class="ldr-visually-hidden">Loading note&hellip;</span>
        </div>

        <!-- Not Found State -->
        <div id="note-not-found" style="display: none;" class="ldr-empty-state">
            <i class="fas fa-exclamation-circle ldr-empty-icon"></i>
            <p>Note not found.</p>
            <a href="/notes/" class="btn btn-primary">Back to Notes</a>
        </div>

        <!-- Load Error State (transient/server failure — retryable, distinct
             from the permanent not-found state above) -->
        <div id="note-load-error" style="display: none;" class="ldr-empty-state">
            <i class="fas fa-exclamation-triangle ldr-empty-icon"></i>
            <p>Couldn't load this note. This may be a temporary problem.</p>
            <button type="button" class="btn btn-primary" data-action="retry-load-note">
                <i class="fas fa-rotate-right"></i> Retry
            </button>
        </div>

        <!-- Main Content (hidden until loaded) -->
        <div id="note-content-wrapper" style="display: none;">
            <div class="ldr-note-layout">
                <!-- Main Content Area -->
                <div class="ldr-note-main">
                    <!-- ==================== READ MODE ==================== -->
                    <div id="read-mode">
                        <!-- Header with Edit button -->
                        <div class="ldr-note-header">
                            <div class="ldr-note-title-section">
                                <h1 class="ldr-note-title-display" id="note-title-display">Untitled Note</h1>
                            </div>
                            <div class="ldr-note-actions">
                                <button class="ldr-note-action-btn" id="pin-btn" data-action="toggle-pin" title="Pin note">
                                    <i class="fas fa-thumbtack"></i>
                                </button>
                                <button class="ldr-note-action-btn ldr-primary" data-action="enter-edit-mode" title="Edit note">
                                    <i class="fas fa-edit"></i> Edit
                                </button>
                                <button class="ldr-note-action-btn" id="more-btn" data-action="toggle-more-menu" title="More actions" aria-haspopup="menu" aria-expanded="false" aria-controls="more-menu" aria-label="More actions">
                                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
                                </button>
                                <!-- Dropdown menu for more actions -->
                                <div id="more-menu" class="ldr-more-menu" role="menu" aria-label="More note actions">
                                    <button data-action="delete-note" class="ldr-more-menu-item ldr-danger" role="menuitem">
                                        <i class="fas fa-trash" aria-hidden="true"></i> Delete Note
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Meta bar -->
                        <div class="ldr-note-meta-bar">
                            <span id="note-created"><i class="fas fa-calendar-plus"></i> Created: --</span>
                            <span id="note-updated"><i class="fas fa-clock"></i> Updated: --</span>
                            <span id="note-word-count"><i class="fas fa-align-left"></i> -- words</span>
                            <span id="note-indexed" style="display: none;"><i class="fas fa-check-circle" style="color: var(--success-color);"></i> Indexed</span>
                        </div>

                        <!-- Rendered Content -->
                        <div id="note-content-rendered" class="ldr-note-content-rendered">
                            <!-- Rendered markdown will be inserted here -->
                        </div>

                        <!-- Tags (inline at bottom) -->
                        <div id="note-tags-display" class="ldr-note-tags-inline" style="display: none;">
                            <span class="ldr-tag-label">Tags:</span>
                            <!-- Tags will be inserted here -->
                        </div>
                    </div>

                    <!-- ==================== EDIT MODE ==================== -->
                    <div id="edit-mode" style="display: none;">
                        <!-- Edit Mode Header -->
                        <div class="ldr-edit-mode-header">
                            <label for="ldr-note-title" class="ldr-visually-hidden">Note title</label>
                            <input type="text" id="ldr-note-title" class="ldr-note-title-input" placeholder="Untitled Note..." aria-label="Note title">
                            <div class="ldr-edit-mode-actions">
                                <button class="ldr-note-action-btn" data-action="exit-edit-mode" title="Cancel">
                                    Cancel
                                </button>
                                <button id="save-btn" class="ldr-note-action-btn ldr-primary" data-action="save-note" title="Save changes">
                                    <i class="fas fa-save"></i> Save
                                </button>
                            </div>
                        </div>

                        <!-- Markdown Editor Container -->
                        <div class="ldr-markdown-editor-container">
                            <!-- Mode Toggle -->
                            <div class="ldr-editor-tabs">
                                <button class="ldr-editor-tab active" data-mode="write">
                                    <i class="fas fa-pencil-alt"></i> Write
                                </button>
                                <button class="ldr-editor-tab" data-mode="preview">
                                    <i class="fas fa-eye"></i> Preview
                                </button>
                            </div>

                            <!-- Formatting Toolbar -->
                            <div class="ldr-markdown-toolbar" id="markdown-toolbar">
                                <div class="ldr-toolbar-group">
                                    <button type="button" class="ldr-toolbar-btn" title="Bold (Ctrl+B)" data-format="bold"><i class="fas fa-bold"></i></button>
                                    <button type="button" class="ldr-toolbar-btn" title="Italic (Ctrl+I)" data-format="italic"><i class="fas fa-italic"></i></button>
                                    <button type="button" class="ldr-toolbar-btn" title="Strikethrough" data-format="strikethrough"><i class="fas fa-strikethrough"></i></button>
                                </div>
                                <div class="ldr-toolbar-separator"></div>
                                <div class="ldr-toolbar-group">
                                    <button type="button" class="ldr-toolbar-btn" title="Heading" data-format="heading"><i class="fas fa-heading"></i></button>
                                    <button type="button" class="ldr-toolbar-btn" title="Quote" data-format="quote"><i class="fas fa-quote-left"></i></button>
                                    <button type="button" class="ldr-toolbar-btn" title="Code" data-format="code"><i class="fas fa-code"></i></button>
                                </div>
                                <div class="ldr-toolbar-separator"></div>
                                <div class="ldr-toolbar-group">
                                    <button type="button" class="ldr-toolbar-btn" title="Bullet List" data-format="bullet"><i class="fas fa-list"></i></button>
                                    <button type="button" class="ldr-toolbar-btn" title="Numbered List" data-format="numbered"><i class="fas fa-list-ol"></i></button>
                                </div>
                                <div class="ldr-toolbar-separator"></div>
                                <div class="ldr-toolbar-group">
                                    <button type="button" class="ldr-toolbar-btn" title="Link" data-format="link"><i class="fas fa-link"></i></button>
                                    <button type="button" class="ldr-toolbar-btn" title="Note Link [[]]" data-format="notelink"><i class="fas fa-sticky-note"></i></button>
                                </div>
                            </div>

                            <!-- Editor hint -->
                            <div class="ldr-editor-hint" id="editor-hint">
                                <i class="fas fa-info-circle"></i>
                                Type <kbd>[[</kbd> to link to another note. Use <strong>Markdown</strong> for formatting.
                                <button type="button" class="ldr-hint-dismiss" id="dismiss-editor-hint" aria-label="Dismiss hint">&times;</button>
                            </div>

                            <!-- Textarea (Write mode) -->
                            <label for="note-content" class="ldr-visually-hidden">Note content (Markdown)</label>
                            <textarea id="note-content" class="ldr-note-content-editor" placeholder="Write your note here... Markdown is supported!" aria-label="Note content"></textarea>
                            <!-- Live region for wiki-link autocomplete suggestions count.
                                 Updated by renderWikiLinkItems / closeWikiLinkDropdown.
                                 Polite + atomic so SR re-announces on every count change. -->
                            <span id="ldr-wiki-link-status" class="ldr-visually-hidden" aria-live="polite" aria-atomic="true"></span>

                            <!-- Preview (Preview mode) -->
                            <div id="note-preview" class="ldr-note-preview ldr-markdown-content" style="display: none;"></div>
                        </div>

                        <!-- Tags Editor -->
                        <div class="ldr-note-section" style="margin-top: 1rem;">
                            <div class="ldr-note-section-header">
                                <span class="ldr-note-section-title">
                                    <i class="fas fa-tags"></i> Tags
                                </span>
                            </div>
                            <div class="ldr-note-tags-container" id="ldr-note-tags">
                                <input type="text" class="ldr-add-tag-input" id="add-tag-input" placeholder="Add tag...">
                            </div>
                        </div>

                        <!-- Collections (Edit Mode) -->
                        <div class="ldr-note-section" style="margin-top: 1rem;">
                            <div class="ldr-note-section-header">
                                <span class="ldr-note-section-title">
                                    <i class="fas fa-folder"></i> Collections
                                </span>
                            </div>
                            <div class="ldr-collections-container" id="ldr-note-collections">
                                <button class="ldr-add-collection-btn" data-action="show-add-collection-modal">
                                    <i class="fas fa-plus"></i> Add to Collection
                                </button>
                                <button class="ldr-add-collection-btn" data-action="show-index-to-collection-modal" title="Index for RAG search">
                                    <i class="fas fa-database"></i> Index for Search
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Sidebar -->
                <div class="ldr-note-sidebar">
                    <!-- Table of Contents -->
                    <div class="ldr-note-panel-section">
                        <div class="ldr-note-panel-section-header">
                            <span><i class="fas fa-list-ul"></i> Contents</span>
                        </div>
                        <div class="ldr-note-panel-section-content">
                            <ul id="toc-list" class="ldr-toc-list">
                                <li class="ldr-toc-empty">No headings found</li>
                            </ul>
                        </div>
                    </div>

                    <!-- Backlinks -->
                    <div class="ldr-note-panel-section">
                        <div class="ldr-note-panel-section-header">
                            <span><i class="fas fa-arrow-left"></i> Backlinks</span>
                            <span id="sidebar-backlinks-count" class="ldr-badge">0</span>
                        </div>
                        <div class="ldr-note-panel-section-content" id="sidebar-backlinks">
                            <div class="ldr-toc-empty">No notes link here</div>
                        </div>
                    </div>

                    <!-- Outgoing Links -->
                    <div class="ldr-note-panel-section">
                        <div class="ldr-note-panel-section-header">
                            <span><i class="fas fa-arrow-right"></i> Outgoing Links</span>
                            <span id="sidebar-outgoing-links-count" class="ldr-badge">0</span>
                        </div>
                        <div class="ldr-note-panel-section-content" id="sidebar-outgoing-links">
                            <div class="ldr-toc-empty">No outgoing links</div>
                        </div>
                    </div>

                    <!-- Research Runs (pinned to this note) -->
                    <div class="ldr-note-panel-section">
                        <div class="ldr-note-panel-section-header">
                            <span><i class="fas fa-flask"></i> Research</span>
                            <span id="sidebar-research-count" class="ldr-badge">0</span>
                        </div>
                        <div class="ldr-note-panel-section-content">
                            <div id="research-list" class="ldr-research-list"></div>
                        </div>
                    </div>

                    <!-- Related Notes (collapsed by default) -->
                    <div class="ldr-note-panel-section">
                        <!--
                            Real <button> for keyboard accessibility. Pre-fix
                            this was a <div> with click-only delegation and
                            inline `cursor: pointer` — keyboard users had no
                            way to expand the panel. unstyled-button class
                            strips the default <button> chrome so the visual
                            looks identical to the sibling section headers.
                        -->
                        <button type="button" class="ldr-note-panel-section-header ldr-unstyled-button" data-action="toggle-related-notes" aria-expanded="false" aria-controls="sidebar-related">
                            <span><i class="fas fa-project-diagram"></i> Related</span>
                            <i id="related-toggle-icon" class="fas fa-chevron-down" style="font-size: 0.7rem;"></i>
                        </button>
                        <div id="sidebar-related" class="ldr-note-panel-section-content" style="display: none;">
                            <div class="ldr-toc-empty">Click to load related notes</div>
                        </div>
                    </div>

                    <!-- Version History -->
                    <div class="ldr-note-panel-section">
                        <div class="ldr-note-panel-section-header">
                            <span><i class="fas fa-history"></i> Version History</span>
                        </div>
                        <div class="ldr-note-panel-section-content">
                            <div id="ldr-versions-list" class="ldr-versions-list"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Floating Action Button for AI Features -->
    <div class="ldr-fab-container" id="fab-container" style="display: none;">
        <div id="fab-menu" class="ldr-fab-menu" role="menu" aria-label="AI actions">
            <button class="ldr-fab-menu-item" role="menuitem" data-action="summarize-note">
                <i class="fas fa-compress-alt" aria-hidden="true"></i> Summarize
            </button>
            <button class="ldr-fab-menu-item" role="menuitem" data-action="extract-research-questions">
                <i class="fas fa-question-circle" aria-hidden="true"></i> Research Questions
            </button>
            <button class="ldr-fab-menu-item" role="menuitem" data-action="suggest-tags">
                <i class="fas fa-tags" aria-hidden="true"></i> Suggest Tags
            </button>
            <button class="ldr-fab-menu-item" role="menuitem" data-action="extract-key-concepts">
                <i class="fas fa-lightbulb" aria-hidden="true"></i> Key Concepts
            </button>
            <button class="ldr-fab-menu-item" role="menuitem" data-action="find-similar-notes">
                <i class="fas fa-copy" aria-hidden="true"></i> Similar Notes
            </button>
            <button class="ldr-fab-menu-item" role="menuitem" data-action="similar-passages">
                <i class="fas fa-paragraph" aria-hidden="true"></i> Similar Passages
            </button>
            <button class="ldr-fab-menu-item" role="menuitem" data-action="suggest-links">
                <i class="fas fa-link" aria-hidden="true"></i> Suggest Links
            </button>
            <button class="ldr-fab-menu-item" role="menuitem" data-action="unlinked-mentions">
                <i class="fas fa-search-plus" aria-hidden="true"></i> Unlinked Mentions
            </button>
            <button class="ldr-fab-menu-item" role="menuitem" data-action="trigger-research">
                <i class="fas fa-microscope" aria-hidden="true"></i> Research This
            </button>
            <button class="ldr-fab-menu-item" role="menuitem" data-action="verify-note">
                <i class="fas fa-clipboard-check" aria-hidden="true"></i> Verify with Research
            </button>
        </div>
        <button class="ldr-fab" id="fab-button" data-action="toggle-fab-menu" aria-label="AI actions" aria-haspopup="menu" aria-expanded="false" aria-controls="fab-menu">
            <i class="fas fa-magic" aria-hidden="true"></i>
        </button>
    </div>

    <!-- AI Results Panel (floating) -->
    <div id="ldr-ai-results-panel" class="ldr-ai-results-panel" role="region" aria-labelledby="ldr-ai-results-title" aria-live="polite" style="display: none; position: fixed; bottom: 6rem; right: 2rem; width: min(350px, calc(100vw - 4rem)); max-width: calc(100vw - 4rem); max-height: 400px; z-index: 101;">
        <div class="ldr-ai-results-header">
            <span id="ldr-ai-results-title">Results</span>
            <button class="ldr-ai-results-close" data-action="close-ai-results" aria-label="Close results">
                <i class="fas fa-times" aria-hidden="true"></i>
            </button>
        </div>
        <div id="ldr-ai-results-content" class="ldr-ai-results-content"></div>
    </div>
</div>

<!-- Research Trigger Modal -->
<div class="modal fade" id="researchModal" tabindex="-1" aria-labelledby="researchModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="background: var(--bg-secondary); border: 1px solid var(--border-color);">
            <div class="modal-header" style="border-bottom: 1px solid var(--border-color);">
                <h5 class="modal-title" id="researchModalLabel">
                    <i class="fas fa-microscope" style="color: var(--accent-primary); margin-right: 0.5rem;"></i>
                    Research from Note
                </h5>
                <button type="button" class="btn-close ldr-btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="research-query" class="form-label">Research Query</label>
                    <input type="text" class="form-control" id="research-query" placeholder="What would you like to research?"
                           style="background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary);">
                    <small class="text-muted">Leave empty to use the note title as the query.</small>
                </div>
                <div class="mb-3">
                    <label for="research-mode" class="form-label">Research Mode</label>
                    <select class="form-select" id="research-mode"
                            style="background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary);">
                        <option value="quick">Quick Summary</option>
                        <option value="detailed">Detailed Report</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer" style="border-top: 1px solid var(--border-color);">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <!-- id is the setButtonLoading hook: startResearch() disables
                     the button while the start POST is in flight. -->
                <button type="button" id="start-research-btn" class="btn btn-primary" data-action="start-research">
                    <i class="fas fa-search"></i> Start Research
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Semantic Diff Modal -->
<div class="modal fade" id="diffModal" tabindex="-1" aria-labelledby="diffModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="background: var(--bg-secondary); border: 1px solid var(--border-color);">
            <div class="modal-header" style="border-bottom: 1px solid var(--border-color);">
                <h5 class="modal-title" id="diffModalLabel">
                    <i class="fas fa-code-compare" style="color: var(--accent-primary); margin-right: 0.5rem;"></i>
                    Semantic Diff
                </h5>
                <button type="button" class="btn-close ldr-btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="diff-modal-body">
                <p class="text-muted">Loading…</p>
            </div>
            <div class="modal-footer" style="border-top: 1px solid var(--border-color);">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Add to Collection Modal -->
<div class="modal fade" id="collectionModal" tabindex="-1" aria-labelledby="collectionModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="background: var(--bg-secondary); border: 1px solid var(--border-color);">
            <div class="modal-header" style="border-bottom: 1px solid var(--border-color);">
                <h5 class="modal-title" id="collectionModalLabel">
                    <i class="fas fa-folder-plus" style="color: var(--accent-primary); margin-right: 0.5rem;"></i>
                    Add to Collection
                </h5>
                <button type="button" class="btn-close ldr-btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="collection-select" class="form-label">Select Collection</label>
                    <select class="form-select" id="collection-select"
                            style="background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary);">
                    </select>
                </div>
            </div>
            <div class="modal-footer" style="border-top: 1px solid var(--border-color);">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" data-action="add-to-collection">
                    <i class="fas fa-plus"></i> Add
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Index to Collection Modal -->
<div class="modal fade" id="indexModal" tabindex="-1" aria-labelledby="indexModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="background: var(--bg-secondary); border: 1px solid var(--border-color);">
            <div class="modal-header" style="border-bottom: 1px solid var(--border-color);">
                <h5 class="modal-title" id="indexModalLabel">
                    <i class="fas fa-database" style="color: var(--success-color); margin-right: 0.5rem;"></i>
                    Index Note for Search
                </h5>
                <button type="button" class="btn-close ldr-btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted mb-3">Index this note into a collection so it can be found during research using semantic search.</p>
                <div class="mb-3">
                    <label for="index-collection-select" class="form-label">Select Collection</label>
                    <select class="form-select" id="index-collection-select"
                            style="background: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary);">
                    </select>
                </div>
            </div>
            <div class="modal-footer" style="border-top: 1px solid var(--border-color);">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" data-action="index-note-from-modal">
                    <i class="fas fa-database"></i> Index
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<!-- Note: url-validator.js, ui.js, urls.js, formatting.js, api.js are already loaded in base.html -->
<script>
    // Pass note ID to JavaScript
    window.noteId = {{ note_id | tojson }};
</script>
<!-- Shared SemanticSearch helpers — provides window.SemanticSearch.isSafeExternalUrl,
     used to gate external source links rendered by the fact-check verdicts. -->
<script defer src="/static/js/components/notes_shared.js"></script>
<script defer src="/static/js/components/semantic_search.js"></script>
<script defer src="/static/js/pages/note-detail.js"></script>
{% endblock %}