/* Main content area */
.mainContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Editor toolbar — always rendered. Hosts the always-visible sidebar
   toggle and (when present) the breadcrumb trail. The .editorToolbar--open
   class is kept for legacy hooks but no longer gates visibility.
   Height + horizontal padding are matched to .notesPaneHeader so the
   toggle sidebar button stays in pixel-perfect alignment when the user
   pops the sidebar overlay open from inside the editor area. */
.editorToolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* Sidebar toggle that lives at the start of the toolbar — left of the
   breadcrumb back button when a trail exists, otherwise the toolbar's
   sole occupant. Labeled "Sidebar" so users know what tapping it does;
   carries a hairline border at rest so it reads as a button without
   needing hover. */
.editorToolbarToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition);
}

.editorToolbarToggle .fa-table-columns { font-size: 14px; }

.editorToolbarToggle:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--border-strong);
}

.editorToolbarToggle:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 2px;
}

.editorTabs {
    display: flex;
    gap: 2px;
}

.editorTab {
    padding: 5px 14px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-tertiary);
    transition: all var(--transition);
}

.editorTab:hover {
    color: var(--text-secondary);
    background: var(--accent-soft);
}

.editorTab.active {
    color: var(--text);
    background: var(--accent-soft);
}

.editorMeta {
    font-size: 11.5px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* When .editorMeta sits inline with .wordCount in the bottom bar, draw a
   small dot separator instead of a divider element to keep the markup clean. */
.wordCount + .editorMeta::before {
    content: '·';
    margin: 0 6px;
    opacity: 0.6;
}

/* Breadcrumb trail (shown when navigating via in-note links). */
.editorBreadcrumbs {
    display: none;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    font-size: 12px;
    line-height: 1.2;
    color: var(--text-secondary);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
}

.editorBreadcrumbs::-webkit-scrollbar { display: none; }

.editorBreadcrumbs.editorBreadcrumbs--open {
    display: flex;
}

/* Prominent back button — anchors the trail visually. */
.editorBreadcrumbBack {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.editorBreadcrumbBack i { font-size: 10px; }

.editorBreadcrumbBack:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text);
}

.editorBreadcrumbBack:active {
    transform: translateX(-1px);
}

/* Divider between the back button and the trail — a sturdier anchor. */
.editorBreadcrumbDivider {
    width: 1px;
    height: 16px;
    background: var(--border);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Trail pills — present, but lighter than the back button / current pill. */
.editorBreadcrumb {
    display: inline-flex;
    align-items: center;
    max-width: 200px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: inherit;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.editorBreadcrumb:hover:not(.editorBreadcrumb--current) {
    color: var(--text);
    background: var(--bg-hover);
    border-color: var(--border);
}

/* Current page — the "you are here" pill. Filled, no hover affordance. */
.editorBreadcrumb--current {
    color: var(--text);
    font-weight: 600;
    background: var(--accent-soft);
    border-color: var(--border);
    cursor: default;
}

.editorBreadcrumbSep {
    font-size: 12px;
    color: var(--text-tertiary);
    opacity: 0.6;
    flex-shrink: 0;
    user-select: none;
    padding: 0 1px;
}

/* Title input — a <textarea> so long titles wrap to multiple lines.
   Soft-grows up to 3 lines (font 32px × line-height 1.3 = ~42px per
   line, capped at ~125px content + 36px top padding ≈ 162px) and then
   scrolls vertically. Scrollbar is hidden so the titleblock keeps a
   clean editorial look. resize: none keeps the user from manually
   dragging the textarea bigger. */
.titleInput {
    width: 100%;
    padding: 36px 36px 0 36px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.3;
    /* Textarea-specific bits */
    display: block;
    resize: none;
    overflow-y: auto;
    max-height: calc(36px + 1.3em * 3 + 4px); /* top-pad + 3 lines + tiny breathing room */
    word-break: break-word;
    overflow-wrap: anywhere;
    /* Hide scrollbar — the title scrolls freely on touch / wheel without
       a visible bar polluting the editorial look. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.titleInput::-webkit-scrollbar { display: none; }

.titleInput::placeholder {
    color: var(--text-tertiary);
}

/* Tag row — sits between the title and the editor body. */
.editorTags {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 10px 36px 0 36px;
    font-size: 12px;
    /* Single-line tag row: chips overflow horizontally and scroll instead
       of wrapping. Hide the scrollbar but keep wheel/swipe behavior. */
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.editorTags::-webkit-scrollbar { display: none; }

/* Children must opt out of flex-shrink, otherwise the chips compress to fit
   the container instead of triggering the horizontal scroll. */
.editorTags > * {
    flex-shrink: 0;
}

.editorTag {
    display: inline-flex;
    align-items: center;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color var(--transition), background var(--transition);
}

.editorTag:hover { border-color: var(--border-strong); }

.editorTagLabel {
    padding: 3px 4px 3px 10px;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    border: none;
    font-size: inherit;
}

.editorTagLabel:hover { color: var(--text); }

.editorTagRemove {
    padding: 0 8px 1px 2px;
    color: var(--text-tertiary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: color var(--transition);
}

.editorTagRemove:hover { color: #c33; }

.editorTagInput {
    /* Solid bg + sticky-left so the input stays anchored at the start of the
       row while overflowing chips scroll horizontally past it. Without the
       solid bg, scrolling chips would visibly slide under a transparent
       input. */
    background: var(--bg);
    position: sticky;
    left: 0;
    z-index: 1;
    border: 1px dashed var(--border-strong);
    padding: 4px 10px;
    font-size: inherit;
    color: var(--text-secondary);
    outline: none;
    /* Width comes from the input's `size` attribute (set in JS to the
       placeholder length) so the pill hugs its text instead of leaving a
       fixed-width gap. */
    min-width: 0;
    border-radius: 999px;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.editorTagInput::placeholder { color: var(--text-tertiary); }

.editorTagInput:hover {
    border-color: var(--text-tertiary);
    color: var(--text);
}

.editorTagInput:focus {
    border-style: solid;
    border-color: var(--text-secondary);
    background: var(--bg);
    color: var(--text);
}

/* Editor textarea */
.editorArea {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The editor's scroll container — wraps everything from the title down
   through the content, so the title, tag row, formatting toolbar, and
   note body all scroll together. The bottom action bar (folder / share
   / trash / word count) is a sibling and stays fixed.
   Plain block flow inside; .editorContent carries a min-height so an
   empty editor still has room for the centered tips overlay. */
.editorScroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.editorTextarea {
    flex: 1;
    width: 100%;
    padding: 14px 36px 0 36px;
    font-size: 15px;
    line-height: 1.7;
    resize: none;
    color: var(--text);
    tab-size: 4;
}

.editorTextarea::placeholder {
    color: var(--text-tertiary);
}

/* Live contenteditable editor (replaces textarea + preview).
   Scrolling is delegated to the parent .editorScroll, so this wrapper
   is just a positioning context for the absolute-centered tips and
   the link picker. */
.editorContentWrap {
    position: relative;
}

/* Ambient tips shown only when the note is completely empty. Sits behind the
   editor so the caret renders on top; fades in/out. */
.editorTips {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 300px;
    width: calc(100% - 80px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    color: var(--text-tertiary);
    z-index: 0;
    text-align: center;
    user-select: none;
}

.editorTips--open { opacity: 0.78; }

.editorTipsHeader {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 14px;
    opacity: 0.75;
}

.editorTipsList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.4;
}

.editorTipsList li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.editorTips kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 6px;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1;
}

.editorTipsPlain { opacity: 0.85; }
.editorTipsSep   { opacity: 0.4; margin: 0 2px; }

.editorContent {
    /* min-height keeps the canvas tall enough for the empty-state tips
       to center comfortably. Approximated against the editor's chrome
       (toolbar ~48px + title ~80px + bottom bar ~60px = 188px); 240px
       leaves a small buffer so the tips never crowd against the
       toolbar. */
    min-height: calc(100vh - 240px);
    padding: 14px 36px 24px 36px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
    outline: none;
    tab-size: 4;
    caret-color: var(--text);
    position: relative;
    z-index: 1; /* keep caret + text above the tips layer */
}

.editorContent:empty::before,
.editorContent > p:first-child:only-child:empty::before,
.editorContent > p:first-child:only-child[data-empty]::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary);
    pointer-events: none;
}

.editorContent > :first-child { margin-top: 0; }
.editorContent > :last-child { margin-bottom: 0; }

/* Reuse preview styles for the in-editor rendered blocks. */
.editorContent h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.03em; margin: 20px 0 10px; line-height: 1.3; }
.editorContent h1:first-child { margin-top: 4px; }
.editorContent h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 18px 0 8px; line-height: 1.3; }
.editorContent h3 { font-size: 18px; font-weight: 600; margin: 16px 0 6px; line-height: 1.4; }
.editorContent h4, .editorContent h5, .editorContent h6 { font-size: 15px; font-weight: 600; margin: 14px 0 6px; }

.editorContent p { margin: 0 0 10px; }

.editorContent a {
    color: #0000FF;
    text-decoration: underline;
    text-decoration-color: #0000FF;
    text-underline-offset: 2px;
    /* Show a link pointer inside the contenteditable region (which would
       otherwise default to the text caret). Alt+click preserves caret placement
       for in-link editing. */
    cursor: pointer;
}
.editorContent a:hover { text-decoration-color: #0000FF; }

/* In-app note links render as subtle grey pills — reads as a chip-style
   reference rather than an external link. */
.editorContent a.editorNoteLink {
    display: inline;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 0.95em;
    line-height: 1.4;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    white-space: normal;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.editorContent a.editorNoteLink:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text);
    text-decoration: none;
}

.editorContent strong { font-weight: 600; }
.editorContent em { font-style: italic; }

.editorContent ul, .editorContent ol { margin: 0 0 10px; padding-left: 24px; }
.editorContent li { margin-bottom: 2px; }
.editorContent li > ul, .editorContent li > ol { margin: 2px 0 0; }
/* Pasted markdown can drop a <p> inside an <li>; keep the item compact so
   list rows stay equally spaced regardless of how the content arrived. */
.editorContent li > p { margin: 0; }

.editorContent blockquote {
    border-left: 3px solid var(--border-strong);
    padding: 4px 0 4px 16px;
    margin: 0 0 12px;
    color: var(--text-secondary);
}

.editorContent code {
    font-family: var(--font-mono);
    font-size: 13px;
    background: var(--accent-soft);
    padding: 2px 6px;
    border-radius: 4px;
}

.editorContent pre {
    position: relative;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin: 0 0 12px;
    overflow-x: auto;
}

.editorContent pre code {
    background: none;
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
}

.editorContent hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 20px 0;
}

.editorContent table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 12px;
    font-size: 14px;
}

.editorContent th, .editorContent td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
}

.editorContent th {
    background: var(--bg-sidebar);
    font-weight: 600;
}

.editorContent img {
    max-width: 100%;
    border-radius: var(--radius);
}

/* Preview pane */
.previewPane {
    flex: 1;
    overflow-y: auto;
    padding: 14px 36px 0 36px;
    font-size: 15px;
    line-height: 1.7;
    display: none;
}

.previewPane.active {
    display: block;
}

.editorTextarea.hideEditor {
    display: none;
}

.editorTextareaWrap.hideEditor {
    display: none;
}

/* Markdown rendered content */
.previewPane h1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 24px 0 12px;
    line-height: 1.3;
}

.previewPane h1:first-child {
    margin-top: 8px;
}

.previewPane h2 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 20px 0 10px;
    line-height: 1.3;
}

.previewPane h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 18px 0 8px;
    line-height: 1.4;
}

.previewPane h4, .previewPane h5, .previewPane h6 {
    font-size: 15px;
    font-weight: 600;
    margin: 16px 0 6px;
}

.previewPane p {
    margin: 0 0 12px;
}

.previewPane a {
    color: #0000FF;
    text-decoration: underline;
    text-decoration-color: #0000FF;
    text-underline-offset: 2px;
}

.previewPane a:hover {
    text-decoration-color: #0000FF;
}

.previewPane strong {
    font-weight: 600;
}

.previewPane ul, .previewPane ol {
    margin: 0 0 12px;
    padding-left: 24px;
}

.previewPane li {
    margin-bottom: 4px;
}

.previewPane li > ul, .previewPane li > ol {
    margin: 4px 0 0;
}

.previewPane blockquote {
    border-left: 3px solid var(--border-strong);
    padding: 4px 0 4px 16px;
    margin: 0 0 12px;
    color: var(--text-secondary);
}

.previewPane code {
    font-family: var(--font-mono);
    font-size: 13px;
    background: var(--accent-soft);
    padding: 2px 6px;
    border-radius: 4px;
}

.previewPane pre {
    position: relative;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin: 0 0 12px;
    overflow-x: auto;
}

.codeCopyBtn {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    font-family: inherit;
    font-size: 11px;
    line-height: 1;
    color: var(--text-secondary);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    user-select: none;
    transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

pre:hover > .codeCopyBtn,
.codeCopyBtn:focus-visible,
.codeCopyBtn.is-copied {
    opacity: 1;
}

.codeCopyBtn:hover {
    color: var(--text);
    border-color: var(--border-strong);
}

.codeCopyBtn.is-copied {
    color: #2e7d32;
    border-color: #2e7d32;
}

.previewPane pre code {
    background: none;
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
}

.previewPane hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 20px 0;
}

.previewPane table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 12px;
    font-size: 14px;
}

.previewPane th, .previewPane td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
}

.previewPane th {
    background: var(--bg-sidebar);
    font-weight: 600;
}

.previewPane img {
    max-width: 100%;
    border-radius: var(--radius);
}

.previewPane input[type="checkbox"] {
    margin-right: 6px;
}

/* Textarea wrapper (for block inserter positioning) */
.editorTextareaWrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
}

.editorTextareaWrap .editorTextarea {
    flex: 1;
}

/* Editor formatting toolbar — sits between .editorScroll and .editorBottomBar
   so it stays pinned at the bottom of the editor pane while content above
   scrolls. Horizontal scroll handles narrow viewports. Dropdown menus live
   outside this element so the overflow scroll doesn't clip them. */
.editorTopToolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 30px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.editorTopToolbar::-webkit-scrollbar { display: none; }

.editorToolBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 30px;
    min-width: 30px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 14px;
    transition: background var(--transition), color var(--transition);
    flex-shrink: 0;
}

.editorToolBtn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.editorToolBtn.active {
    background: var(--accent-soft);
    color: var(--text);
}

.editorToolBtn.active:hover {
    background: var(--bg-active);
}

.editorToolBtnLabel {
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: -0.01em;
}

.editorToolDivider {
    width: 1px;
    height: 18px;
    margin: 0 6px;
    background: var(--border);
    flex-shrink: 0;
}

/* Note link picker (# trigger) */
.noteLinkPicker {
    display: none;
    position: absolute;
    width: 320px;
    max-height: 260px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.04);
    z-index: 30;
    overflow: hidden;
    flex-direction: column;
}

.noteLinkPicker.open {
    display: flex;
}

.noteLinkPickerBody {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.noteLinkPickerHeader {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    padding: 10px 12px 6px;
    flex-shrink: 0;
}

.noteLinkPickerList {
    overflow-y: auto;
    padding: 0 6px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.noteLinkPickerItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
    text-align: left;
    width: 100%;
    transition: background var(--transition);
    cursor: pointer;
}

.noteLinkPickerItem:hover,
.noteLinkPickerItem.selected {
    background: var(--bg-hover);
}

.noteLinkPickerItemNumber {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-tertiary);
    background: var(--accent-soft);
    padding: 1px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.noteLinkPickerItemIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--text-secondary);
    font-size: 11px;
    flex-shrink: 0;
}

.noteLinkPickerItem.selected .noteLinkPickerItemIcon {
    background: var(--bg-active);
    color: var(--text);
}

.noteLinkPickerItemHint {
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 8px;
}

.noteLinkPickerItem--disabled {
    opacity: 0.55;
}

.noteLinkPickerItem--disabled .noteLinkPickerItemHint {
    color: #a06a1a;
}

.noteLinkPickerItem.selected .noteLinkPickerItemNumber {
    color: var(--text-secondary);
}

.noteLinkPickerItemTitle {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.noteLinkPickerEmpty {
    padding: 8px 12px 14px;
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.noteLinkPickerHint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
}

.noteLinkPickerHint > i {
    font-size: 14px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.noteLinkPickerHintTitle {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 2px;
}

.noteLinkPickerHintSub {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.noteLinkPickerSignin {
    align-self: center;
    padding: 5px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
    transition: background var(--transition);
}

.noteLinkPickerSignin:hover {
    background: var(--bg-hover);
}

/* Editor bottom bar — sibling of .editorScroll, stays fixed at the
   bottom of the editor pane while everything above scrolls. */
.editorBottomBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 28px 14px;
    flex-shrink: 0;
}

.editorBottomLeft {
    display: flex;
    align-items: center;
    gap: 6px;
}

.editorBottomBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    color: var(--text-secondary);
    background: var(--bg-sidebar);
    transition: background var(--transition), color var(--transition), transform var(--transition);
    cursor: pointer;
}

.editorBottomBtn:hover {
    background: var(--bg-active);
    color: var(--text);
}

.editorBottomBtn:active {
    transform: scale(0.96);
}

.editorBottomBtnDanger {
    color: #c33;
}

.editorBottomBtnDanger:hover {
    background: rgba(220, 50, 50, 0.12);
    color: #c33;
}

.editorBottomBtn.hasLabel {
    width: auto;
    padding: 0 12px 0 10px;
    gap: 7px;
    font-size: 13px;
    color: var(--text);
    max-width: 200px;
    background: var(--accent-soft);
}

.editorBottomBtn.hasLabel:hover {
    color: var(--text);
    background: var(--bg-active);
}

.editorFolderEmoji {
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.editorFolderName {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.editorBottomDivider {
    width: 1px;
    height: 14px;
    background: var(--border);
    margin: 0 6px;
}

.wordCount {
    font-size: 11px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

.uploadStatus {
    font-size: 11px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

/* Image lightbox */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: var(--radius);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* Lock banner — hidden by default; shown when this tab is in read-only mode
   because another session holds the edit lock. The banner explains the state
   and offers a "Take over" button that steals the lock from the other side. */
.lockBanner {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #fff8e1;
    border-bottom: 1px solid rgba(160, 106, 26, 0.25);
    color: #8a5a18;
    font-size: 13px;
    flex-shrink: 0;
}

.lockBanner.lockBanner--open {
    display: flex;
}

.lockBannerBody {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.lockBannerIcon {
    font-size: 13px;
    color: #a06a1a;
    flex-shrink: 0;
}

.lockBannerText {
    line-height: 1.4;
}

.lockBannerBtn {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 500;
    background: #a06a1a;
    color: #fff;
    flex-shrink: 0;
    transition: background var(--transition);
}

.lockBannerBtn:hover { background: #8a5a18; }

/* When the editor is locked, hide the editing chrome and dim the body so it
   reads as a read-only view. The contenteditable attribute is also flipped
   off in JS, but we hide the affordances visually too. */
body.editorReadOnly .editorTopToolbar,
body.editorReadOnly .editorTags,
body.editorReadOnly .editorBottomBar {
    display: none !important;
}

body.editorReadOnly .editorContent,
body.editorReadOnly .titleInput {
    user-select: text;
    cursor: default;
}

body.editorReadOnly .editorContent {
    opacity: 0.95;
}

/* File attachment card — modern alternative to a plain text link.
   Renders as an inline-block flex pill: icon · name + meta · download chevron. */
.editorFileCard {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 480px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-sidebar);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.editorFileCard:hover {
    border-color: var(--border-strong);
    background: var(--bg-hover);
}

.editorFileCard:active { transform: scale(0.99); }

.editorFileCardIcon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 17px;
}

.editorFileCardBody {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.editorFileCardName {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editorFileCardMeta {
    font-size: 11.5px;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.editorFileCardArrow {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-tertiary);
    font-size: 11px;
    transition: background var(--transition), color var(--transition);
}

.editorFileCard:hover .editorFileCardArrow {
    background: var(--accent);
    color: #fff;
}

/* Image resize — selected state + corner handles overlay */
.editorContent img.editorImageSelected {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.imageResizeOverlay {
    position: fixed;
    pointer-events: none;
    display: none;
    z-index: 60;
}

.imageResizeOverlay.open {
    display: block;
}

.imageResizeHandle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--bg);
    border: 2px solid var(--accent);
    border-radius: 3px;
    pointer-events: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    touch-action: none;
}

.imageResizeHandle--tl { top: -6px; left: -6px; cursor: nwse-resize; }
.imageResizeHandle--tr { top: -6px; right: -6px; cursor: nesw-resize; }
.imageResizeHandle--bl { bottom: -6px; left: -6px; cursor: nesw-resize; }
.imageResizeHandle--br { bottom: -6px; right: -6px; cursor: nwse-resize; }

/* Responsive */
@media (max-width: 768px) {
    .titleInput {
        font-size: 26px;
        padding: 16px 16px 0 16px;
        /* Re-derive the 3-line cap against mobile's smaller font + padding. */
        max-height: calc(16px + 1.3em * 3 + 4px);
    }
    /* Keep H1 paired with .titleInput on mobile (the desktop rule kept them
       in lockstep — without this override the H1 would float at the desktop
       size while the title shrank). */
    .editorContent h1 {
        font-size: 26px;
    }

    .editorTags {
        padding: 10px 16px 0 16px;
        /* Smaller than the .editorTagInput's 16px iOS-zoom floor — chips
           don't take focus, so they don't need that floor and read better
           at a more compact size on mobile. Children inherit via
           .editorTagLabel { font-size: inherit }. */
        font-size: 13px;
    }
    /* Pill height stays generous for touch (label + remove combined); only
       the type itself shrinks. */
    .editorTagLabel {
        padding: 4px 4px 4px 12px;
    }
    .editorTagRemove {
        padding: 0 12px 1px 4px;
        font-size: 15px;
    }

    .editorTopToolbar {
        padding: 4px 16px;
    }

    .editorContent {
        padding: 16px 16px 24px 16px;
    }

    .editorTextarea {
        padding: 20px 16px 0 40px;
    }

    .previewPane {
        padding: 20px 16px 0 40px;
    }

    /* Editor toolbar grows to 56px on mobile to mirror .notesPaneHeader,
       so the in-bar toggle (40×40) stays in pixel-perfect alignment with
       the in-sidebar toggle when the overlay opens. */
    .editorToolbar {
        height: 56px;
        padding: 0 12px;
    }
    /* Mobile: keep the label visible — text is "Notes" by default and is
       swapped to the active folder name by JS in index.php so the user
       knows what the sidebar will surface. */
    .editorToolbarToggle {
        height: 40px;
        padding: 0 12px;
        font-size: 14px;
    }
    .editorToolbarToggle .fa-table-columns { font-size: 16px; }

    /* Editor formatting bar — 30×30 buttons are smaller than native iOS
       toolbar buttons. Bump to 40 tall on mobile and grow the icon glyph
       so it doesn't look lost in the larger hit-target. */
    .editorToolBtn {
        height: 40px;
        min-width: 40px;
        padding: 0 10px;
        font-size: 16px;
    }

    /* Editor bottom bar (folder / share / delete) — 36→40 on mobile. */
    .editorBottomBtn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .editorBottomBar {
        padding: 6px 16px 12px;
        /* Buttons + word-count + meta otherwise compress; let the row scroll
           horizontally on narrow viewports instead of shrinking each button. */
        overflow-x: auto;
        overflow-y: visible;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .editorBottomBar::-webkit-scrollbar { display: none; }

    .editorBottomLeft {
        flex-wrap: nowrap;
        flex-shrink: 0;
    }

    .editorBottomLeft > * { flex-shrink: 0; }
    .wordCount, .editorMeta { white-space: nowrap; flex-shrink: 0; }

    /* iOS Safari auto-zooms when a focused input has font-size < 16px.
       Floor every editor-area form control at 16px on mobile so focusing
       them doesn't shift the viewport.
       .editorTagInput is intentionally NOT in this list — it inherits
       the 13px chip size from .editorTags so the "Add tag…" pill matches
       the surrounding chips exactly. The brief iOS zoom on focus is an
       accepted trade-off for visual consistency. */
    .sidebarSearch input,
    .confirmModalInput,
    .folderItemNameInput,
    .linkInput {
        font-size: 16px;
    }
}