/* Notes System Styles */
/* Uses existing theme variables from styles.css */

/* ===== TOP BAR (Tab Strip + Account) ===== */
.app-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  background: var(--bg);
  border-bottom: 1px solid var(--ui-chrome);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  z-index: 1000;
  font-family: var(--font-family-sans);
}

.app-tabs {
  display: flex;
  gap: 2px;
}

.app-tab {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-secondary);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

@media (min-width: 500px) {
  .app-tab {
    padding: 6px 14px;
    font-size: 13px;
  }
}

.app-tab:hover {
  background: var(--highlight);
  color: var(--fg);
}

.app-tab.active {
  color: var(--fg);
  background: var(--ui-chrome);
}

.app-topbar-icons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.app-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.app-icon-btn:hover {
  background: var(--highlight);
  color: var(--fg);
}

.app-icon-btn.active {
  color: var(--fg);
  background: var(--ui-chrome);
}

.app-icon-btn svg {
  width: 16px;
  height: 16px;
}

.app-icon-btn.logged-in {
  background: var(--button-primary);
  color: var(--button-primary-fg);
}

/* Account dropdown menu */
.account-dropdown {
  position: absolute;
  top: 40px;
  right: 8px;
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 180px;
  z-index: 1001;
  display: none;
}

.account-dropdown.show {
  display: block;
}

.account-dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--fg);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.account-dropdown-item:hover {
  background: var(--highlight);
}

.account-dropdown-item:first-child {
  border-radius: 7px 7px 0 0;
}

.account-dropdown-item:last-child {
  border-radius: 0 0 7px 7px;
}

.account-dropdown-divider {
  height: 1px;
  background: var(--ui-chrome);
  margin: 4px 0;
}

/* ===== MAIN CONTENT AREAS ===== */
.app-content {
  margin-top: var(--topbar-height);
  min-height: calc(100vh - var(--topbar-height));
  min-height: calc(100dvh - var(--topbar-height));
}

/* Reader tab content - just a wrapper, reader styles unchanged */
.reader-wrapper {
  display: block;
}

.reader-wrapper.hidden {
  display: none;
}

/* Notes tab content */
/* ===== NOTES TAB ===== */
.notes-wrapper {
  display: none;
  height: calc(100vh - var(--topbar-height));
  height: calc(100dvh - var(--topbar-height));
}

.notes-wrapper.active {
  display: flex;
}

/* ===== NOTES LAYOUT ===== */
.notes-layout {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Left sidebar (File Explorer) */
.notes-sidebar-left {
  width: 260px;
  min-width: 200px;
  max-width: 400px;
  background: var(--bg);
  border-right: 1px solid var(--ui-chrome);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notes-sidebar-left.collapsed {
  width: 0;
  min-width: 0;
  border-right: none;
}

/* Main editor area */
.notes-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}

/* ===== SPLIT VIEW (Dual-Pane Notes) ===== */
.split-view-container {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  overflow: hidden;
}

/* Primary pane takes full width when alone */
.split-view-container .editor-pane-primary {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Secondary pane - hidden by default */
.split-view-container .editor-pane-secondary {
  position: relative;
  display: none;
  flex-direction: column;
}

/* When split view is active, both panes share space equally */
.split-view-container.split-active {
  gap: 0;
}

.split-view-container.split-active .editor-pane-primary {
  flex: 1;
  max-width: 50%;
  border-right: 1px solid var(--ui-chrome);
}

.split-view-container.split-active .editor-pane-secondary {
  flex: 1;
  max-width: 50%;
  display: flex;
}

/* Empty state for secondary pane */
.split-pane-empty {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--fg-secondary);
  background: var(--bg);
  z-index: 1;
}

.split-pane-empty svg {
  opacity: 0.5;
}

.split-pane-empty p {
  font-size: 13px;
  margin: 0;
}

.split-pane-empty.hidden {
  display: none;
}

/* Active pane highlight */
.editor-pane-primary.active-pane .editor-toolbar,
.editor-pane-secondary.active-pane .editor-toolbar {
  background: var(--highlight);
}

/* Pane close button (X) - always on far right */
.pane-close-btn {
  margin-left: auto;
  padding: 4px 6px;
}

.pane-close-btn.hidden {
  display: none;
}

/* Show close button on primary pane only in split mode */
.split-view-container.split-active .pane-close-btn {
  display: inline-flex;
}

/* Consistent toolbar sizing for both panes */
.editor-pane-primary .editor-toolbar,
.editor-pane-secondary .editor-toolbar {
  min-height: 40px;
  gap: 4px;
}

/* Mobile: keep side-by-side, each pane scrolls independently */
@media (max-width: 768px) {
  .split-view-container.split-active .editor-pane-primary,
  .split-view-container.split-active .editor-pane-secondary {
    min-width: 0;
  }
  
  /* Compact toolbar for mobile split view */
  .split-view-container.split-active .editor-toolbar {
    flex-wrap: wrap;
    padding: 4px 6px;
    gap: 2px;
  }
  
  /* Title on its own row in mobile split */
  .split-view-container.split-active .editor-title-input {
    width: 100%;
    flex: 1 0 100%;
    order: -1;
    font-size: 13px;
    padding: 4px 6px;
  }
  
  /* Compact toolbar buttons */
  .split-view-container.split-active .editor-toolbar-btn {
    padding: 4px 6px;
    font-size: 11px;
  }
  
  /* Show X button prominently */
  .split-view-container.split-active .pane-close-btn {
    display: inline-flex;
    padding: 4px;
    margin-left: auto;
  }
  
  /* Hide split button text on mobile split (already in split mode) */
  .split-view-container.split-active #btn-toggle-split,
  .split-view-container.split-active #btn-toggle-split-2 {
    display: none;
  }
}

/* Right sidebar (Backlinks, Sources) */
.notes-sidebar-right {
  width: 280px;
  min-width: 200px;
  max-width: 400px;
  background: var(--bg);
  border-left: 1px solid var(--ui-chrome);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notes-sidebar-right.collapsed {
  width: 0;
  min-width: 0;
  border-left: none;
}

/* ===== SIDEBAR PANELS ===== */
.sidebar-header {
  padding: 12px;
  border-bottom: 1px solid var(--ui-chrome);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-secondary);
}

.sidebar-actions {
  display: flex;
  gap: 4px;
}

.sidebar-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-secondary);
}

.sidebar-btn:hover {
  background: var(--highlight);
  color: var(--fg);
}

/* Search box under the sidebar header (notes Deploy B, B-3) */
.sidebar-search {
  padding: 6px 8px;
  border-bottom: 1px solid var(--ui-chrome);
}

.notes-search-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 16px; /* 16px: smaller values make iOS Safari zoom the page */
  font-family: inherit;
  color: var(--fg);
  background: var(--bg-surface, var(--bg));
  border: 1px solid var(--ui-chrome);
  border-radius: 6px;
}

.notes-search-input:focus {
  outline: none;
  border-color: var(--button-primary, var(--fg-secondary));
}

.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

/* Starred section pinned above the tree (notes Deploy B, B-6b) */
.starred-section {
  padding: 4px 0 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--ui-chrome);
}

.starred-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-secondary);
  padding: 2px 6px 4px;
}

.file-tree-item .note-star {
  margin-left: auto;
  color: #d4a017;
  flex-shrink: 0;
}

/* Search result rows carry a snippet under the title */
.file-tree-item.search-hit {
  flex-wrap: wrap;
}

.file-tree-item .note-snippet {
  flex-basis: 100%;
  font-size: 11px;
  line-height: 1.35;
  color: var(--fg-secondary);
  padding-left: 20px;
  overflow: hidden;
}

/* --highlight is ~8% black: as a <mark> it was invisible (review) */
.file-tree-item .note-snippet mark {
  background: #ffe08a;
  color: #3a2f00;
  font-weight: 600;
  border-radius: 2px;
}

.search-empty {
  padding: 12px 8px;
  font-size: 12px;
  color: var(--fg-secondary);
}

/* This page has NO global .hidden utility - every .hidden rule in the
   loaded stylesheets is element-scoped, so the Recordings/Sources
   toggles were silently doing nothing (review: five findings, one of
   them data loss). Scope it the way the rest of the file does. */
.sidebar-header.hidden,
.sidebar-content.hidden,
.version-preview.hidden {
  display: none !important;
}

/* Verse chips on a Pulpit Mode slide need the same treatment as in the
   editor preview - the chip styles were scoped to .editor-preview only,
   so a hydrated slide chip rendered unstyled (review finding) */
#slide-inner .bible-ref {
  color: var(--button-primary);
  cursor: pointer;
  background: rgba(0, 102, 204, 0.1);
  padding: 0 4px;
  border-radius: 3px;
}

#slide-inner .bible-ref.bible-ref-loaded {
  display: block;
  margin: 0.9em 0;
  padding: 10px 14px;
  background: rgba(0, 102, 204, 0.06);
  border-left: 3px solid var(--button-primary);
  border-radius: 0 4px 4px 0;
  color: var(--fg);
}

#slide-inner .bible-ref-text {
  display: block;
  font-style: italic;
  line-height: 1.5;
}

#slide-inner .bible-ref-label {
  display: block;
  margin-top: 6px;
  font-size: 0.8em;
  font-style: normal;
  color: var(--button-primary);
}

/* Touch targets: on touch devices the tree rows and their ⋮ buttons were
   ~28px and 20px - below the 40px guideline, and the ⋮ is the ONLY menu
   affordance there (long-press/contextmenu doesn't fire on iOS).
   Pointer-coarse rather than a width query: it follows the finger, not
   the window (notes Deploy B, B-6d). */
@media (pointer: coarse) {
  /* padding alone reaches ~40px; min-height on top of it made rows 60px
     and cost a third of the visible list (review finding) */
  .file-tree-item,
  .file-tree-item.folder-item {
    padding: 10px 8px;
  }

  .note-actions-btn,
  .folder-actions-btn {
    width: 40px;
    height: 40px;
    opacity: 1; /* no hover on touch - it must always be visible */
  }

  /* 36px, not 40px: four buttons plus the title have to fit a 260px
     drawer header on touch-capable laptops (review finding) */
  .sidebar-btn {
    width: 36px;
    height: 36px;
  }
}

/* ===== FILE EXPLORER ===== */
.file-tree {
  list-style: none;
}

.file-tree-item {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg);
  gap: 6px;
}

.file-tree-item:hover {
  background: var(--highlight);
}

.file-tree-item.selected {
  background: var(--ui-chrome);
}

.file-tree-item.selected-secondary {
  background: var(--highlight);
  border-left: 2px solid var(--accent);
}

.file-tree-item svg {
  width: 14px;
  height: 14px;
  color: var(--fg-secondary);
  flex-shrink: 0;
}

.file-tree-item .folder-icon {
  color: #F5C542;
  fill: #F5C542;
  stroke: #D4A830;
}

.file-tree-item .note-icon {
  color: #FFFFFF;
  fill: #FFFFFF;
  stroke: #CCCCCC;
}

.file-tree-item .note-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-tree-item span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Actions button - visible on hover */
.note-actions-btn {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-secondary);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
}

.file-tree-item:hover .note-actions-btn,
.note-actions-btn:focus {
  opacity: 1;
}

.note-actions-btn:hover {
  background: var(--highlight);
  color: var(--fg);
}

/* Always show on touch devices */
@media (hover: none) {
  .note-actions-btn {
    opacity: 1;
  }
}

/* Inline rename input */
.inline-rename-input {
  flex: 1;
  font-size: 13px;
  padding: 2px 6px;
  border: 1px solid var(--button-primary);
  border-radius: 4px;
  background: var(--bg);
  color: var(--fg);
  outline: none;
  min-width: 0;
}

.folder-children {
  padding-left: 16px;
  list-style: none;
}

.file-tree li {
  list-style: none;
  display: block;
  position: relative;
}

/* Collapsed folder hides children */
li.collapsed > .folder-children {
  display: none;
}

/* Default folder badge */
.default-badge {
  font-size: 9px;
  padding: 2px 5px;
  background: var(--button-primary);
  color: white;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  font-weight: 500;
}

/* Folder actions button */
.folder-actions-btn {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-secondary);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
}

.file-tree-item:hover .folder-actions-btn,
.folder-actions-btn:focus {
  opacity: 1;
}

.folder-actions-btn:hover {
  background: var(--highlight);
  color: var(--fg);
}

/* Always show on touch devices */
@media (hover: none) {
  .folder-actions-btn {
    opacity: 1;
  }
}

/* Context menu divider */
.context-menu-divider {
  height: 1px;
  background: var(--ui-chrome);
  margin: 4px 0;
}

/* Context menu disabled state */
.context-menu-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ===== NOTE CONTEXT MENU ===== */
.note-context-menu {
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  min-width: 160px;
  padding: 4px;
  animation: contextMenuFadeIn 0.1s ease-out;
}

@keyframes contextMenuFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--fg);
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
}

.context-menu-item:hover {
  background: var(--highlight);
}

.context-menu-item svg {
  width: 14px;
  height: 14px;
  color: var(--fg-secondary);
  flex-shrink: 0;
}

.context-menu-item.danger {
  color: var(--button-danger);
}

.context-menu-item.danger svg {
  color: var(--button-danger);
}

.context-menu-divider {
  height: 1px;
  background: var(--ui-chrome);
  margin: 4px 0;
}

/* ===== NOTES MODAL (Generic) ===== */
.notes-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: modalBackdropFadeIn 0.15s ease-out;
}

@keyframes modalBackdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.notes-modal {
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 400px;
  animation: modalSlideIn 0.2s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.notes-modal .modal-header {
  padding: 16px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ui-chrome);
}

.notes-modal .modal-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}

.modal-close-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--fg-secondary);
  font-size: 20px;
  line-height: 1;
}

.modal-close-btn:hover {
  background: var(--highlight);
  color: var(--fg);
}

.notes-modal .modal-body {
  padding: 16px 20px;
}

.notes-modal .modal-body p {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--fg);
}

.notes-modal .modal-footer {
  padding: 12px 20px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Delete confirmation specific */
.delete-warning {
  color: var(--button-danger);
  font-size: 13px !important;
}

.btn-secondary {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  background: var(--ui-chrome);
  color: var(--fg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.btn-secondary:hover {
  background: var(--highlight);
}

.btn-danger {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  background: var(--button-danger);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.btn-danger:hover {
  opacity: 0.9;
}

.btn-primary {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  background: var(--button-primary);
  color: var(--button-primary-fg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-link {
  padding: 8px 0;
  font-size: 13px;
  background: none;
  color: var(--button-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-link:hover {
  text-decoration: underline;
}

/* Move to folder modal */
.move-folder-modal {
  max-width: 360px;
}

.move-instructions {
  color: var(--fg-secondary) !important;
  margin-bottom: 12px !important;
}

.folder-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 250px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.folder-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--fg);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

.folder-option:hover {
  background: var(--highlight);
}

.folder-option.current {
  background: var(--ui-chrome);
  border-color: var(--ui-chrome);
}

.folder-option svg {
  width: 16px;
  height: 16px;
  color: var(--fg-secondary);
  flex-shrink: 0;
}

.folder-option span {
  flex: 1;
}

.current-badge {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--button-primary);
  color: var(--button-primary-fg);
  border-radius: 4px;
  flex-shrink: 0;
}

.create-folder-section {
  border-top: 1px solid var(--ui-chrome);
  padding-top: 12px;
}

.create-folder-input {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.create-folder-input input {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid var(--ui-chrome);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  outline: none;
}

.create-folder-input input:focus {
  border-color: var(--button-primary);
}

/* ===== TOAST NOTIFICATIONS ===== */
.notes-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 12px 20px;
  background: var(--fg);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 10002;
}

.notes-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.notes-toast.error {
  background: var(--button-danger);
  color: white;
}

/* ===== FIRST-TIME HINT ===== */
.first-time-hint {
  margin-bottom: 12px;
  animation: hintFadeIn 0.3s ease-out;
}

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

.hint-content {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--highlight);
  border: 1px solid var(--ui-chrome);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-secondary);
}

.hint-content svg {
  flex-shrink: 0;
  color: var(--button-primary);
  margin-top: 1px;
}

.hint-content span {
  flex: 1;
}

.hint-content strong {
  color: var(--fg);
}

.hint-dismiss {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--fg-secondary);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hint-dismiss:hover {
  background: var(--ui-chrome);
  color: var(--fg);
}

/* ===== EDITOR ===== */
.editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.editor-toolbar {
  padding: 8px 12px;
  border-bottom: 1px solid var(--ui-chrome);
  display: flex;
  align-items: center;
  gap: 4px;
}

.editor-toolbar-btn {
  padding: 4px 8px;
  font-size: 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--fg-secondary);
}

.editor-toolbar-btn:hover {
  background: var(--highlight);
  color: var(--fg);
}

.editor-toolbar-btn.active {
  background: var(--ui-chrome);
  color: var(--fg);
}

/* Save button styles */
.editor-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  opacity: 0.5;
  transition: opacity 0.2s, background 0.2s, color 0.2s;
}

.editor-save-btn svg {
  width: 14px;
  height: 14px;
}

.editor-save-btn .icon-check {
  display: none;
}

.editor-save-btn .save-text {
  font-size: 11px;
  display: none;
}

.editor-save-btn.has-changes {
  opacity: 1;
  color: var(--button-primary);
}

.editor-save-btn.has-changes:hover {
  background: var(--button-primary);
  color: var(--button-primary-fg);
}

.editor-save-btn.saving {
  opacity: 0.7;
  pointer-events: none;
}

.editor-save-btn.saving .save-text {
  display: inline;
}

.editor-save-btn.saving .save-text::after {
  content: 'Saving...';
}

.editor-save-btn.saved {
  opacity: 1;
  color: #22c55e;
}

.editor-save-btn.saved .icon-save {
  display: none;
}

.editor-save-btn.saved .icon-check {
  display: block;
}

.editor-save-btn.saved .save-text {
  display: inline;
}

.editor-save-btn.saved .save-text::after {
  content: 'Saved';
}

.editor-title-input {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--fg);
  outline: none;
}

.editor-content {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative; /* Required for absolutely positioned empty state overlays */
}

.editor-source, .editor-preview {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.editor-source {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 14px;
  line-height: 1.6;
  background: var(--bg);
  border: none;
  resize: none;
  color: var(--fg);
  outline: none;
}

.editor-preview {
  background: var(--bg);
  line-height: 1.7;
}

.editor-preview.hidden {
  display: none;
}

.editor-split .editor-source,
.editor-split .editor-preview {
  flex: 0 0 50%;
  border-right: 1px solid var(--ui-chrome);
}

.editor-split .editor-preview {
  border-right: none;
}

/* ===== BACKLINKS PANEL ===== */
.backlinks-section {
  margin-bottom: 12px;
}

.backlinks-section.collapsed .backlinks-section-content {
  display: none;
}

.backlinks-section.collapsed .backlinks-section-header svg {
  transform: rotate(-90deg);
}

.backlinks-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  cursor: pointer;
  border-radius: 6px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

.backlinks-section-header:hover,
.backlinks-section-header:active {
  background: var(--ui-chrome);
}

.backlinks-section-header svg {
  transition: transform 0.2s;
}

.backlinks-section-content {
  padding: 4px 0;
}

.backlink-item {
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--ui-chrome);
  cursor: pointer;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}

.backlink-item:hover,
.backlink-item:active {
  background: var(--ui-chrome-hover);
}

.backlink-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 4px;
}

.backlink-context {
  font-size: 12px;
  color: var(--fg-secondary);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.backlink-snippet {
  font-size: 12px;
  color: var(--fg-secondary);
  line-height: 1.4;
}

/* Unlinked mentions */
.unlinked-mention-item {
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--ui-chrome);
  border-left: 3px solid var(--accent-bg);
}

.unlinked-mention-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.unlinked-mention-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-link-mention {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  background: var(--accent-bg);
  color: var(--accent-fg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s, transform 0.1s;
}

.btn-link-mention:hover {
  opacity: 0.9;
}

.btn-link-mention:active {
  transform: scale(0.97);
}

.unlinked-mention-context {
  font-size: 12px;
  color: var(--fg-secondary);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-link-all-mentions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  background: var(--button-primary);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s, transform 0.1s;
}

.btn-link-all-mentions:hover {
  opacity: 0.9;
}

.btn-link-all-mentions:active {
  transform: scale(0.98);
}

/* Inline backlinks at bottom of preview */
.inline-backlinks {
  margin-top: 40px;
  padding: 20px;
  background: var(--ui-chrome);
  border-radius: 12px;
  border: 1px solid var(--ui-chrome);
}

.inline-backlinks-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 16px;
}

.inline-backlinks-header::before {
  content: '';
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") no-repeat center;
}

.inline-backlinks-section {
  margin-bottom: 16px;
}

.inline-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: 10px;
}

.btn-link-all-inline {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent-bg);
  color: var(--accent-fg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-transform: none;
  min-height: 32px;
  -webkit-tap-highlight-color: transparent;
}

.inline-backlink-item {
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}

.inline-backlink-item:hover,
.inline-backlink-item:active {
  background: var(--highlight);
}

.inline-backlink-item strong {
  display: block;
  font-size: 14px;
  color: var(--fg);
  margin-bottom: 4px;
}

.inline-backlink-context {
  font-size: 12px;
  color: var(--fg-secondary);
  display: block;
  line-height: 1.4;
}

.inline-unlinked-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border-left: 3px solid var(--accent-bg);
  border-radius: 8px;
  margin-bottom: 8px;
  min-height: 44px;
}

.inline-unlinked-title {
  font-size: 13px;
  color: var(--fg);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-link-inline {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  background: var(--accent-bg);
  color: var(--accent-fg);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s;
}

.btn-link-inline:hover {
  opacity: 0.9;
}

.btn-link-inline:active {
  transform: scale(0.9);
}

/* ===== GRAPH VIEW ===== */
.graph-container {
  width: 100%;
  height: 100%;
  background: var(--bg);
}

.graph-node {
  fill: var(--button-primary);
  cursor: pointer;
}

.graph-node:hover {
  fill: var(--button-primary-hover);
}

.graph-link {
  stroke: var(--ui-chrome);
  stroke-width: 1;
}

.graph-label {
  font-size: 11px;
  fill: var(--fg);
  pointer-events: none;
}

/* ===== CANVAS VIEW ===== */
.canvas-container {
  width: 100%;
  height: 100%;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.canvas-viewport {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
}

.canvas-node {
  position: absolute;
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: move;
  min-width: 200px;
  min-height: 100px;
}

.canvas-node-header {
  padding: 8px 12px;
  border-bottom: 1px solid var(--ui-chrome);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  cursor: move;
}

.canvas-node-content {
  padding: 12px;
  font-size: 13px;
  color: var(--fg-secondary);
  max-height: 200px;
  overflow-y: auto;
}

.canvas-edge {
  stroke: var(--fg-tertiary);
  stroke-width: 2;
  fill: none;
  pointer-events: none;
}

/* ===== COMMAND PALETTE ===== */
.command-palette-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-backdrop);
  z-index: 2000;
  display: none;
}

.command-palette-backdrop.show {
  display: block;
}

.command-palette {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 500px;
  background: var(--overlay-bg);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  z-index: 2001;
}

.command-palette-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ui-chrome);
  color: var(--fg);
  outline: none;
}

.command-palette-results {
  max-height: 300px;
  overflow-y: auto;
}

.command-palette-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  gap: 10px;
}

.command-palette-item:hover,
.command-palette-item.selected {
  background: var(--highlight);
}

.command-palette-item svg {
  width: 16px;
  height: 16px;
  color: var(--fg-secondary);
}

.command-palette-item span {
  color: var(--fg);
  font-size: 14px;
}

/* ===== AUTH MODAL ===== */
.auth-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-backdrop);
  z-index: 4000;
  display: none;
  align-items: center;
  justify-content: center;
}

.auth-modal-backdrop.show {
  display: flex;
}

.auth-modal {
  background: var(--overlay-bg);
  border-radius: 12px;
  width: 90%;
  max-width: 380px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.auth-modal-header {
  padding: 20px 24px 16px;
  text-align: center;
}

.auth-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}

.auth-modal-subtitle {
  font-size: 13px;
  color: var(--fg-secondary);
  margin-top: 4px;
}

.auth-modal-body {
  padding: 0 24px 24px;
}

.auth-input-group {
  margin-bottom: 14px;
}

.auth-input-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-secondary);
  margin-bottom: 6px;
}

.auth-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  color: var(--fg);
  outline: none;
}

.auth-input:focus {
  border-color: var(--button-primary);
}

.auth-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  background: var(--button-primary);
  color: var(--button-primary-fg);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 8px;
}

.auth-btn:hover {
  background: var(--button-primary-hover);
}

.auth-btn-secondary {
  background: var(--ui-chrome);
  color: var(--fg);
}

.auth-btn-secondary:hover {
  background: var(--highlight);
}

.auth-switch {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--fg-secondary);
}

.auth-switch a {
  color: var(--button-primary);
  text-decoration: none;
  cursor: pointer;
}

.auth-error {
  background: rgba(255, 59, 48, 0.1);
  color: #FF3B30;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 14px;
  display: none;
}

.auth-error.show {
  display: block;
}

.auth-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--fg-secondary);
  border-radius: 4px;
}

.auth-modal-close:hover {
  background: var(--highlight);
}

/* Forgot Password Link */
.auth-forgot-link {
  text-align: center;
  margin-top: 12px;
  font-size: 12px;
}

.auth-forgot-link a {
  color: var(--fg-tertiary);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.auth-forgot-link a:hover {
  color: var(--fg-secondary);
  text-decoration: underline;
}

/* Secondary Button */
.auth-btn-secondary {
  background: transparent;
  border: 1px solid var(--ui-chrome);
  color: var(--fg);
  margin-bottom: 10px;
}

.auth-btn-secondary:hover {
  background: var(--highlight);
}

/* Recovery Codes Display */
.auth-recovery-codes {
  padding: 20px;
}

.recovery-codes-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.recovery-codes-header svg {
  color: var(--button-primary);
}

.recovery-codes-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
}

.recovery-codes-warning {
  font-size: 13px;
  color: var(--fg-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.recovery-codes-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.recovery-code-item {
  font-family: monospace;
  font-size: 14px;
  letter-spacing: 1px;
  background: var(--highlight);
  padding: 10px 14px;
  border-radius: 6px;
  text-align: center;
  color: var(--fg);
  font-weight: 600;
  user-select: all;
}

/* Password Reset Flow */
.auth-reset-flow {
  padding: 20px;
}

.reset-step-desc {
  font-size: 14px;
  color: var(--fg-secondary);
  line-height: 1.5;
  margin-bottom: 20px;
}

.reset-code-input {
  font-family: monospace;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  font-size: 18px;
}

.reset-step .auth-btn {
  margin-top: 16px;
}

.reset-back-link {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-chrome);
}

.reset-success {
  text-align: center;
  padding: 20px 0;
}

.reset-success svg {
  color: #34C759;
  margin-bottom: 16px;
}

.reset-success h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: var(--fg);
}

.reset-success p {
  color: var(--fg-secondary);
  margin: 0;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  .notes-sidebar-left {
    position: fixed;
    left: 0;
    top: var(--topbar-height);
    bottom: 0;
    width: 280px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
  }
  
  .notes-sidebar-left.open {
    transform: translateX(0);
  }
  
  .notes-sidebar-right {
    position: fixed;
    right: 0;
    top: var(--topbar-height);
    bottom: 0;
    width: 280px;
    z-index: 100;
    transform: translateX(100%);
    transition: transform var(--transition-normal);
  }
  
  .notes-sidebar-right.open {
    transform: translateX(0);
  }
  
  .mobile-sidebar-backdrop {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    display: none;
  }
  
  .mobile-sidebar-backdrop.show {
    display: block;
  }
  
  .editor-split .editor-source,
  .editor-split .editor-preview {
    flex: 1;
  }
  
  .mobile-toolbar {
    display: flex;
    padding: 8px;
    border-top: 1px solid var(--ui-chrome);
    gap: 8px;
  }
  
  .mobile-toolbar-btn {
    flex: 1;
    padding: 10px;
    font-size: 12px;
    background: var(--ui-chrome);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--fg);
  }
  
  /* Split mode: hide entire toolbar when both panes have notes */
  .split-view-container.split-active.split-both-open .mobile-toolbar {
    display: none;
  }
  
  /* Split mode: show only Files button when one pane is empty */
  .split-view-container.split-active.split-one-open .mobile-toolbar-btn {
    display: none;
  }
  
  .split-view-container.split-active.split-one-open #btn-mobile-files {
    display: block;
  }
}

@media (min-width: 769px) {
  .mobile-toolbar {
    display: none;
  }
  
  .mobile-sidebar-backdrop {
    display: none !important;
  }

}

/* ===== EMPTY STATE ===== */
.notes-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 32px;
  color: var(--fg-tertiary);
}

.notes-empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.notes-empty-state h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--fg-secondary);
  margin-bottom: 8px;
}

.notes-empty-state p {
  font-size: 13px;
  max-width: 280px;
  margin-bottom: 20px;
}

.empty-state-btn {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  background: var(--button-primary);
  color: var(--button-primary-fg);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.empty-state-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.empty-state-btn:active {
  transform: translateY(0);
}

/* ===== WIKI LINK AUTOCOMPLETE ===== */
.wikilink-popup {
  position: fixed;
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-height: 320px;
  overflow-y: auto;
  z-index: 2000;
  min-width: 260px;
  display: none;
}

.wikilink-popup.show {
  display: block;
  animation: wikilink-slide-in 0.15s ease-out;
}

@keyframes wikilink-slide-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.wikilink-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-tertiary);
  border-bottom: 1px solid var(--ui-chrome);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wikilink-hint {
  font-weight: 400;
  text-transform: none;
  font-size: 11px;
  opacity: 0.7;
}

.wikilink-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  font-size: 14px;
  cursor: pointer;
  color: var(--fg);
  border-bottom: 1px solid var(--ui-chrome);
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}

.wikilink-option:last-child {
  border-bottom: none;
}

.wikilink-option:hover,
.wikilink-option:active,
.wikilink-option.selected {
  background: var(--highlight);
}

.wikilink-icon {
  flex-shrink: 0;
  color: var(--fg-secondary);
}

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

.wikilink-option-new {
  color: var(--button-primary);
}

.wikilink-option-new .wikilink-icon {
  color: var(--button-primary);
}

/* Mobile optimizations for wikilink popup */
@media (max-width: 768px) {
  .wikilink-popup {
    position: fixed;
    left: 16px !important;
    right: 16px !important;
    bottom: 40% !important;
    top: auto !important;
    transform: none !important;
    max-width: none !important;
    width: auto !important;
    max-height: 50vh;
    border-radius: 16px;
  }
  
  @keyframes wikilink-slide-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .wikilink-option {
    padding: 16px;
    min-height: 56px;
  }
  
  .wikilink-popup-header {
    padding: 14px 16px;
  }
}

/* ===== LINK PREVIEW POPUP ===== */
.link-preview-popup {
  position: fixed;
  display: none;
  flex-direction: column;
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  z-index: 4000;
  min-width: 280px;
  max-width: 360px;
  max-height: 300px;
  overflow: hidden;
}

.link-preview-popup.show {
  display: flex;
  animation: link-preview-in 0.15s ease-out;
}

@keyframes link-preview-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.link-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  background: var(--ui-chrome);
}

.link-preview-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-preview-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--fg-secondary);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.link-preview-close:hover,
.link-preview-close:active {
  background: var(--highlight);
  color: var(--fg);
}

.link-preview-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--ui-chrome);
  background: var(--ui-chrome);
}

.link-preview-open-btn {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--button-primary-fg);
  background: var(--button-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.link-preview-open-btn:hover,
.link-preview-open-btn:active {
  opacity: 0.9;
}

.link-preview-content {
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-secondary);
  overflow-y: auto;
  max-height: 200px;
}

.link-preview-content p {
  margin: 0 0 8px;
}

.link-preview-content h1,
.link-preview-content h2,
.link-preview-content h3 {
  font-size: 14px;
  margin: 0 0 8px;
}

/* Mobile: fullscreen-ish preview */
@media (max-width: 768px) {
  .link-preview-popup {
    max-width: none;
    width: calc(100% - 32px);
    max-height: 70vh;
    border-radius: 16px;
  }
  
  @keyframes link-preview-in {
    from { opacity: 0; transform: translateY(-50%) scale(0.95); }
    to { opacity: 1; transform: translateY(-50%) scale(1); }
  }
  
  .link-preview-header {
    padding: 16px;
  }
  
  .link-preview-title {
    font-size: 16px;
  }
  
  .link-preview-close {
    width: 36px;
    height: 36px;
  }
  
  .link-preview-content {
    padding: 16px;
    font-size: 14px;
    max-height: calc(70vh - 160px);
  }
  
  .link-preview-footer {
    padding: 16px;
  }
  
  .link-preview-open-btn {
    padding: 14px 20px;
    font-size: 15px;
    min-height: 48px;
  }
}

/* ===== SELECTION TOOLBAR (Floating quick format bar) ===== */
.selection-toolbar {
  position: fixed;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--overlay-bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 3000;
}

.selection-toolbar.show {
  display: flex;
  animation: selection-toolbar-in 0.12s ease-out;
}

@keyframes selection-toolbar-in {
  from { opacity: 0; transform: translateX(-50%) scale(0.95); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.selection-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}

.selection-btn:hover,
.selection-btn:active {
  background: var(--highlight);
}

.selection-btn svg {
  flex-shrink: 0;
}

.selection-btn span {
  white-space: nowrap;
}

.selection-btn .highlight-icon {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-secondary);
}

/* Mobile: larger touch targets, position at bottom */
@media (max-width: 768px) {
  .selection-toolbar {
    left: 16px !important;
    right: 16px !important;
    bottom: 60px !important;
    top: auto !important;
    transform: none !important;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 14px;
  }
  
  @keyframes selection-toolbar-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .selection-btn {
    padding: 14px 18px;
    min-height: 48px;
    font-size: 14px;
  }
}

/* ===== MARKDOWN PREVIEW STYLES ===== */
.editor-preview h1 { font-size: 1.75em; margin: 1em 0 0.5em; }
.editor-preview h2 { font-size: 1.5em; margin: 1em 0 0.5em; }
.editor-preview h3 { font-size: 1.25em; margin: 1em 0 0.5em; }
.editor-preview p { margin: 0.75em 0; }
.editor-preview ul, .editor-preview ol { margin: 0.75em 0; padding-left: 1.5em; }
.editor-preview li { margin: 0.25em 0; }
.editor-preview code {
  background: var(--ui-chrome);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 0.9em;
}
.editor-preview pre {
  background: var(--ui-chrome);
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
}
.editor-preview pre code {
  background: none;
  padding: 0;
}
.editor-preview blockquote {
  border-left: 3px solid var(--ui-chrome);
  padding-left: 16px;
  margin: 1em 0;
  color: var(--fg-secondary);
}
.editor-preview a {
  color: var(--button-primary);
  text-decoration: none;
}
.editor-preview a:hover {
  text-decoration: underline;
}
.editor-preview .internal-link {
  color: var(--button-primary);
  cursor: pointer;
}
.editor-preview .bible-ref {
  color: var(--button-primary);
  cursor: pointer;
  background: rgba(0, 102, 204, 0.1);
  padding: 0 4px;
  border-radius: 3px;
}

/* Once the LSB text arrives the chip becomes a quotation, with the
   reference beneath it (notes Deploy C, C-1) */
.editor-preview .bible-ref.bible-ref-loaded {
  display: block;
  margin: 0.9em 0;
  padding: 10px 14px;
  background: rgba(0, 102, 204, 0.06);
  border-left: 3px solid var(--button-primary);
  border-radius: 0 4px 4px 0;
  color: var(--fg);
}

.editor-preview .bible-ref-text {
  display: block;
  font-style: italic;
  line-height: 1.55;
}

.editor-preview .bible-ref-label {
  display: block;
  margin-top: 6px;
  font-size: 0.85em;
  font-style: normal;
  color: var(--button-primary);
}

.editor-preview .bible-ref.bible-ref-missing {
  background: rgba(179, 38, 30, 0.08);
  color: #b3261e;
}

/* Margin capture sheet over the reader (notes Deploy C, C-6) */
.verse-capture-sheet {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}

.verse-capture-sheet .vcs-panel {
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--bg, #fff);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.22);
}

@media (min-width: 769px) {
  .verse-capture-sheet {
    align-items: center;
  }
  .verse-capture-sheet .vcs-panel {
    border-radius: 12px;
  }
}

.verse-capture-sheet .vcs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.verse-capture-sheet .vcs-ref {
  font-weight: 600;
  color: var(--fg);
}

.verse-capture-sheet .vcs-close {
  width: 40px;
  height: 40px;
  font-size: 22px;
  line-height: 1;
  color: var(--fg-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
}

.verse-capture-sheet .vcs-verse {
  margin: 0 0 12px;
  padding-left: 10px;
  border-left: 3px solid var(--button-primary, #06c);
  font-style: italic;
  color: var(--fg-secondary);
  line-height: 1.5;
}

.verse-capture-sheet .vcs-existing {
  margin-bottom: 12px;
}

.verse-capture-sheet .vcs-existing-title {
  font-size: 12px;
  color: var(--fg-secondary);
  margin-bottom: 4px;
}

.verse-capture-sheet .vcs-existing-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px;
  min-height: 40px;
  font-family: inherit;
  font-size: 13px;
  color: var(--button-primary, #06c);
  background: rgba(0, 102, 204, 0.06);
  border: none;
  border-radius: 6px;
  margin-bottom: 4px;
  cursor: pointer;
}

.verse-capture-sheet .vcs-input {
  width: 100%;
  padding: 10px;
  font-family: inherit;
  font-size: 16px; /* keeps iOS from zooming the page on focus */
  color: var(--fg);
  background: var(--bg-surface, var(--bg));
  border: 1px solid var(--ui-chrome);
  border-radius: 8px;
  resize: vertical;
}

.verse-capture-sheet .vcs-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.verse-capture-sheet .vcs-actions button {
  padding: 10px 18px;
  min-height: 44px;
  font-family: inherit;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;
}

.verse-capture-sheet .vcs-cancel {
  color: var(--fg-secondary);
  background: transparent;
  border: 1px solid var(--ui-chrome);
}

.verse-capture-sheet .vcs-save {
  color: #fff;
  background: var(--button-primary, #06c);
  border: 1px solid var(--button-primary, #06c);
}

/* "Your notes on this chapter (N)" under the chapter heading in the
   reader (notes Deploy C, C-4) */
.chapter-notes-pill {
  display: block;
  margin: 0 auto 18px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 13px;
  color: var(--button-primary, #06c);
  background: rgba(0, 102, 204, 0.08);
  border: 1px solid rgba(0, 102, 204, 0.25);
  border-radius: 999px;
  cursor: pointer;
}

.chapter-notes-pill:hover {
  background: rgba(0, 102, 204, 0.14);
}

/* Settings → "Show My Notes Beside Verses" governs the pill too, the
   same way it governs the dots (review finding) */
.margin-notes-off .chapter-notes-pill {
  display: none;
}

/* Verse peek inside the link-preview popup (notes Deploy C, C-2) */
.verse-peek-text {
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--button-primary);
  font-style: italic;
  line-height: 1.5;
}

.verse-peek-open {
  padding: 8px 12px;
  min-height: 36px;
  font-family: inherit;
  font-size: 12px;
  color: var(--button-primary);
  background: transparent;
  border: 1px solid var(--button-primary);
  border-radius: 4px;
  cursor: pointer;
}

.verse-peek-open:hover {
  background: rgba(0, 102, 204, 0.08);
}
.editor-preview input[type="checkbox"] {
  margin-right: 6px;
}

/* Horizontal rule */
.editor-preview hr {
  border: none;
  border-top: 1px solid var(--ui-chrome);
  margin: 1.5em 0;
}

/* Strikethrough */
.editor-preview del {
  text-decoration: line-through;
  opacity: 0.7;
}

/* Highlight/mark */
.editor-preview mark {
  background: rgba(255, 208, 0, 0.4);
  padding: 0.1em 0.2em;
  border-radius: 2px;
}

/* Images */
.editor-preview .md-image {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1em 0;
}

/* Checklist items */
.editor-preview .checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0.5em 0;
}
.editor-preview .checklist-item.checked span {
  text-decoration: line-through;
  opacity: 0.7;
}
.editor-preview .checklist-item input[type="checkbox"] {
  margin-top: 4px;
}

/* Callouts */
.editor-preview .callout {
  border-radius: 6px;
  margin: 1em 0;
  padding: 12px 16px;
  border-left: 4px solid;
}
.editor-preview .callout-title {
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.editor-preview .callout-content {
  color: var(--fg-secondary);
}
.editor-preview .callout-content blockquote {
  border-left: none;
  padding-left: 0;
  margin: 0;
}

/* Callout types */
.editor-preview .callout-note,
.editor-preview .callout-info {
  background: rgba(68, 138, 255, 0.1);
  border-color: #448aff;
}
.editor-preview .callout-tip,
.editor-preview .callout-hint {
  background: rgba(0, 200, 83, 0.1);
  border-color: #00c853;
}
.editor-preview .callout-warning,
.editor-preview .callout-caution {
  background: rgba(255, 145, 0, 0.1);
  border-color: #ff9100;
}
.editor-preview .callout-danger,
.editor-preview .callout-error {
  background: rgba(255, 82, 82, 0.1);
  border-color: #ff5252;
}
.editor-preview .callout-quote,
.editor-preview .callout-cite {
  background: rgba(158, 158, 158, 0.1);
  border-color: #9e9e9e;
}
.editor-preview .callout-abstract,
.editor-preview .callout-summary,
.editor-preview .callout-tldr {
  background: rgba(0, 188, 212, 0.1);
  border-color: #00bcd4;
}
.editor-preview .callout-question,
.editor-preview .callout-help,
.editor-preview .callout-faq {
  background: rgba(255, 145, 0, 0.1);
  border-color: #ff9100;
}
.editor-preview .callout-success,
.editor-preview .callout-check,
.editor-preview .callout-done {
  background: rgba(0, 200, 83, 0.1);
  border-color: #00c853;
}
.editor-preview .callout-failure,
.editor-preview .callout-fail,
.editor-preview .callout-missing {
  background: rgba(255, 82, 82, 0.1);
  border-color: #ff5252;
}
.editor-preview .callout-example {
  background: rgba(124, 77, 255, 0.1);
  border-color: #7c4dff;
}
.editor-preview .callout-bug {
  background: rgba(255, 82, 82, 0.1);
  border-color: #ff5252;
}
.editor-preview .callout-heart {
  background: rgba(255, 82, 82, 0.1);
  border-color: #ff5252;
}

/* Headers with better styling */
.editor-preview h1,
.editor-preview h2,
.editor-preview h3,
.editor-preview h4,
.editor-preview h5,
.editor-preview h6 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
}
.editor-preview h4 { font-size: 1.1em; margin: 1em 0 0.5em; }
.editor-preview h5 { font-size: 1em; margin: 1em 0 0.5em; }
.editor-preview h6 { font-size: 0.9em; margin: 1em 0 0.5em; color: var(--fg-secondary); }

/* Tables */
.editor-preview .md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.9em;
}
.editor-preview .md-table th,
.editor-preview .md-table td {
  border: 1px solid var(--ui-chrome);
  padding: 8px 12px;
}
.editor-preview .md-table th {
  background: var(--ui-chrome);
  font-weight: 600;
}
.editor-preview .md-table tr:nth-child(even) {
  background: rgba(128, 128, 128, 0.05);
}

/* Tags */
.editor-preview .tag {
  color: var(--button-primary);
  background: rgba(0, 102, 204, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Footnotes */
.editor-preview .footnote-ref {
  color: var(--button-primary);
  cursor: help;
  font-size: 0.8em;
}

/* Mermaid Diagrams */
.editor-preview .mermaid-container {
  margin: 1em 0;
  padding: 1em;
  background: var(--ui-chrome);
  border-radius: 8px;
  overflow-x: auto;
}
.editor-preview .mermaid-loading {
  color: var(--fg-secondary);
  font-style: italic;
  padding: 1em;
  text-align: center;
}
.editor-preview .mermaid-rendered {
  display: flex;
  justify-content: center;
}
.editor-preview .mermaid-rendered svg {
  max-width: 100%;
  height: auto;
}
.editor-preview .mermaid-error {
  color: #c0392b;
  background: rgba(192, 57, 43, 0.1);
  padding: 1em;
  border-radius: 4px;
  font-size: 0.9em;
}
.editor-preview .mermaid-error-code {
  margin-top: 0.5em;
  padding: 0.5em;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  font-size: 0.85em;
  overflow-x: auto;
  white-space: pre-wrap;
}

/* ===== BIBLE SEARCH OVERLAY ===== */
.bible-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 2000;
  display: none;
  flex-direction: column;
}

.bible-search-overlay.active {
  display: flex;
}

.bible-search-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  background: var(--bg);
}

.bible-search-scope {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  background: var(--bg);
  flex-shrink: 0;
}

.bible-search-scope-chip {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--fg-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-family-sans);
  -webkit-tap-highlight-color: transparent;
}

.bible-search-scope-chip:hover {
  background: var(--ui-chrome);
  color: var(--fg);
}

.bible-search-scope-chip.active {
  background: var(--button-primary);
  color: var(--button-primary-fg);
  border-color: var(--button-primary);
}

.bible-search-close {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.bible-search-close:hover {
  background: var(--ui-chrome);
}

.bible-search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ui-chrome);
  border-radius: 8px;
  padding: 8px 12px;
}

.bible-search-icon {
  color: var(--fg-tertiary);
  flex-shrink: 0;
}

.bible-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  color: var(--fg);
  outline: none;
  font-family: var(--font-family-sans);
}

.bible-search-input::placeholder {
  color: var(--fg-tertiary);
}

.bible-search-clear {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--fg-tertiary);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
}

.bible-search-clear.visible {
  display: flex;
}

.bible-search-clear:hover {
  background: var(--highlight);
  color: var(--fg-secondary);
}

.bible-search-recent {
  display: none;
  padding: 16px;
}

.bible-search-recent.visible {
  display: block;
}

.bible-search-recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-tertiary);
  margin-bottom: 8px;
}

.bible-search-clear-history {
  background: transparent;
  border: none;
  color: var(--fg-tertiary);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--font-family-sans);
}

.bible-search-clear-history:hover {
  background: var(--highlight);
  color: var(--fg-secondary);
}

.bible-search-recent-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bible-search-recent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--fg);
  font-size: 14px;
  text-align: left;
  font-family: var(--font-family-sans);
}

.bible-search-recent-item:hover {
  background: var(--highlight);
}

.bible-search-recent-item svg {
  color: var(--fg-tertiary);
  flex-shrink: 0;
}

.bible-search-results {
  flex: 1;
  overflow-y: auto;
  display: none;
}

.bible-search-results.visible {
  display: block;
}

.bible-search-results-header {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--fg-tertiary);
  border-bottom: 1px solid var(--ui-chrome);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 1;
}

.bible-search-results-list {
  display: flex;
  flex-direction: column;
}

.bible-search-result {
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ui-chrome);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bible-search-result:hover {
  background: var(--highlight);
}

.bible-search-result-ref {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 4px;
}

.bible-search-result-text {
  font-size: 14px;
  color: var(--fg);
  line-height: 1.5;
  font-family: var(--font-family-serif);
}

/* Matched words are underlined, not filled: --accent-bg IS --accent (both
   the solid button blue), so a filled mark was blue-on-blue - a solid block
   with the word invisible inside it. */
.bible-search-result-text mark {
  background: transparent;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* The "N more…" row at the bottom of long search results - scrolling to it
   (or tapping it) appends the next chunk. */
.bible-search-more-sentinel {
  padding: 14px 16px;
  text-align: center;
  color: var(--fg-secondary);
  font-family: var(--font-family-sans);
  font-size: 13px;
  cursor: pointer;
}

.bible-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--fg-tertiary);
}

.bible-search-empty p {
  margin: 0 0 8px;
  font-size: 14px;
}

.bible-search-examples {
  font-size: 12px;
  color: var(--fg-tertiary);
  opacity: 0.8;
}

.bible-search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: var(--fg-tertiary);
}

.bible-search-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--fg-tertiary);
}

.bible-search-no-results p {
  margin: 0;
  font-size: 14px;
}

/* ===== SLASH COMMANDS POPUP (Like Notion) ===== */
.slash-commands-popup {
  position: fixed;
  background: var(--bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 220px;
  max-width: 280px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
}

.slash-commands-popup.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.slash-commands-header {
  padding: 8px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-tertiary);
  border-bottom: 1px solid var(--ui-chrome);
}

.slash-command-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
}

.slash-command-item:hover,
.slash-command-item.selected {
  background: var(--highlight);
}

.slash-command-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-chrome);
  border-radius: 4px;
  color: var(--fg-secondary);
  flex-shrink: 0;
}

.slash-command-icon svg {
  width: 14px;
  height: 14px;
}

.slash-command-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.slash-command-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}

.slash-command-desc {
  font-size: 11px;
  color: var(--fg-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ===== EXPORT MODAL ===== */
.export-modal {
  max-width: 400px;
  width: 90%;
}

.export-note-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--highlight);
  border-radius: 6px;
  text-align: center;
  word-break: break-word;
}

.export-formats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

.export-format-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: var(--bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--fg);
}

.export-format-btn:hover {
  background: var(--highlight);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.export-format-btn:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.export-format-btn:active {
  transform: translateY(0);
}

.export-format-btn .format-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--highlight);
  border-radius: 8px;
  color: var(--accent);
}

.export-format-btn .format-icon svg {
  width: 24px;
  height: 24px;
}

.export-format-btn .format-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}

.export-format-btn .format-ext {
  font-size: 11px;
  color: var(--fg-tertiary);
  font-family: var(--font-family-mono, monospace);
}

.export-format-btn .format-desc {
  font-size: 10px;
  color: var(--fg-tertiary);
}

/* Dark/OLED theme adjustments */
.theme-dark .export-format-btn,
.theme-oled .export-format-btn {
  background: var(--card-bg, var(--bg));
}

.theme-dark .export-format-btn:hover,
.theme-oled .export-format-btn:hover {
  background: var(--highlight);
}

@media (max-width: 400px) {
  .export-formats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .export-format-btn {
    padding: 12px 8px;
  }
  
  .export-format-btn .format-icon {
    width: 36px;
    height: 36px;
  }
}

/* ===== SHARE MODAL ===== */
.share-modal {
  max-width: 380px;
  width: 92%;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}

.share-header {
  padding: 20px 20px 16px;
  background: linear-gradient(135deg, var(--accent-subtle) 0%, transparent 100%);
  border-bottom: 1px solid var(--ui-chrome);
}

.share-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.share-title-row h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--fg);
}

.share-note-name {
  margin: 0;
  font-size: 14px;
  color: var(--fg-secondary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-body {
  padding: 16px 20px 20px;
  transition: opacity 0.2s ease;
}

.share-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.share-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.share-format {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 0 0 auto;
}

.share-format:hover {
  background: var(--highlight);
  border-color: var(--fg-tertiary);
}

.share-format:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.share-format.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.share-format.selected .format-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.share-format.selected .format-ext {
  color: rgba(255, 255, 255, 0.8);
}

.format-badge {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--highlight);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}

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

.share-format .format-name {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
}

.share-format .format-ext {
  font-size: 10px;
  color: var(--fg-tertiary);
  font-family: var(--font-family-mono, monospace);
}

.share-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.share-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  background: var(--bg);
  border: 1px solid var(--ui-chrome);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--fg);
}

.share-action-btn svg {
  color: var(--fg-secondary);
  transition: color 0.15s ease;
}

.share-action-btn span {
  font-size: 12px;
  font-weight: 500;
}

.share-action-btn:hover {
  background: var(--highlight);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.share-action-btn:hover svg {
  color: var(--accent);
}

.share-action-btn:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.share-action-btn:active {
  transform: translateY(0);
}

.share-action-btn.share-native {
  grid-column: span 2;
  flex-direction: row;
  gap: 10px;
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.share-action-btn.share-native svg {
  color: white;
}

.share-action-btn.share-native:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.share-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--fg-secondary);
  font-size: 14px;
}

.share-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ui-chrome);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Dark theme adjustments */
.theme-dark .share-modal,
.theme-oled .share-modal {
  background: var(--card-bg, var(--bg));
}

.theme-dark .share-format,
.theme-oled .share-format,
.theme-dark .share-action-btn,
.theme-oled .share-action-btn {
  background: var(--bg);
}

/* Mobile optimizations */
@media (max-width: 400px) {
  .share-modal {
    width: 95%;
    max-width: none;
    border-radius: 12px 12px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-height: 85vh;
    overflow-y: auto;
  }
  
  .share-formats {
    justify-content: center;
  }
  
  .share-format {
    padding: 6px 10px;
  }
  
  .format-badge {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }
  
  .share-actions {
    gap: 8px;
  }
  
  .share-action-btn {
    padding: 14px 10px;
  }
}

/* ===== DESKTOP SPLIT-VIEW LAYOUT ===== */
/* Bible always on left, other content on right */
@media (min-width: 1024px) {
  /* Mark body as desktop mode for JS detection */
  body {
    --is-desktop: 1;
  }
  
  /* Hide Main Bible tab in desktop mode - Bible is always visible on left */
  .app-tab[data-tab="reader"] {
    display: none !important;
  }
  
  /* Move Sidecar Bible tab to the right side in desktop mode */
  .app-tabs {
    flex: 0 0 auto;
  }
  
  /* The Sidecar tab stays in the normal tab row. It used to be
     position:fixed at right:210px - a leftover from the pre-merged-header
     layout - which floated it exactly on top of the Study Tools (sparkle)
     button, hiding it on desktop (owner-reported). */
  .app-tab[data-tab="sidecar"] {
    height: calc(var(--topbar-height) - 2px);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0 12px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
  }

  .app-tab[data-tab="sidecar"].active {
    border-bottom-color: var(--accent);
  }
  
  /* Main content becomes a flex container for split view */
  .app-content.desktop-split {
    display: flex;
    flex-direction: row;
  }
  
  /* Left panel: Bible reader. Full width (the reading column centers itself
     via styles.css) until something actually opens on the right - previously
     it was pinned to 50% at all times, leaving the right half of every
     desktop screen empty. */
  .app-content.desktop-split .reader-wrapper {
    flex: 1;
    width: 100%;
    max-width: 100%;
    display: block !important;
    height: calc(100vh - var(--topbar-height));
    height: calc(100dvh - var(--topbar-height));
    overflow-y: auto;
  }

  /* "Split is active" = the right panel (notes/bookmarks/help/sidecar) or any
     right-docked study overlay is open. Browsers without :has() still split
     correctly for panel tabs via flex sizing; they only miss the
     overlay-triggered shrink (overlay then covers the right half of the
     text, still fully usable). */
  body:has(#desktop-right-panel.active, .overlay.active, .word-overlay.active, .cross-refs-overlay.active, .bible-search-overlay.active, .timeline-search-overlay.active, .concordance-search-overlay.active, .concordance-word-overlay.active) .app-content.desktop-split .reader-wrapper {
    width: 50%;
    max-width: 50%;
    border-right: 1px solid var(--ui-chrome);
  }
  
  /* Right panel container for secondary content */
  .desktop-right-panel {
    display: none;
    flex: 1;
    width: 50%;
    max-width: 50%;
    height: calc(100vh - var(--topbar-height));
    height: calc(100dvh - var(--topbar-height));
    overflow: hidden;
    background: var(--bg);
  }
  
  .desktop-right-panel.active {
    display: flex;
    flex-direction: column;
  }
  
  /* Notes wrapper in desktop split view */
  .app-content.desktop-split .notes-wrapper {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
  }
  
  .app-content.desktop-split .notes-wrapper.active {
    display: flex;
  }
  
  /* Bookmarks wrapper in desktop split view */
  .app-content.desktop-split .bookmarks-wrapper {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  
  .app-content.desktop-split .bookmarks-wrapper.active {
    display: block;
  }
  
  /* Help wrapper in desktop split view */
  .app-content.desktop-split .help-wrapper {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
  
  .app-content.desktop-split .help-wrapper.active {
    display: block;
  }
  
  /* Sidecar panel in desktop mode - show in right panel as inline content */
  /* Use class-based approach to ensure proper mobile/desktop switching */
  #bible-sidecar.desktop-sidecar,
  #bible-sidecar.desktop-sidecar.open,
  #bible-sidecar.desktop-sidecar.closed {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    border-left: none !important;
    z-index: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Hide sidecar's own close button in desktop mode - we use the panel's close button */
  #bible-sidecar.desktop-sidecar .sidecar-close-btn {
    display: none;
  }
  
  /* Remove backdrop overlay on desktop since we're using inline content */
  body.desktop-mode .sidecar-backdrop {
    display: none !important;
  }
  
  /* Hide gutter chapter-tap zones only while the split view is active
     (they were previously hidden on desktop at all times, leaving mouse
     users with no chapter navigation). */
  body:has(#desktop-right-panel.active, .overlay.active, .word-overlay.active, .cross-refs-overlay.active, .bible-search-overlay.active, .timeline-search-overlay.active, .concordance-search-overlay.active, .concordance-word-overlay.active) .app-content.desktop-split #gutter-left,
  body:has(#desktop-right-panel.active, .overlay.active, .word-overlay.active, .cross-refs-overlay.active, .bible-search-overlay.active, .timeline-search-overlay.active, .concordance-search-overlay.active, .concordance-word-overlay.active) .app-content.desktop-split #gutter-right {
    display: none;
  }

  /* (The verse picker lives in the topbar since Phase 4.1 and is no longer
     confined to the left half when the split view opens.) */

  /* Constrain all overlays to right half in desktop mode - no blur on left side */
  body.desktop-mode .overlay-backdrop {
    left: 50% !important;
    width: 50% !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
  }
  
  body.desktop-mode .overlay {
    left: 50% !important;
    width: 50% !important;
    right: auto !important;
    top: var(--topbar-height) !important;
    bottom: 0 !important;
  }
  
  body.desktop-mode .concordance-word-overlay {
    left: 50% !important;
    width: 50% !important;
    right: auto !important;
    top: var(--topbar-height) !important;
    bottom: 0 !important;
  }
  
  /* Action sheets in desktop mode */
  body.desktop-mode .action-sheet-backdrop {
    left: 50% !important;
    width: 50% !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  body.desktop-mode .action-sheet {
    left: 50% !important;
    width: 50% !important;
    right: auto !important;
  }
  
  /* Word overlay in desktop mode */
  body.desktop-mode .word-overlay {
    left: 50% !important;
    width: 50% !important;
    right: auto !important;
    top: var(--topbar-height) !important;
    bottom: 0 !important;
  }
  
  /* Cross-references overlay in desktop mode - render in right panel without blur */
  body.desktop-mode .cross-refs-overlay {
    position: fixed !important;
    left: 50% !important;
    width: 50% !important;
    right: auto !important;
    top: var(--topbar-height) !important;
    bottom: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* Remove any pseudo-element blur effects on cross-refs in desktop mode */
  body.desktop-mode .cross-refs-overlay::before,
  body.desktop-mode .cross-refs-overlay::after {
    display: none !important;
  }
  
  /* Bible search overlay in desktop mode */
  body.desktop-mode .bible-search-overlay {
    left: 50% !important;
    width: 50% !important;
    right: auto !important;
    top: var(--topbar-height) !important;
    bottom: 0 !important;
  }
  
  /* Timeline search overlay in desktop mode */
  body.desktop-mode .timeline-search-overlay {
    left: 50% !important;
    width: 50% !important;
    right: auto !important;
    top: var(--topbar-height) !important;
    bottom: 0 !important;
  }
  
  /* Concordance search overlay in desktop mode */
  body.desktop-mode .concordance-search-overlay {
    left: 50% !important;
    width: 50% !important;
    right: auto !important;
    top: var(--topbar-height) !important;
    bottom: 0 !important;
  }
  
  /* (Removed: a max-width:100% override here used to defeat the typographic
     reading measure inside the split pane. The column width from styles.css
     now applies everywhere.) */

  /* Adjust notes layout for desktop right panel - single column layout */
  .app-content.desktop-split .notes-layout {
    height: 100%;
    flex-direction: column;
  }
  
  /* Hide left sidebar in desktop panel - use mobile-style layout */
  .desktop-panel-content .notes-sidebar-left {
    display: none !important;
  }
  
  /* Hide right sidebar in desktop panel */
  .desktop-panel-content .notes-sidebar-right {
    display: none !important;
  }
  
  /* Make notes main take full width in desktop panel */
  .desktop-panel-content .notes-main {
    width: 100%;
    flex: 1;
  }
  
  /* The desktop panel hides both sidebars (above), so it needs the
     mobile-style toolbar as its ONLY way to reach the note list, links,
     graph and canvas. Before this the panel was a bare editor with no
     file list and no way to get one (notes Deploy B, B-1). The old rule
     here targeted .mobile-notes-nav - a class that exists nowhere. */
  .desktop-panel-content .mobile-toolbar {
    display: flex !important;
    padding: 8px;
    gap: 8px;
    border-top: 1px solid var(--ui-chrome);
  }

  /* The button styling lives in the <=768px block, which never applies at
     panel width - without this the row renders as unstyled 10px text. */
  .desktop-panel-content .mobile-toolbar-btn {
    flex: 1;
    padding: 10px;
    font-size: 12px;
    font-family: inherit;
    color: var(--fg);
    background: var(--bg-surface, var(--bg));
    border: 1px solid var(--ui-chrome);
    border-radius: 6px;
    cursor: pointer;
  }

  .desktop-panel-content .mobile-toolbar-btn:hover {
    background: var(--highlight);
  }

  /* ...and the drawers must be reachable inside the panel: they are
     position:fixed under 768px, but the panel is a desktop-width column,
     so give them panel-relative placement. `bottom: 52px` deliberately
     stops short of the toolbar - a full-height drawer covered its own
     Files/Links buttons, and the tap-outside backdrop is force-hidden
     above 768px, so there was no way to close it again (review). */
  .desktop-panel-content .notes-sidebar-left.open,
  .desktop-panel-content .notes-sidebar-right.open {
    display: flex !important;
    position: absolute;
    top: 0;
    bottom: 52px;
    width: 260px;
    max-width: 80%;
    z-index: 60;
    transform: none;
  }

  .desktop-panel-content .notes-sidebar-left.open {
    left: 0;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.18);
  }

  /* Without this the newly-visible "Links" button did nothing at all */
  .desktop-panel-content .notes-sidebar-right.open {
    right: 0;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.18);
  }

  .desktop-panel-content .notes-layout {
    position: relative;
  }

  /* Adjust notes wrapper for desktop panel */
  .desktop-panel-content .notes-wrapper {
    height: 100%;
    flex-direction: column;
  }
  
  .desktop-panel-content .notes-wrapper.active {
    display: flex;
  }
  
  /* Hide mobile-only elements on desktop - EXCEPT inside the notes panel,
     where the toolbar is the only navigation (see B-1 rule above; the
     .desktop-panel-content rule carries !important to win over this). */
  .app-content.desktop-split .mobile-toolbar {
    display: none;
  }
  
  /* Desktop right panel header */
  .desktop-panel-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--ui-chrome);
    background: var(--bg);
    min-height: 40px;
  }
  
  .desktop-right-panel.active .desktop-panel-header {
    display: flex;
  }
  
  .desktop-panel-title {
    font-family: var(--font-family-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--fg);
  }
  
  .desktop-panel-close {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
  }
  
  .desktop-panel-close:hover {
    background: var(--highlight);
    color: var(--fg);
  }
  
  .desktop-panel-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
}

/* Placeholder shown in the Help tab while help-content.php loads */
.help-loading {
  padding: 2rem;
  color: var(--fg-secondary);
  text-align: center;
}

/* Short tab labels on narrow screens so the chapter title fits (Phase 4.1);
   DOM text stays "Main Bible"/"Sidecar Bible" - only the painted label changes. */
@media (max-width: 599px) {
  .app-tab {
    font-size: 0;
    padding: 6px 6px;
  }
  .app-tab::after {
    content: attr(data-label-short);
    font-size: 12px;
  }

  /* Compress the chrome so the chapter title + play button keep comfortable
     room in the middle: without this the title collapses to 0px and the play
     button jams against the icon cluster on phones. Icon buttons stay 36px
     tall for touch; only their width narrows. */
  .app-topbar { padding: 0 4px; }
  .app-topbar-icons { gap: 0; }
  .app-icon-btn { width: 30px; }
  /* 12px, not the old 2px: the picker and the play button are adjacent 40px
     tap targets, and at 2px apart choosing a chapter often started playback.
     The ≤380px block below still compresses further — there is no room to
     give back on the very tightest bars. */
  .gutter-top-center { gap: 12px; }
  /* This IS the effective mobile size for the picker (notes.css loads after
     styles.css). Keep it in sync with the note in styles.css. */
  .verse-picker-label { padding: 0 4px; font-size: 0.85rem; }
  /* Floor so the book name can't be squeezed to nothing by the icon cluster:
     the picker is the only flex-1 item, so without a floor it collapses to a
     couple of pixels ("Eze...") on very crowded bars. */
  .gutter-top-center { min-width: 4.75rem; }
}


/* Smallest phones (iPhone SE/mini etc.): one more squeeze so "Matt 2" still
   shows in full next to the play button. */
@media (max-width: 400px) {
  /* 26px (was 28): pays for the 12px picker/play mis-tap gap above so
     "1 Thess 5" still renders unclipped at 390px. Height stays 36px. */
  .app-icon-btn { width: 26px; }
  .app-tab { padding: 6px 4px; }
  .app-tab::after { font-size: 11px; }
  .verse-picker-label { padding: 0 4px; }
}

/* Very narrow: iPhone mini / SE, or any phone in iOS Display Zoom ("Zoomed"),
   which reports ~320px CSS width. The topbar has too many items for that
   width, so the shrinkable picker collapsed and clipped the book name to
   "Eze...". This block MUST come after the max-width:400px block above, or
   that block's 28px icons win the cascade and starve the picker. Narrowing
   the 6-icon cluster to 24px frees enough room that the flex-1 picker gets
   its full book name back; the floor + hidden chevron are belt-and-suspenders
   for the very tightest widths and long abbreviations ("1 Thess 5"). */
@media (max-width: 380px) {
  .app-icon-btn { width: 20px; }
  .app-topbar .verse-picker-tts.tts-button { width: 26px; }
  /* Keep a real mis-tap gap even here: 375px is the standard width of many
     iPhones (X–11 Pro, SE, mini), not an edge case. 10px, paid for by the
     20px icons below (was 22px). */
  .gutter-top-center { gap: 10px; }
  .verse-picker-label { font-size: 0.8125rem; padding: 0 2px; }
  .verse-picker-label .picker-chevron { display: none; }
  /* Floor covers the longest abbreviation, "1 Thessalonians" -> "1 Thess 5". */
  .gutter-top-center { min-width: 4.5rem; }
}

/* === Notes Phase 0: truthful saves, drafts, palette nav ================== */
#btn-save-note.save-failed {
  background: rgba(217, 119, 6, 0.15);
  border-color: #d97706;
  color: #b45309;
}

.draft-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 9px 12px;
  border: 1px solid #d97706;
  border-radius: 8px;
  background: rgba(217, 119, 6, 0.08);
  color: var(--fg);
  font-size: 0.85rem;
}
.draft-banner button {
  border: 1px solid var(--ui-chrome-border, #ccc);
  background: var(--overlay-bg, var(--bg));
  color: var(--fg);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}
.draft-banner .draft-restore {
  background: #d97706;
  border-color: #d97706;
  color: #fff;
  font-weight: 600;
}

.command-palette-item.active {
  background: var(--highlight, rgba(43, 108, 176, 0.12));
}

.checklist-item input[type="checkbox"] { cursor: pointer; }

/* ===== Prayer list (Notes Phase 2) ===== */
.prayer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 6px 14px;
  border: 1px solid var(--accent-color, #8b7355);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color, #8b7355) 12%, transparent);
  color: var(--accent-color, #8b7355);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.prayer-chip:hover,
.prayer-chip:focus-visible {
  background: color-mix(in srgb, var(--accent-color, #8b7355) 22%, transparent);
}