/* ============================================================
   Note-limits — custom styles layered on top of Tailwind
   (markdown editor, preview, modals, scrollbars, transitions)
   ============================================================ */

/* ============================================================
   Design tokens — the ONLY source of colors used by components.
   :root = Nord (default). Each theme swaps tokens via a
   [data-theme] attribute on <html>; see public/index.html for
   the pre-paint script that applies the saved theme.
   ============================================================ */
:root,
[data-theme="nord"] {
  /* surfaces */
  --bg: #2E3440;
  --surface: #3B4252;
  --hover: #434C5E;
  --border: #4C566A;
  --muted: #7A8AA5; /* placeholder / de-emphasized text */
  /* text */
  --text: #D8DEE9;
  --text-2: #E5E9F0;
  --text-bright: #ECEFF4;
  --on-primary: #ECEFF4;
  /* accents */
  --primary: #81A1C1;
  --primary-strong: #4C6C97;
  --info: #88C0D0;
  --teal: #8FBCBB;
  --success: #A3BE8C;
  --purple: #B48EAD;
  --danger: #A6453F;
  --danger-hover: #B5514C;
  --danger-text: #E08581;
  --warning: #EBCB8B;
  /* rgb triplets for alpha compositing: rgba(var(--x-rgb), a) */
  --bg-rgb: 46,52,64;
  --surface-rgb: 59,66,82;
  --border-rgb: 76,86,106;
  --text-rgb: 216,222,233;
  --primary-rgb: 129,161,193;
  --primary-strong-rgb: 76,108,151;
  --success-rgb: 163,190,140;
  --danger-rgb: 224,133,129;
  --warning-rgb: 235,203,139;
  --scrim-rgb: 0,0,0;
}

/* Legacy Nord aliases (kept so any straggler keeps rendering) */
:root {
  --nord0: var(--bg); --nord1: var(--surface); --nord2: var(--hover); --nord3: var(--border);
  --nord4: var(--text); --nord5: var(--text-2); --nord6: var(--text-bright);
  --nord7: var(--teal); --nord8: var(--info); --nord9: var(--primary); --nord10: var(--primary-strong);
  --nord11: var(--danger); --nord12: var(--danger-hover); --nord13: var(--warning);
  --nord14: var(--success); --nord15: var(--purple);
}

/* Solarized — dark (base03/base02 surfaces, base0/base1 text) */
[data-theme="solarized"] {
  --bg: #002B36;
  --surface: #073642;
  --hover: #0E4B5A;
  --border: #125364;
  --muted: #7C9199;
  --text: #93A1A1;
  --text-2: #A7B3B3;
  --text-bright: #EEE8D5;
  --on-primary: #EEE8D5;
  --danger: #B73936;
  --danger-hover: #C4443F;
  --primary: #2F9AD8;
  --primary-strong: #166A97;
  --info: #2AA198;
  --teal: #56D0BF;
  --success: #A0BE40;
  --purple: #8F94DA;
  --danger-text: #F78A80;
  --warning: #E5B33F;
  --bg-rgb: 0,43,54;
  --surface-rgb: 7,54,66;
  --border-rgb: 18,83,100;
  --text-rgb: 147,161,161;
  --primary-rgb: 47,154,216;
  --primary-strong-rgb: 22,106,151;
  --success-rgb: 160,190,64;
  --danger-rgb: 247,138,128;
  --warning-rgb: 229,179,63;
  --scrim-rgb: 0,0,0;
}

/* Notion — light (white canvas, warm grays, blue accent) */
[data-theme="notion"] {
  --bg: #FFFFFF;
  --surface: #F7F7F5;
  --hover: #EFEFED;
  --border: #E3E2E0;
  --muted: #696861;
  --text: #595851;
  --text-2: #37352F;
  --text-bright: #191917;
  --on-primary: #FFFFFF;
  --primary: #1B74CC;
  --primary-strong: #1668B5;
  --info: #0F7B6C;
  --teal: #148077;
  --success: #448361;
  --purple: #9065B0;
  --danger: #D93B3B;
  --danger-hover: #BE3434;
  --danger-text: #B32C2C;
  --warning: #9E6C00;
  --bg-rgb: 255,255,255;
  --surface-rgb: 247,247,245;
  --border-rgb: 227,226,224;
  --text-rgb: 89,88,81;
  --primary-rgb: 27,116,204;
  --primary-strong-rgb: 22,104,181;
  --success-rgb: 68,131,97;
  --danger-rgb: 179,44,44;
  --warning-rgb: 158,108,0;
  --scrim-rgb: 0,0,0;
}

/* Obsidian — dark (graphite surfaces, purple accent) */
[data-theme="obsidian"] {
  --bg: #1E1E1E;
  --surface: #262626;
  --hover: #303030;
  --border: #363636;
  --muted: #999999;
  --text: #DCDDDE;
  --text-2: #E9E9E9;
  --text-bright: #F7F7F7;
  --on-primary: #F7F7F7;
  --primary: #9C74EA;
  --primary-strong: #6D46C8;
  --info: #53A5D5;
  --teal: #46B0A2;
  --success: #62C878;
  --purple: #B58CF0;
  --danger: #B33B37;
  --danger-hover: #C64843;
  --danger-text: #EE8A85;
  --warning: #DFA851;
  --bg-rgb: 30,30,30;
  --surface-rgb: 38,38,38;
  --border-rgb: 54,54,54;
  --text-rgb: 220,221,222;
  --primary-rgb: 156,116,234;
  --primary-strong-rgb: 109,70,200;
  --success-rgb: 98,200,120;
  --danger-rgb: 238,138,133;
  --warning-rgb: 223,168,81;
  --scrim-rgb: 0,0,0;
}
/* Dracula — dark (deep violet-gray surfaces, purple accent) */
[data-theme="dracula"] {
  --bg: #282A36;
  --surface: #343746;
  --hover: #404258;
  --border: #4E5064;
  --muted: #9BA2C4;
  --text: #F8F8F2;
  --text-2: #FDFDFF;
  --text-bright: #FFFFFF;
  --on-primary: #F8F8F2;
  --primary: #BD93F9;
  --primary-strong: #6E4BC8;
  --info: #8BE9FD;
  --teal: #63E2CE;
  --success: #50FA7C;
  --purple: #FF79C6;
  --danger: #C23339;
  --danger-hover: #D8474E;
  --danger-text: #FF8B8B;
  --warning: #F1FA8C;
  --bg-rgb: 40,42,54;
  --surface-rgb: 52,55,70;
  --border-rgb: 78,80,100;
  --text-rgb: 248,248,242;
  --primary-rgb: 189,147,249;
  --primary-strong-rgb: 110,75,200;
  --success-rgb: 80,250,124;
  --danger-rgb: 255,139,139;
  --warning-rgb: 241,250,140;
  --scrim-rgb: 0,0,0;
}

/* Gruvbox — dark (warm retro surfaces, blue-green accent) */
[data-theme="gruvbox"] {
  --bg: #282828;
  --surface: #3C3836;
  --hover: #45403D;
  --border: #504945;
  --muted: #BDAE93;
  --text: #EBDBB2;
  --text-2: #F2E7C6;
  --text-bright: #FBF1C7;
  --on-primary: #FBF1C7;
  --primary: #83A598;
  --primary-strong: #3F6C8C;
  --info: #8EC07C;
  --teal: #83BA76;
  --success: #B8BB26;
  --purple: #E4A6BB;
  --danger: #B84A3F;
  --danger-hover: #C95A50;
  --danger-text: #F58A7D;
  --warning: #E3B341;
  --bg-rgb: 40,40,40;
  --surface-rgb: 60,56,54;
  --border-rgb: 80,73,69;
  --text-rgb: 235,219,178;
  --primary-rgb: 131,165,152;
  --primary-strong-rgb: 63,108,140;
  --success-rgb: 184,187,38;
  --danger-rgb: 245,138,125;
  --warning-rgb: 227,179,65;
  --scrim-rgb: 0,0,0;
}

/* Catppuccin Latte — light (soft pastel surfaces, blue accent) */
[data-theme="catppuccin-latte"] {
  --bg: #EFF1F5;
  --surface: #E6E9EF;
  --hover: #DCE0E8;
  --border: #CCD0DA;
  --muted: #6C6F85;
  --text: #5C5F77;
  --text-2: #4C4F69;
  --text-bright: #292C3C;
  --on-primary: #FFFFFF;
  --primary: #1655D8;
  --primary-strong: #1247BC;
  --info: #0F757C;
  --teal: #10877E;
  --success: #2E7D1F;
  --purple: #8839EF;
  --danger: #D20F39;
  --danger-hover: #B90D32;
  --danger-text: #A71032;
  --warning: #8A5E00;
  --bg-rgb: 239,241,245;
  --surface-rgb: 230,233,239;
  --border-rgb: 204,208,218;
  --text-rgb: 92,95,119;
  --primary-rgb: 22,85,216;
  --primary-strong-rgb: 18,71,188;
  --success-rgb: 46,125,31;
  --danger-rgb: 167,16,50;
  --warning-rgb: 138,94,0;
  --scrim-rgb: 0,0,0;
}

/* Solarized Light — light (cream canvas, blue accent; classic base3/base2) */
[data-theme="solarized-light"] {
  --bg: #FDF6E3;
  --surface: #EEE8D5;
  --hover: #E4DCC7;
  --border: #D6CDB9;
  --muted: #8FA3B0;
  --text: #54687A;
  --text-2: #526675;
  --text-bright: #073642;
  --on-primary: #FFFFFF;
  --primary: #1A6BA5;
  --primary-strong: #166099;
  --info: #16756B;
  --teal: #1D7D71;
  --success: #5F6D0B;
  --purple: #5B5FB8;
  --danger: #C13B38;
  --danger-hover: #A83330;
  --danger-text: #A52623;
  --warning: #8A5E00;
  --bg-rgb: 253,246,227;
  --surface-rgb: 238,232,213;
  --border-rgb: 214,205,185;
  --text-rgb: 92,113,129;
  --primary-rgb: 26,107,165;
  --primary-strong-rgb: 22,96,153;
  --success-rgb: 95,109,11;
  --danger-rgb: 165,38,35;
  --warning-rgb: 138,94,0;
  --scrim-rgb: 0,0,0;
}

/* Custom — tokens are written onto <html> as --c-* by src/theme.js
   (derived from the user's chosen color). Fallbacks = Nord values. */
[data-theme="custom"] {
  --bg: var(--c-bg, var(--bg));
  --surface: var(--c-surface, var(--surface));
  --hover: var(--c-hover, var(--hover));
  --border: var(--c-border, var(--border));
  --muted: var(--c-muted, #7A8AA5);
  --text: var(--c-text, var(--text));
  --text-2: var(--c-text-2, var(--text-2));
  --text-bright: var(--c-text-bright, var(--text-bright));
  --primary: var(--c-primary, var(--primary));
  --primary-strong: var(--c-primary-strong, var(--primary-strong));
  --info: var(--c-info, var(--info));
  --teal: var(--c-teal, var(--teal));
  --success: var(--c-success, var(--success));
  --purple: var(--c-purple, var(--purple));
  --danger: var(--c-danger, #A6453F);
  --danger-hover: var(--c-danger-hover, #B5514C);
  --danger-text: var(--c-danger-text, #E08581);
  --warning: var(--c-warning, #EBCB8B);
  --bg-rgb: var(--c-bg-rgb, 46,52,64);
  --surface-rgb: var(--c-surface-rgb, 59,66,82);
  --border-rgb: var(--c-border-rgb, 76,86,106);
  --text-rgb: var(--c-text-rgb, 216,222,233);
  --primary-rgb: var(--c-primary-rgb, 129,161,193);
  --primary-strong-rgb: var(--c-primary-strong-rgb, 94,129,172);
  --success-rgb: var(--c-success-rgb, 163,190,140);
  --danger-rgb: var(--c-danger-rgb, 224,133,129);
  --warning-rgb: var(--c-warning-rgb, 235,203,139);
  --scrim-rgb: 0,0,0;
}

/* Short color transition while a theme swap is in flight. */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color .25s ease, background .25s ease, border-color .25s ease,
    color .25s ease, outline-color .25s ease, fill .25s ease, box-shadow .25s ease !important;
}

/* ---------- Theme switcher (topbar swatches) ---------- */
.theme-switcher {
  display: flex; align-items: center; gap: .45rem; flex-shrink: 0;
}
.swatch {
  width: 1.35rem; height: 1.35rem; border-radius: 999px;
  border: 2px solid var(--border); padding: 0; cursor: pointer;
  background: var(--swatch-color); position: relative; flex-shrink: 0;
  transition: transform .12s ease;
}
.swatch:hover { transform: scale(1.1); }
.swatch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.swatch.active {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
  outline: none;
}
.swatch-input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%; border: none; padding: 0;
}
.theme-switcher-divider {
  width: 1px; height: 1.1rem; background: var(--border);
  flex-shrink: 0; margin: 0 .05rem;
}
@media (max-width: 640px) {
  .theme-switcher { gap: .3rem; }
  .swatch { width: 1.15rem; height: 1.15rem; }
  #topbar { padding-left: .6rem; padding-right: .6rem; }
}

/* ---------- Markdown images (E2EE blob URLs) ---------- */
.md-img {
  max-width: min(100%, 100%); display: block; margin: .35rem 0;
  border-radius: .35rem; background: rgba(var(--text-rgb), .03);
  height: auto;
}
.md-render .md-img, .md-preview .md-img { height: auto; object-fit: contain; }
.md-img-invalid {
  min-width: 6rem; min-height: 2.5rem;
  color: var(--text); font-size: .75rem; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
}
.md-img-invalid::before { content: "Image unavailable"; }
.md-img-loading {
  min-width: 8rem; min-height: 5rem;
  background:
    linear-gradient(90deg, transparent, rgba(var(--text-rgb), .06), transparent) 0 0 / 40% 100% no-repeat,
    rgba(var(--text-rgb), .03);
  background-color: rgba(var(--text-rgb), .03);
  animation: md-img-shimmer 1.1s linear infinite;
}
@keyframes md-img-shimmer { to { background-position: 120% 0; } }
.md-img-locked {
  min-width: 8rem; min-height: 5rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: .78rem;
}
.md-img-locked::before { content: "Encrypted image (locked)"; }
.md-img-error {
  min-width: 8rem; min-height: 2.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--info); font-size: .72rem;
}
.md-img-error::before { content: "Could not decrypt image"; }
/* ---------- Lucide icons (replace the former emoji glyphs) ----------
   Icons inherit `currentColor` and are sized `1em` by default, so they
   match the surrounding text; this nudge keeps them optically aligned. */
svg.lucide { vertical-align: -0.15em; flex-shrink: 0; }
.pane-tab-icon svg.lucide { display: block; }

* { scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Sidebar collapse transition ---------- */
.sidebar { transition: width .18s ease, opacity .18s ease; }
body.sidebar-collapsed #sidebar { width: 0; opacity: 0; overflow: hidden; border-right-width: 0; }
body.sidebar-collapsed #btn-expand-sidebar { display: inline-block; }

/* ---------- Panes ---------- */
.pane { position: relative; min-width: 0; min-height: 0; background: var(--bg); }
.pane-col > * + * { border-top: 1px solid var(--border); }
.pane-row > * + * { border-left: 1px solid var(--border); }

/* ---------- Resizable split dividers ---------- */
.divider { flex: 0 0 auto; position: relative; z-index: 10; transition: background .12s ease; }
.divider-row { width: 6px; margin-left: -3px; margin-right: -3px; cursor: col-resize; }
.divider-col { height: 6px; margin-top: -3px; margin-bottom: -3px; cursor: row-resize; }
.divider-row:hover, body.resizing-col .divider-row { background: rgba(var(--primary-strong-rgb), .55); }
.divider-col:hover, body.resizing-row .divider-col { background: rgba(var(--primary-strong-rgb), .55); }
body.resizing { user-select: none; }
body.resizing-col { cursor: col-resize; }
body.resizing-row { cursor: row-resize; }

/* ---------- Pane tab bar ---------- */
.pane-tabs {
  display: flex; align-items: flex-end; gap: 2px; overflow-x: auto;
  padding: 4px 6px 0; min-height: 30px; background: var(--surface);
}
.pane-tab {
  display: flex; align-items: center; gap: .35rem; max-width: 14rem; flex-shrink: 0;
  padding: .3rem .55rem; font-size: .78rem; color: var(--text); cursor: pointer; user-select: none;
  border: 1px solid transparent; border-bottom: none; border-radius: .375rem .375rem 0 0;
  white-space: nowrap;
}
.pane-tab:hover { background: var(--hover); color: var(--text-bright); }
.pane-tab.active { background: var(--bg); color: var(--text-bright); border-color: var(--muted); }
.pane-tab.dragging { opacity: .35; }
.pane-tab-title { overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
.pane-tab-close { visibility: hidden; border-radius: .25rem; padding: 0 .25rem; color: var(--text); font-size: .7rem; line-height: 1.2; }
.pane-tab:hover .pane-tab-close { visibility: visible; }
.pane-tab-close:hover { color: var(--danger-text); background: rgba(var(--danger-rgb), .15); }
/* `+` — opens a new tab immediately after the active one. */
.pane-tab-add {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; margin: 0 2px .2rem; padding: 0;
  border: none; border-radius: .3rem; background: transparent; cursor: pointer;
  color: var(--text); font-size: 1rem; line-height: 1; font-weight: 600;
}
.pane-tab-add:hover { background: var(--hover); color: var(--text-bright); }
.pane-tabs.drop-target { outline: 2px dashed var(--primary); outline-offset: -2px; }
.pane-scroll.drop-target { outline: 2px dashed var(--primary); outline-offset: -4px; }

/* Sidebar tree drag-and-drop (mirrors the pane-tab conventions above). */
.sidebar-tree-item.dragging { opacity: .35; }
.sidebar-tree-row.drop-before { box-shadow: inset 0 2px 0 0 var(--primary); }
.sidebar-tree-row.drop-after { box-shadow: inset 0 -2px 0 0 var(--primary); }
.sidebar-tree-row.drop-nest { outline: 2px dashed var(--primary); outline-offset: -2px; background: rgba(var(--primary-rgb), .15); }
.sidebar-workspace-group > div:first-child.drop-ws { outline: 2px dashed var(--primary); outline-offset: -2px; border-radius: .25rem; }
.pane-header { border-top: 0; }
.pane.active .pane-header { background: rgba(var(--primary-rgb), .25); }
.pane-header { transition: background .15s ease; }

/* Editable document-title field. This is both the tab label source and the
   on-disk "file name" — editing it renames the note everywhere (see
   Workspace.handleTitle → note:title-changed). It used to sit in the pane
   header; it now renders as the large display banner (.pane-title-banner) at
   the top of the editor body, outside the editable Markdown area. */
.pane-title {
  background: transparent; border: 1px solid transparent; border-radius: .375rem;
  font-weight: 600; color: var(--text-bright); padding: .25rem .5rem; min-width: 0;
}
.pane-title:focus { outline: none; border-color: var(--primary); background: var(--surface); }

/* ---------- Document title banner (top of each note editor) ---------- */
.pane-title-banner-wrap {
  position: sticky; top: 0; z-index: 5;
  /* Opaque so scrolled body content never bleeds through the pinned banner. */
  background: var(--bg);
  padding: 1.25rem 1.25rem .6rem;
  /* Clean visual separation from the editable Markdown below. */
  border-bottom: 1px solid var(--border);
}
.pane-title.pane-title-banner {
  display: block; width: 100%; flex: 0 0 auto;
  /* Deliberately larger than `.md-h1` (1.875rem) — a document-level display. */
  font-weight: 800; font-size: 2.5rem; line-height: 1.15; letter-spacing: -.01em;
  color: var(--text-bright); padding: 0; margin: 0; border: 1px solid transparent;
}
.pane-title-banner:hover { border-color: rgba(var(--primary-rgb), .35); }
.pane-title-banner:focus {
  outline: none; border-color: rgba(var(--primary-rgb), .6); background: transparent;
}
.pane-title-banner::placeholder { color: var(--muted); font-weight: 600; font-size: 1.5rem; }

/* ---------- Markdown editor ---------- */
.editor { width: 100%; padding: 1.5rem 1rem 8rem; }
.md-editor { display: flex; flex-direction: column; min-height: 100%; }
.md-toggle { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: .5rem; overflow: hidden; }
.md-toggle-btn {
  padding: .3rem .75rem; font-size: .8rem; color: var(--text); background: transparent; border: none;
  cursor: pointer;
}
.md-toggle-btn:hover { color: var(--text-bright); }
.md-toggle-btn.active { background: rgba(var(--primary-rgb), .25); color: var(--text-bright); font-weight: 600; }

.md-textarea {
  flex: 1; min-height: 60vh; resize: vertical; background: transparent; color: var(--text);
  border: none; border-radius: 0; padding: 1rem 0;
  /* Monospace is load-bearing for list alignment: the editor only inserts
     pure ASCII spaces (\u0020) and snaps every indent to the 2-column grid
     (2 per bullet level, 4 under `- [ ] ` tasks), so each space renders
     exactly as wide as `-`, `[` and `]`. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92rem; line-height: 1.65; outline: none; box-shadow: none; -webkit-box-shadow: none; tab-size: 2;
}
.md-textarea:focus { outline: none; border: none; box-shadow: none; -webkit-box-shadow: none; }
.md-textarea::placeholder { color: var(--muted); }

/* ---------- Markdown preview ---------- */
.md-preview { color: var(--text); font-size: .95rem; line-height: 1.65; word-wrap: break-word; }
.md-preview > :first-child { margin-top: 0; }
.md-render > :first-child { margin-top: 0; }
.md-h { font-weight: 700; color: var(--text-bright); line-height: 1.25; margin: 1.5em 0 .5em; }
.md-h1 { font-size: 1.875rem; color: var(--info); } /* Nord 8 — Bright Ice Blue */
.md-h2 { font-size: 1.5rem; color: var(--purple); } /* Nord 15 — Purple */
.md-h3 { font-size: 1.25rem; color: var(--success); } /* Nord 14 — Green */
.md-h4 { font-size: 1.1rem; color: var(--warning); } /* Nord 13 — Yellow */
.md-h5 { font-size: 1rem; color: var(--danger-text); } /* danger accent (AA-checked) */
.md-h6 { font-size: 1rem; color: var(--teal); } /* Nord 7 — Frost Teal */
.md-p { margin: .6em 0; }
.md-list { margin: .6em 0; padding-left: 2ch; list-style: disc; line-height: 1.65; }
ol.md-list { list-style: decimal; }
/* Solid circular bullet (•) at every nesting level — nested lists must not
   fall back to the browser's hollow circle/square markers. Both Read and Live
   list padding share the editor's `ch` grid so nested lines indent identically
   (2ch per level), and line-height is pinned to the shared 1.65 rhythm. */
.md-list .md-list { margin: .15em 0; padding-left: 2ch; list-style: disc; line-height: 1.65; }
ol.md-list ol.md-list { list-style: decimal; }
.md-li { display: list-item; margin: .2em 0; }
.md-li-task { list-style: none; }
.md-check { accent-color: var(--primary); margin-right: .4rem; cursor: pointer; }
.md-task-done { text-decoration: line-through; color: var(--text); }
.md-quote { border-left: 3px solid var(--border); background: var(--surface); padding: .15rem 0 .15rem .9rem; margin: .8em 0; color: var(--text); }
.md-pre {
  background: var(--surface); border: 1px solid var(--border); border-radius: .5rem;
  padding: .9rem 1.1rem; margin: .8em 0; overflow-x: auto;
}
.md-pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; }
.md-hr { border: 0; border-top: 1px solid var(--border); margin: 1.4em 0; }
.md-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em;
  background: var(--surface); border-radius: .3rem; padding: .1em .35em; color: var(--text); }
.md-bold { font-weight: 700; color: var(--text-bright); }
.md-italic { font-style: italic; }
.md-strike { text-decoration: line-through; color: var(--text); }
.md-link { color: var(--info); text-decoration: underline; cursor: pointer; }
.md-link:hover { color: var(--primary); }
.md-wikilink { color: var(--purple); cursor: pointer; }
.md-wikilink:hover { color: var(--teal); text-decoration: underline; }
/* Wikilink whose target file (note/image) does not exist — broken reference. */
.md-wikilink-missing, .md-wikilink-missing:hover { color: var(--danger-text); }
.md-wikilink-missing:hover { text-decoration: underline; }

/* ---------- Collapsible sections & folded lists (Read mode) ----------
   markdown-collapse.js wraps heading sections in <details class="md-section">
   and parent list items in <details class="md-li-fold">. The real h1–h6 and
   the nested lists are moved — never re-created — so outline semantics, .md-h
   typography and task-checkbox wiring are untouched. The vertical rhythm the
   heading's own margins used to provide moves to the wrapper below. */

.md-section { margin: 1.5em 0 .5em; }
/* Mirror the un-collapsed lead-in resets: a document that opens with a
   heading must not gain an extra 1.5em gap above its section. */
.md-render > .md-section:first-child,
.md-preview > .md-section:first-child { margin-top: 0; }

.md-section-summary,
.md-li-summary {
  /* Kill the native disclosure triangle (display:flex drops the ::marker in
     Firefox; the WebKit pseudo-element needs the explicit rule below). */
  list-style: none;
  display: flex; align-items: baseline; gap: .45ch;
  cursor: pointer;
  border-radius: .35rem;
  padding: 0 .25rem; margin: 0 -.25rem; /* hover hit-area slightly wider */
}
.md-section-summary::-webkit-details-marker,
.md-li-summary::-webkit-details-marker { display: none; }
.md-section-summary:hover,
.md-li-summary:hover { background: rgba(var(--text-rgb), .06); }
.md-section-summary:focus-visible,
.md-li-summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* The heading keeps its .md-h typography; only its margins move to the
   wrapper so spacing survives the details/summary re-parenting. */
.md-section-summary .md-h { flex: 1; margin: 0; }

/* Custom chevron — a border-drawn arrow that rotates when the section opens.
   aria-hidden in the DOM: purely decorative, state is conveyed by <details>. */
.md-section-chevron {
  flex: none; align-self: center;
  width: .45em; height: .45em;
  border-right: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
  transform: rotate(-45deg); /* closed → pointing right */
  transition: transform .15s ease;
}
.md-section[open] > .md-section-summary > .md-section-chevron,
.md-li-fold[open] > .md-li-summary > .md-section-chevron { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .md-section-chevron { transition: none; }
}

/* Folded list drawers: nested lists keep their own .md-list indentation and
   marker styles (`.md-list .md-list` rules still match through the wrapper). */
.md-li-children { margin: .15em 0 0; }

/* Sidebar tree: leaf wikilink entries with no matching file render red
   (!important beats Tailwind utility classes injected at runtime). */
.sidebar-tree-title-missing,
.sidebar-tree-row:hover .sidebar-tree-title-missing,
.sidebar-tree-row.group:hover .sidebar-tree-title-missing { color: var(--danger) !important; }

/* ---------- Live Edit (WYSIWYG-ish per-line editing) ---------- */
.md-live {
  flex: 1; min-height: 60vh; border: none; border-radius: 0;
  padding: 0 0 2.5rem; overflow-y: auto;
  color: var(--text); font-size: .95rem; line-height: 1.65; word-wrap: break-word;
}
.md-live-row { padding: 0; border-radius: 0; line-height: 1.65; }
.md-live-content { min-height: 1.65em; line-height: 1.65; }
.md-live-line { margin: 0; line-height: 1.65; }
.md-live-blank { min-height: 1.65em; }
.md-live-code { display: inline; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); }
/* Bullet / order marker, matched to Read mode's `<li>` markers:
   - the box is exactly `2ch`, so the item text lands on `.md-list`'s
     `padding-left: 2ch` column and every nesting level stays on the shared
     2ch grid (the same columns Read mode indents to);
   - the glyph is right-aligned inside that box with a half-column trailing
     gap, reproducing the hanging marker shape (marker ink just left of the
     text column, ~0.5ch away) an outside `list-style-position` renders;
   - colour and weight are pinned to `.md-preview`'s list text (`.md-li`
     overrides neither) so bullets read as document text, not editor chrome.
   `box-sizing` is set explicitly so the geometry holds regardless of the
   global border-box preflight. */
.md-live-marker {
  display: inline-block; box-sizing: border-box; width: 2ch; padding-right: .5ch;
  color: var(--text); font-weight: 400; text-align: right; user-select: none;
}
/* Read mode's `disc` marker paints a dot ~45% wider than an inline `•` at the
   same font-size (measured ink: 0.362em vs 0.25em), so the bullet dot is
   scaled up to match. The scale is painted, never laid out — `transform`
   cannot change the text column or the row height, which is why the marker's
   font-size stays put. The origin is the dot's own measured centre, so the
   bigger dot grows in place around the small one instead of drifting.
   Ordered markers are left alone: Read mode does not enlarge their digits.
   Tune the factor (and nothing else) here. */
.md-live-bullet { transform: scale(1.45); transform-origin: 55.8% 55%; }
/* List/task rows carry `.md-li`'s intrinsic vertical rhythm (`.2em 0`) so
   bullet items breathe exactly like the rendered list. The class sits on the
   row *wrapper*, not the content box, so the focused (textarea) and
   unfocused states stay pixel-identical. Block-level `.6em` list margins are
   supplied by blank source lines in Live Edit (see `.md-live-blank`). */
.md-live .md-live-row.md-live-item { margin: .2em 0; }
/* Mirror of the `.md-live-row:first-child .md-h` lead-in reset below: a
   document that opens with a list must not gain an extra `.2em` above its
   first row either. */
.md-live .md-live-row:first-child.md-live-item { margin-top: 0; }
/* Headings use Read mode's vertical rhythm + typography (margin 1.5em/.5em,
   weight 700, line-height 1.25) so Live Edit flows identically to Read. */
.md-live .md-h { margin: 1.5em 0 .5em; font-weight: 700; line-height: 1.25; }
/* The very first row must not create an extra 1.5em lead-in gap, mirroring
   the Read-mode reset `.md-render > :first-child { margin-top: 0 }`. */
.md-live .md-live-row:first-child .md-h { margin-top: 0; }
.md-live .md-quote { margin: 0; border-left: 3px solid var(--border); background: var(--surface); padding-left: .6rem; color: var(--text); }
.md-live .md-hr { margin: .3rem 0; }
.md-live .md-task-done { text-decoration: line-through; color: var(--text); }

.md-live-input {
  width: 100%; min-height: 1.65em; resize: none; overflow: hidden; background: transparent;
  color: var(--text); border: none; outline: none; box-shadow: none; -webkit-box-shadow: none;
  padding: 0; margin: 0; appearance: none;
  /* Same monospace guarantee as .md-textarea: ASCII spaces are exactly as
     wide as `-`/`[`/`]`, keeping task/bullet indent columns aligned. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92rem; line-height: 1.65; tab-size: 2;
}
.md-live-input:focus { outline: none; border: none; box-shadow: none; -webkit-box-shadow: none; }
.md-live-input::placeholder { color: var(--muted); }
/* decoded images shown beneath the line being edited (live edit mode) */
.md-live-img-preview { margin: .3rem 0 .15rem; }
.md-live-img-preview .md-img { margin: 0; }

/* ---------- Image resize overlay (editor surfaces) ---------- */
/* Rendered images get a hover-revealed "Resize" button in their bottom-left
   corner. The wrapper keeps the img's own sizing (width px / height auto)
   untouched — the button is purely an overlay, never a layout participant. */
.md-img-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0; /* no stray gap under the wrapped image */
}
.md-img-resize {
  position: absolute; left: .375rem; bottom: .375rem; z-index: 2;
  padding: .1rem .5rem; border-radius: .35rem;
  font-size: .68rem; font-weight: 600; line-height: 1.4;
  color: var(--text-bright); background: rgba(var(--bg-rgb), .85); border: 1px solid var(--border);
  cursor: pointer; opacity: 0; transition: opacity .12s ease;
}
.md-img-wrap:hover .md-img-resize,
.md-img-wrap:focus-within .md-img-resize,
.md-img-resize:focus-visible { opacity: 1; }
.md-img-resize:hover { background: var(--primary-strong); border-color: var(--primary); }

/* Resize modal's width slider (accent-colored track/thumb) */
.modal-range { accent-color: var(--primary); cursor: pointer; }


/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--bg-rgb), .75); backdrop-filter: blur(4px); padding: 1rem;
}
.modal-card {
  width: 100%; max-width: 26rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: .75rem; padding: 1.5rem; box-shadow: 0 24px 64px rgba(var(--scrim-rgb), .6);
  animation: modal-in .14s ease-out;
}
@keyframes modal-in { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-input {
  width: 100%; border-radius: .5rem; border: 1px solid var(--border); background: var(--bg);
  padding: .55rem .75rem; font-size: .9rem; color: var(--text-bright); outline: none;
}
.modal-input:focus { border-color: var(--primary); }

/* Credentials modal: stacked secret fields (account password above the
   encryption key) with a reveal (eye) toggle inside each field. */
.modal-field { position: relative; }
.modal-field + .modal-field { margin-top: .5rem; }
.modal-input.has-toggle { padding-right: 2.25rem; }
.modal-input-toggle {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  padding: .2rem; border-radius: .35rem; color: var(--text); cursor: pointer;
}
.modal-input-toggle:hover { color: var(--text-bright); background: var(--hover); }

/* Off-screen mirror of the credential's "username" half. Kept in the DOM (a
   few managers skip display:none fields) but invisible and non-interactive. */
.modal-credential-mirror {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; opacity: 0; pointer-events: none;
}

/* ---------- Toasts ---------- */
.toast {
  pointer-events: auto; border-radius: .5rem; padding: .6rem 1rem; font-size: .85rem;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-bright);
  box-shadow: 0 8px 24px rgba(var(--scrim-rgb), .4); animation: modal-in .15s ease-out;
}
.toast.error { border-color: var(--danger-text); background: rgba(var(--danger-rgb), .12); color: var(--danger-text); }
.toast.success { border-color: var(--success); background: rgba(var(--success-rgb), .12); color: var(--success); }

/* ---------- Collapsible Sidebar Tree ---------- */
.sidebar-tree-container {
  user-select: none;
}
.sidebar-tree-row {
  display: flex;
  align-items: flex-start;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidebar-tree-chevron {
  transition: transform 0.12s ease, color 0.12s ease;
  line-height: 1;
}
.sidebar-tree-chevron:hover {
  color: var(--text-bright);
}
/* Active file in the file browser: distinct bg + accent left border + bold
   title. !important beats the row's Tailwind hover:bg utility at runtime. */
.sidebar-tree-active {
  background: rgba(var(--primary-strong-rgb), .20);
  box-shadow: inset 3px 0 0 var(--primary);
}
.sidebar-tree-active .sidebar-tree-title { font-weight: 700; }
.sidebar-tree-inlinenote {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--text);
}

/* ---------- Workspace dropdown (sidebar header) ---------- */
#workspace-select {
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}
#workspace-select option { background: var(--surface); color: var(--text-bright); }
#workspace-select:disabled { opacity: .55; cursor: default; }

/* ---------- File-organization tree section ---------- */
#sidebar-tree-section { background: rgba(var(--text-rgb), .02); }
#sidebar-tree .sidebar-tree-item + .sidebar-tree-item { margin-top: .125rem; }


/* ---------- Static (read-only) pane title for image tabs ---------- */
.pane-title-static { font-weight: 600; font-size: .95rem; color: var(--text-bright);
  padding: .25rem .5rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pane-tab-icon { font-size: .75rem; line-height: 1; }
/* ---------- Wikilink autocomplete popover (`[[` notes / `![[` images) ---------- */
.md-suggest {
  position: fixed; z-index: 30; min-width: 240px; max-width: 380px;
  max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(var(--scrim-rgb), .4); padding: .25rem; font-size: .85rem;
  animation: modal-in .12s ease-out;
}
.md-suggest-list { display: flex; flex-direction: column; }
.md-suggest-item {
  display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem;
  border-radius: .35rem; cursor: pointer; color: var(--text); user-select: none;
}
.md-suggest-item:hover { background: var(--hover); }
.md-suggest-item.active { background: rgba(var(--primary-rgb), .25); color: var(--text-bright); }
.md-suggest-glyph { flex-shrink: 0; font-size: .8rem; }
.md-suggest-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-suggest-thumb {
  display: inline-flex; width: 1.6rem; height: 1.6rem; flex-shrink: 0;
  align-items: center; justify-content: center; font-size: .8rem;
  border-radius: .25rem; background: var(--hover); overflow: hidden;
}
.md-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-suggest-hint {
  margin-top: .25rem; padding: .3rem .5rem 0; border-top: 1px solid var(--border);
  font-size: .68rem; color: var(--muted); white-space: nowrap;
}

/* ---------- Full image viewer (image tab) ---------- */
.image-view { min-height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .75rem; padding: 2.5rem 1.5rem; }
.image-view-name { max-width: 100%; font-size: .95rem; font-weight: 600; color: var(--text-bright);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-view-stage { max-width: 100%; flex: 1 0 auto; display: flex; align-items: center; justify-content: center; }
.image-view-img { max-width: 100%; max-height: calc(100vh - 14rem); width: auto; height: auto;
  object-fit: contain; border-radius: .5rem; background: var(--bg);
  box-shadow: 0 12px 40px rgba(var(--scrim-rgb), .55); }
.image-view-status { display: flex; align-items: center; gap: .6rem; min-height: 1.5rem; }
.image-view-badge { font-size: .8rem; color: var(--text); }
.image-view-locked { color: var(--text); }
.image-view-error { color: var(--info); }
.image-view-retry { border: 1px solid var(--border); border-radius: .375rem; padding: .15rem .6rem;
  font-size: .78rem; color: var(--text); background: var(--surface); cursor: pointer; }
.image-view-retry:hover { border-color: var(--primary); color: var(--text-bright); }
.image-view-meta { font-size: .72rem; color: var(--muted); }

/* ---------- Properties (YAML frontmatter) ----------
   Obsidian-style stylized view of the `---` block, rendered by
   components/properties-panel.js in Read + Live Edit (Source View keeps the raw
   text). Keys are muted and right-aligned-ish, values are pills (lists) or
   plain inputs (scalars/dates). The whole block is a native <details>
   accordion, and collapsing never touches the Markdown. */

.fm-host {
  flex: none;
  width: calc(100% + 2rem);
  margin-left: -1rem;
  margin-right: -1rem;
}
.fm-panel {
  border: none;
  border-radius: 0;
  background: var(--bg);
  margin: 0 0 1.1rem;
  width: 100%;
  overflow: hidden;
}
.fm-summary {
  list-style: none;
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem 1rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--primary);
  cursor: pointer; user-select: none;
}
.fm-summary::-webkit-details-marker { display: none; }
.fm-summary:hover { background: rgba(var(--text-rgb), .06); }
.fm-summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Same border-drawn chevron idiom as .md-section-chevron (decorative). */
.fm-chevron {
  flex: none;
  width: .45em; height: .45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); /* closed → pointing right */
  transition: transform .15s ease;
}
.fm-panel[open] > .fm-summary > .fm-chevron { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .fm-chevron { transition: none; }
}

.fm-count { flex: 1; color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.fm-raw-toggle {
  flex: none;
  border: 1px solid rgba(var(--border-rgb), .7);
  border-radius: .375rem;
  padding: 0 .4rem;
  font-size: .68rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--text); background: transparent; cursor: pointer;
  line-height: 1.5;
}
.fm-raw-toggle:hover { border-color: var(--primary); color: var(--text-bright); }
.fm-raw-toggle.active { background: rgba(var(--primary-rgb), .25); border-color: var(--primary); color: var(--text-bright); }

.fm-body { padding: .15rem 0 .3rem; }
.fm-row {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) 1fr;
  gap: .5rem;
  align-items: start;
  padding: .28rem 1rem;
  border-top: 1px solid rgba(var(--border-rgb), .35);
}
.fm-row:first-child { border-top: none; }
.fm-key {
  font-size: .78rem; color: var(--text); opacity: .75;
  padding-top: .12rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fm-value { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; min-height: 1.6rem; }
.fm-empty { padding: .3rem 1rem; font-size: .78rem; font-style: italic; color: var(--muted); }


/* Pill-styled list values (tags, aliases, block sequences). */
.fm-pill {
  display: inline-flex; align-items: center; gap: .2rem;
  max-width: 100%;
  border: 1px solid rgba(var(--primary-rgb), .35);
  border-radius: 999px;
  background: rgba(var(--primary-rgb), .18);
  padding: .02rem .15rem .02rem .5rem;
  font-size: .78rem; color: var(--text-bright);
}
.fm-pill-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.fm-pill-x {
  border: none; background: transparent; cursor: pointer;
  color: var(--text); font-size: .85rem; line-height: 1;
  padding: 0 .25rem; border-radius: 999px;
}
.fm-pill-x:hover { color: var(--danger-text); background: rgba(var(--danger-rgb), .15); }
.fm-pill-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Value editors: borderless until focused (Obsidian-style inline fields). */
.fm-input {
  flex: 1 1 8rem; min-width: 5rem;
  border: 1px solid transparent; border-radius: .3rem;
  background: transparent;
  padding: .1rem .3rem;
  font-size: .82rem; color: var(--text-bright);
}
.fm-input:hover { border-color: rgba(var(--primary-rgb), .3); }
.fm-input:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.fm-input::placeholder { color: var(--muted); }
.fm-input[type="date"] { flex: 0 1 auto; }
.fm-input-add {
  flex: 0 1 7rem;
  border-style: dashed; border-color: rgba(var(--border-rgb), .6);
}

/* In-block lines the parser could not read: kept in the Markdown, listed here. */
.fm-malformed {
  margin: .3rem 1rem .1rem;
  border-left: 3px solid var(--warning);
  border-radius: .2rem;
  background: rgba(var(--warning-rgb), .07);
  padding: .3rem .5rem;
}
.fm-malformed-head { font-size: .74rem; color: var(--warning); }
.fm-malformed-line {
  display: block;
  margin-top: .15rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem; color: var(--text); opacity: .8;
  white-space: pre-wrap; word-break: break-word;
}

/* Per-row validation (duplicate keys) and the unclosed-fence banner. */
.fm-row-invalid .fm-key { color: var(--warning); }
.fm-row-error { flex-basis: 100%; font-size: .72rem; color: var(--danger-text); }
.fm-warning {
  margin: .35rem 1rem .6rem;
  border-left: 3px solid var(--warning);
  border-radius: .2rem;
  background: rgba(var(--warning-rgb), .07);
  padding: .35rem .55rem;
  font-size: .78rem; color: var(--warning);
}

/* Live Edit with the panel's "Raw" toggle on: the revealed frontmatter lines
   sit directly under the panel and stay visually part of the block. */
.md-live .md-live-row.md-live-fm { color: var(--text); opacity: .9; }
.md-live .md-live-row.md-live-fm .md-live-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem;
  color: var(--text);
}

/* ---------- Attach-image picker modal (grid + search) ---------- */
.modal-card-wide { max-width: 40rem; }
.image-picker-scroll {
  max-height: 50vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: .5rem; padding: .5rem;
  background: var(--bg);
}
.image-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .6rem;
}
.image-picker-tile {
  display: flex; flex-direction: column; align-items: stretch; gap: .3rem;
  padding: .35rem; border: 1px solid var(--border); border-radius: .5rem;
  background: var(--surface); cursor: pointer; text-align: left;
}
.image-picker-tile:hover { border-color: var(--primary); background: var(--hover); }
.image-picker-thumb {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border-radius: .35rem; background: rgba(var(--text-rgb), .04); overflow: hidden;
}
.image-picker-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.image-picker-thumb-loading,
.image-picker-thumb-error { color: var(--muted); font-size: .78rem; }
.image-picker-thumb-error { color: var(--danger-text); }
.image-picker-name {
  font-size: .78rem; color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.image-picker-empty { color: var(--text); font-size: .875rem; margin-bottom: 1rem; }

/* ---------- Empty state ("New tab" pseudo-tab / empty workspace) ---------- */
.empty-state {
  min-height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .75rem;
  padding: 2rem; text-align: center; color: var(--text);
}
.empty-state-actions {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  margin: .5rem 0 0;
}
.empty-state-btn {
  min-width: 10rem; padding: .5rem 1rem; border-radius: .5rem;
  border: 1px solid var(--muted); background: var(--surface);
  color: var(--text); font-size: .875rem; font-weight: 500; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.empty-state-btn:hover { background: var(--hover); color: var(--text-bright); }
.empty-state-primary {
  background: var(--primary-strong); border-color: transparent;
  color: var(--on-primary);
}
.empty-state-primary:hover { background: var(--primary); color: var(--on-primary); }

/* ============================================================
   Collaboration space (sidebar section + status pulse)
   ============================================================ */
.collab-pulse {
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(var(--surface-rgb), 0);
  animation: collab-pulse 2.2s ease-in-out infinite;
}
@keyframes collab-pulse {
  0%, 100% { opacity: .45; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .collab-pulse { animation: none; opacity: .8; }
}
.collab-pulse.offline { background: var(--danger); animation: none; }

.collab-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: 100%;
  padding: .22rem .5rem;
  border-radius: .375rem;
  font-size: .82rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}
.collab-row:hover { background: var(--hover); color: var(--text-bright); }
.collab-row.active { background: rgba(var(--primary-rgb), .18); color: var(--text-bright); }
.collab-row-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collab-row-del {
  flex: none;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  border-radius: .25rem;
  padding: .05rem .2rem;
  visibility: hidden;
}
.collab-row:hover .collab-row-del { visibility: visible; }
.collab-row-del:hover { color: var(--danger-text); background: rgba(var(--danger-rgb), .12); }
.collab-empty {
  padding: .2rem .5rem;
  font-size: .78rem;
  font-style: italic;
  color: var(--muted);
}

/* ------------------------------------------------------------
   Collab mode (a collaborative space is mounted)
   The page belongs to the shared space: the personal-vault
   browser (workspace dropdown, search, tree) and vault-only
   topbar actions (file-organization, settings) are hidden; the
   Collaboration section becomes the sidebar's main body.
   Toggled via `body.collab-mode` (main.js updateStatus).
   ------------------------------------------------------------ */
body.collab-mode #workspace-select,
body.collab-mode #sidebar-search-wrap,
body.collab-mode #btn-new-note,
body.collab-mode #sidebar-tree-section,
body.collab-mode #btn-file-organization,
body.collab-mode #btn-settings {
  display: none;
}
/* The collaboration section fills the sidebar and its note list is unclamped
   while the space is mounted (not when merely active-but-hidden). */
body.collab-mode #collab-section:not(.hidden) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.collab-mode #collab-section:not(.hidden) #collab-list {
  flex: 1 1 auto;
  max-height: none;
}

/* ------------------------------------------------------------
   Collab mode (a collaborative space is mounted)
   The page belongs to the shared space: the personal-vault
   browser (workspace dropdown, search, tree) and vault-only
   topbar actions (file-organization, settings) are hidden; the
   Collaboration section becomes the sidebar's main body.
   Toggled via body.collab-mode (main.js updateStatus).
   ------------------------------------------------------------ */
body.collab-mode #workspace-select,
body.collab-mode #sidebar-search-wrap,
body.collab-mode #btn-new-note,
body.collab-mode #sidebar-tree-section,
body.collab-mode #btn-file-organization,
body.collab-mode #btn-settings {
  display: none;
}
/* The collaboration section fills the sidebar and its note list is unclamped
   while the space is mounted (not when merely active-but-hidden). */
body.collab-mode #collab-section:not(.hidden) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.collab-mode #collab-section:not(.hidden) #collab-list {
  flex: 1 1 auto;
  max-height: none;
}