ahmdmusa_obsidian-toolkit/styles.css

/* ═══════════════════════════════════════════════
   Obsidian Toolkit v2.1 — STYLES
   ═══════════════════════════════════════════════ */

:root {
  --fs-radius: 8px;
  --fs-mono:   'JetBrains Mono','Fira Code','Cascadia Code',ui-monospace,monospace;
}

/* ═══════════════════════════════════════════════
   1. FORMATTING SUITE
   ═══════════════════════════════════════════════ */

body .markdown-preview-view h1 { border-bottom: 3px solid var(--interactive-accent); padding-bottom: 10px; font-weight: 800; letter-spacing: -0.5px; }
body .markdown-preview-view h2 { border-left: 4px solid var(--interactive-accent); padding-left: 12px; font-weight: 700; }
body .markdown-preview-view h3 { border-left: 3px solid var(--text-accent); padding-left: 10px; font-weight: 600; }
body .markdown-preview-view h4 { text-transform: uppercase; letter-spacing: 2px; font-size: .78em; border-bottom: 1px dashed var(--background-modifier-border); padding-bottom: 4px; font-weight: 700; }
body .markdown-preview-view h5 { font-weight: 600; }
body .markdown-preview-view h6 { font-style: italic; }

body .markdown-preview-view hr { border: none; height: 2px; background: linear-gradient(90deg, transparent, var(--interactive-accent) 50%, transparent); margin: 2em 0; opacity: .4; border-radius: 2px; }

body .markdown-preview-view table { border-collapse: collapse; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); margin: 1.2em 0; font-size: .92em; }
body .markdown-preview-view th { background: var(--interactive-accent); color: #ffffff; font-weight: 700; padding: 11px 16px; text-align: inherit; letter-spacing: .4px; font-size: .9em; }
body .markdown-preview-view th strong, body .markdown-preview-view th em, body .markdown-preview-view th a { color: #ffffff; }
body .markdown-preview-view td { padding: 9px 16px; border-bottom: 1px solid var(--background-modifier-border); vertical-align: top; }
body .markdown-preview-view tbody tr:nth-child(even) td { background: var(--background-secondary); }
body .markdown-preview-view tbody tr:hover td { background: var(--background-modifier-hover); }

body .markdown-preview-view pre  { border-radius: var(--fs-radius); border-left: 4px solid var(--interactive-accent); padding: 16px 20px; font-family: var(--fs-mono); font-size: .87em; overflow-x: auto; }
body .markdown-preview-view code { font-family: var(--fs-mono); font-size: .88em; }
body .markdown-preview-view :not(pre) > code { background: var(--background-secondary); padding: 2px 7px; border-radius: 5px; font-size: .84em; border: 1px solid var(--background-modifier-border); }

body .markdown-preview-view blockquote { border-left: 4px solid var(--interactive-accent); background: var(--background-secondary); border-radius: 0 var(--fs-radius) var(--fs-radius) 0; padding: 12px 18px; margin: 1em 0; color: var(--text-muted); font-style: italic; }

body .markdown-preview-view strong { font-weight: 800; }
body .markdown-preview-view em     { font-style: italic; }
body .markdown-preview-view mark   { background: rgba(253,224,71,.3); color: var(--text-normal); border-radius: 3px; padding: 1px 3px; }

body .markdown-preview-view a, body .markdown-preview-view a.internal-link { color: var(--link-color); text-decoration: none; border-bottom: 1px dotted var(--link-color); }
body .markdown-preview-view a:hover { border-bottom: 1px solid var(--link-color); }

a.tag { background: var(--interactive-accent); color: var(--text-on-accent); border-radius: 20px; padding: 2px 10px; font-size: .78em; font-weight: 600; text-decoration: none; border: none; margin: 0 2px; }

body .markdown-preview-view ul > li::marker { color: var(--interactive-accent); font-weight: 700; }
body .markdown-preview-view ol > li::marker { color: var(--text-accent); font-weight: 700; }

/* ── Callouts ── */
.callout { border-radius: 12px; border-width: 1px; padding: 0; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06); margin: 1.1em 0; }
.callout-title { font-weight: 700; font-size: .88em; letter-spacing: .8px; padding: 10px 14px; gap: 8px; display: flex; align-items: center; text-transform: uppercase; }
.callout-content { padding: 12px 16px; border-top: 1px solid rgba(var(--callout-color),.2); }

.callout[data-callout="goal"]       { --callout-color: 234,88,12;   --callout-icon: lucide-target; }
.callout[data-callout="idea"]       { --callout-color: 202,138,4;   --callout-icon: lucide-lightbulb; }
.callout[data-callout="task"]       { --callout-color: 124,58,237;  --callout-icon: lucide-check-square; }
.callout[data-callout="important"]  { --callout-color: 185,28,28;   --callout-icon: lucide-star; }
.callout[data-callout="decision"]   { --callout-color: 6,78,59;     --callout-icon: lucide-scale; }
.callout[data-callout="blocker"]    { --callout-color: 180,83,9;    --callout-icon: lucide-alert-octagon; }
.callout[data-callout="definition"] { --callout-color: 67,20,140;   --callout-icon: lucide-book; }
.callout[data-callout="formula"]    { --callout-color: 30,64,175;   --callout-icon: lucide-calculator; }
.callout[data-callout="remember"]   { --callout-color: 91,33,182;   --callout-icon: lucide-brain; }
.callout[data-callout="review"]     { --callout-color: 8,145,178;   --callout-icon: lucide-refresh-cw; }
.callout[data-callout="resource"]   { --callout-color: 5,150,105;   --callout-icon: lucide-book-open; }
.callout[data-callout="cmd"]        { --callout-color: 30,30,30;    --callout-icon: lucide-terminal; font-family: var(--fs-mono); }
.callout[data-callout="config"]     { --callout-color: 71,85,105;   --callout-icon: lucide-settings; }

.callout[data-callout="ayah"],
.callout[data-callout="hadith"],
.callout[data-callout="dua"] { direction: rtl; text-align: start; font-family: 'Amiri','Scheherazade New','Traditional Arabic',serif; font-size: 1.08em; line-height: 1.9; }
.callout[data-callout="ayah"]   { --callout-color: 6,95,70;    --callout-icon: lucide-book-open; }
.callout[data-callout="hadith"] { --callout-color: 26,86,219;  --callout-icon: lucide-scroll; }
.callout[data-callout="dua"]    { --callout-color: 109,40,217; --callout-icon: lucide-heart; text-align: center; }
.callout[data-callout="ayah"]   .callout-title,
.callout[data-callout="hadith"] .callout-title,
.callout[data-callout="dua"]    .callout-title { flex-direction: row-reverse; justify-content: flex-end; }

.cm-s-obsidian .cm-header-1 { font-weight: 800; }
.cm-s-obsidian .cm-header-2 { font-weight: 700; }
.cm-s-obsidian .cm-strong   { font-weight: 800; }

/* ═══════════════════════════════════════════════
   2. FORMATTING PALETTE MODAL
   ═══════════════════════════════════════════════ */
.fp-modal-root { width: 720px; max-width: 92vw; }
.fp-palette { padding: 0; display: flex; flex-direction: column; height: 80vh; max-height: 640px; }

.fp-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px 12px; border-bottom: 1px solid var(--background-modifier-border); flex-shrink: 0; }
.fp-logo  { font-size: 1.3em; }
.fp-title { font-weight: 700; font-size: 1.0em; letter-spacing: 0.3px; flex: 1; }
.fp-kb-hint { font-size: 0.75em; color: var(--text-muted); display: flex; align-items: center; gap: 3px; }
.fp-kb-hint kbd { background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: 4px; padding: 1px 5px; font-size: 0.9em; font-family: var(--fs-mono); }

.fp-search-wrap { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--background-modifier-border); flex-shrink: 0; }
.fp-search-icon { font-size: 1.1em; flex-shrink: 0; }
.fp-search { flex: 1; border: none; background: transparent; font-size: 0.95em; color: var(--text-normal); outline: none; }
.fp-search::placeholder { color: var(--text-faint); }

.fp-cards-area { flex: 1; overflow-y: auto; padding: 12px 14px; }
.fp-section { margin-bottom: 14px; }
.fp-section-label { font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; color: var(--text-muted); margin-bottom: 7px; padding-bottom: 4px; border-bottom: 1px solid var(--background-modifier-border); }

.fp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }

.fp-card { display: flex; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--background-modifier-border); cursor: pointer; transition: border-color 0.1s, background 0.1s, transform 0.1s; background: var(--background-secondary); user-select: none; }
.fp-card:hover, .fp-card.fp-active { border-color: var(--card-color); background: var(--background-modifier-hover); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.fp-card-accent  { width: 4px; background: var(--card-color); flex-shrink: 0; }
.fp-card-body    { display: flex; align-items: center; gap: 9px; padding: 9px 10px; flex: 1; min-width: 0; }
.fp-card-icon    { font-size: 1.25em; flex-shrink: 0; line-height: 1; width: 1.4em; text-align: center; }
.fp-card-info    { min-width: 0; flex: 1; }
.fp-card-name    { font-weight: 600; font-size: 0.85em; color: var(--text-normal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-card-preview { font-family: var(--fs-mono); font-size: 0.68em; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.fp-empty { text-align: center; color: var(--text-muted); padding: 40px 20px; font-size: 0.9em; }

/* ═══════════════════════════════════════════════
   3. IMAGE CONTROL
   ═══════════════════════════════════════════════ */
.ic-float-left   { float: left;  margin: 4px 22px 14px 0; clear: left; }
.ic-float-right  { float: right; margin: 4px 0 14px 22px; clear: right; }
.ic-block-center { display: flex; flex-direction: column; align-items: center; margin: 10px auto; clear: both; }

.ic-wrapper { position: relative; display: inline-block; }
.ic-wrapper img { display: block; border-radius: 5px; transition: box-shadow 0.2s; }

/* ── Toolbar: click-activated only (no hover) ── */
.ic-toolbar {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(15,15,15,0.88);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 5px 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 200;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
/* shown when .ic-active is on the wrapper */
.ic-wrapper.ic-active .ic-toolbar {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
/* subtle ring on active image */
.ic-wrapper.ic-active img {
  box-shadow: 0 0 0 2px var(--interactive-accent);
}

.ic-btn { background: none; border: none; color: rgba(255,255,255,0.88); font-size: 11px; padding: 3px 7px; border-radius: 5px; cursor: pointer; font-family: monospace; line-height: 1.4; min-width: 22px; text-align: center; }
.ic-btn:hover  { background: rgba(255,255,255,0.16); color: #fff; }
.ic-btn.active { background: rgba(255,255,255,0.24); color: #fff; font-weight: 700; }
.ic-size-display { color: rgba(255,255,255,0.6); font-size: 10px; font-family: monospace; min-width: 38px; text-align: center; padding: 0 2px; }
.ic-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.2); margin: 0 3px; flex-shrink: 0; }

.ic-caption-el    { font-size: 0.79em; color: var(--text-muted); font-style: italic; text-align: center; margin-top: 5px; padding: 0 4px; max-width: 100%; display: none; }
.ic-caption-el.visible { display: block; }
.ic-caption-input { font-size: 0.79em; color: var(--text-muted); font-style: italic; text-align: center; margin-top: 5px; padding: 2px 6px; border: 1px dashed var(--background-modifier-border); border-radius: 4px; background: transparent; width: 100%; outline: none; display: none; }
.ic-caption-input.visible { display: block; }

/* ── Special layouts ── */
.ic-caption-layout { display: flex; flex-direction: column; align-items: center; margin: 12px 0; }
.ic-caption-layout img { border-radius: 7px; cursor: zoom-in; }
.ic-caption-layout em, .ic-caption-layout .ic-cap-text { font-size: 0.8em; color: var(--text-muted); font-style: italic; margin-top: 6px; text-align: center; display: block; }

.ic-col-layout { display: flex; gap: 18px; align-items: flex-start; margin: 12px 0; clear: both; }
.ic-col-layout.reversed { flex-direction: row-reverse; }
.ic-col-layout img { flex-shrink: 0; width: 260px; border-radius: 7px; object-fit: cover; cursor: pointer; }
.ic-col-layout p, .ic-col-text { flex: 1; min-width: 0; margin: 0; }

.ic-grid { display: grid; gap: 8px; margin: 12px 0; clear: both; }
.ic-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ic-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ic-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ic-grid img { width: 100%; height: 165px; object-fit: cover; border-radius: 7px; cursor: pointer; display: block; transition: opacity 0.15s; }
.ic-grid img:hover { opacity: 0.88; }

/* ── Lightbox ── */
.ic-lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.ic-lightbox-inner { position: relative; user-select: none; cursor: grab; }
.ic-lightbox-inner.dragging { cursor: grabbing; }
.ic-lightbox-img { max-width: 90vw; max-height: 86vh; border-radius: 6px; display: block; transform-origin: center center; pointer-events: none; will-change: transform; }

.ic-lb-bar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; align-items: center; background: rgba(10,10,10,0.82); backdrop-filter: blur(10px); border-radius: 12px; padding: 6px 10px; z-index: 10000; }
.ic-lb-btn { background: none; border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.9); font-size: 13px; padding: 5px 13px; border-radius: 7px; cursor: pointer; line-height: 1; }
.ic-lb-btn:hover { background: rgba(255,255,255,0.14); }
.ic-lb-zoom-val { font-size: 11px; color: rgba(255,255,255,0.55); font-family: monospace; min-width: 38px; text-align: center; }
.ic-lb-close { position: fixed; top: 14px; right: 18px; background: rgba(10,10,10,0.6); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.8); font-size: 16px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; z-index: 10001; display: flex; align-items: center; justify-content: center; }
.ic-lb-close:hover { background: rgba(255,255,255,0.2); color: #fff; }
.ic-lb-btn.ic-lb-active { background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.5); }

/* ── Movement / shortcut hint ── */
.ic-lb-hint {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,10,10,0.7);
  color: rgba(255,255,255,0.75);
  font-size: 11.5px;
  padding: 6px 14px;
  border-radius: 20px;
  z-index: 10000;
  white-space: nowrap;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

/* ── Gallery navbar ── */
.ic-gallery-bar {
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90vw;
  background: rgba(10,10,10,0.78);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 8px 10px 6px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.ic-gal-label { font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; }
.ic-gal-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  max-width: 80vw;
  padding-bottom: 2px;
}
.ic-gal-thumb {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.45;
  border: 2px solid transparent;
  transition: opacity 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.ic-gal-thumb:hover { opacity: 0.8; }
.ic-gal-thumb.ic-gal-active { opacity: 1; border-color: var(--interactive-accent); }

/* ═══════════════════════════════════════════════
   4. FULLSCREEN
   ═══════════════════════════════════════════════ */
.fs-float-btn { position: absolute; top: 12px; right: 12px; z-index: 9000; background: rgba(30,18,8,.75); color: #fdf8ee; border: none; border-radius: 8px; padding: 6px 10px; font-size: 1.1rem; cursor: pointer; backdrop-filter: blur(4px); transition: opacity .2s; opacity: 0.5; }
.fs-float-btn:hover { opacity: 1; }

/* ── Zen Mode (auto-fullscreen substitute) ──
   Hides sidebars and tab headers instead of using the real
   Fullscreen API, which Chromium blocks without a fresh user
   gesture. The icon ribbon stays visible — it's core navigation
   and hiding it caused confusion if exit-on-activity ever missed
   an event (e.g. while a Settings modal had focus). */
body.toolkit-zen-mode .workspace-tab-header-container,
body.toolkit-zen-mode .workspace-split.mod-left-split,
body.toolkit-zen-mode .workspace-split.mod-right-split,
body.toolkit-zen-mode .status-bar {
  display: none;
}
body.toolkit-zen-mode .workspace-leaf-content[data-type="markdown"] .view-content {
  max-width: 900px;
  margin: 0 auto;
}

/* ── Auto-fullscreen hint ── */
.fs-hint {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,15,15,0.92);
  backdrop-filter: blur(12px);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 9998;
  font-size: 0.88em;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: fs-hint-in 0.25s ease;
  white-space: nowrap;
}
@keyframes fs-hint-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.fs-hint-progress {
  width: 72px; height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px; overflow: hidden;
}
.fs-hint-progress-bar {
  height: 100%;
  background: var(--interactive-accent);
  border-radius: 2px;
  animation: fs-progress 3s linear forwards;
}
@keyframes fs-progress {
  from { width: 100%; }
  to   { width: 0%; }
}
.fs-hint-cancel {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.9);
  border-radius: 7px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 0.85em;
  transition: background 0.15s;
}
.fs-hint-cancel:hover { background: rgba(255,255,255,0.22); }

/* ═══════════════════════════════════════════════
   5. PROGRESS BAR MODAL
   ═══════════════════════════════════════════════ */
.progress-modal-root { width: 360px; max-width: 94vw; }
.progress-modal { padding: 18px 20px 16px; }
.progress-modal-title { font-size: 0.95em; font-weight: 700; margin-bottom: 16px; color: var(--text-normal); }
.progress-label { font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin-bottom: 6px; }
.progress-slider-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.progress-slider { flex: 1; accent-color: var(--interactive-accent); cursor: pointer; }
.progress-num-input { width: 52px; border: 1.5px solid var(--background-modifier-border); border-radius: 7px; padding: 5px 8px; background: var(--background-secondary); color: var(--text-normal); font-size: 0.9em; text-align: center; outline: none; transition: border-color 0.15s; }
.progress-num-input:focus { border-color: var(--interactive-accent); }
.progress-pct-label { font-size: 0.9em; color: var(--text-muted); }
.progress-preview-box { background: var(--background-secondary); border: 1px solid var(--background-modifier-border); border-radius: 9px; padding: 12px 16px; font-family: var(--fs-mono); font-size: 0.88em; margin-bottom: 16px; text-align: center; letter-spacing: 1.5px; color: var(--text-normal); }
.progress-actions { display: flex; gap: 8px; justify-content: flex-end; }
.progress-btn { padding: 7px 18px; border-radius: 8px; border: none; cursor: pointer; font-size: 0.85em; font-weight: 600; transition: opacity 0.15s; }
.progress-btn-cancel { background: var(--background-secondary); color: var(--text-muted); border: 1px solid var(--background-modifier-border); }
.progress-btn-cancel:hover { background: var(--background-modifier-hover); }
.progress-btn-insert { background: var(--interactive-accent); color: var(--text-on-accent); }
.progress-btn-insert:hover { opacity: 0.88; }

/* ═══════════════════════════════════════════════
   6. PREMIUM FILE TREE
   ═══════════════════════════════════════════════ */

/* ── Row heights ── */
.ft-height-compact  .nav-file-title, .ft-height-compact  .nav-folder-title { min-height: 24px; }
.ft-height-default  .nav-file-title, .ft-height-default  .nav-folder-title { min-height: 28px; }
.ft-height-spacious .nav-file-title, .ft-height-spacious .nav-folder-title { min-height: 34px; }

/* ── Title layout ── */
body.ft-active .nav-file-title,
body.ft-active .nav-folder-title {
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: background 0.12s ease;
  padding-top: 1px;
  padding-bottom: 1px;
}

/* ── Typography ── */
.ft-active .nav-file-title-content,
.ft-active .nav-folder-title-content {
  font-size: 13px;
  letter-spacing: -0.1px;
  font-weight: 400;
}

/* ── Icon base ── */
.ft-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-right: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.72;
  transition: opacity 0.15s;
}
.ft-active .nav-file-title:hover .ft-icon,
.ft-active .nav-folder-title:hover .ft-icon { opacity: 1; }

/* ── File type colors ── */
.ft-icon.ft-folder   { color: var(--text-muted);      opacity: 0.8; }
.ft-icon.ft-markdown { color: var(--interactive-accent); opacity: 1; }
.ft-icon.ft-canvas   { color: #8b5cf6; opacity: 0.9; }
.ft-icon.ft-pdf      { color: #e74c3c; opacity: 0.88; }
.ft-icon.ft-image    { color: #3b82f6; opacity: 0.88; }
.ft-icon.ft-video    { color: #8b5cf6; opacity: 0.88; }
.ft-icon.ft-audio    { color: #10b981; opacity: 0.88; }
.ft-icon.ft-code     { color: #f59e0b; opacity: 0.88; }
.ft-icon.ft-archive  { color: #6b7280; opacity: 0.82; }
.ft-icon.ft-link     { color: #0ea5e9; opacity: 0.88; }
.ft-icon.ft-text     { color: var(--text-muted); opacity: 0.72; }

/* ── Thumbnail ── */
.ft-thumb {
  width: 18px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
}
.ft-icon.ft-has-thumb { opacity: 1; }

/* ── Hover & selection states ── */
body.ft-active .nav-file-title:hover {
  background: var(--nav-item-background-hover, rgba(var(--interactive-accent-rgb, 124,58,237), 0.08));
}
body.ft-active .nav-file-title.is-active {
  background: rgba(var(--interactive-accent-rgb, 124,58,237), 0.15);
  border-radius: 6px;
}

/* ── Folder collapse indicator cleanup ── */
.ft-active .nav-folder-collapse-indicator {
  margin-right: 1px;
  opacity: 0.5;
  flex-shrink: 0;
}
.ft-active .nav-folder-title:hover .nav-folder-collapse-indicator { opacity: 1; }

/* ── Smooth folder open/close ── */
.ft-active .nav-folder-children {
  transition: all 0.15s ease;
}

/* ── Indent lines (Apple Notes-style) ── */
.ft-active .nav-folder-children {
  border-left: 1px solid var(--background-modifier-border);
  margin-left: 10px;
  padding-left: 4px;
}
/* ═══════════════════════════════════════════════
   7. AI SMART TEMPLATE MODAL
   ═══════════════════════════════════════════════ */
.ai-modal-root { width: 480px; max-width: 94vw; }
.ai-modal { padding: 18px 20px 16px; }
.ai-modal-title { font-size: 0.95em; font-weight: 700; margin-bottom: 14px; color: var(--text-normal); }
.ai-modal-body { min-height: 60px; margin-bottom: 14px; }

.ai-loading { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 0.9em; padding: 8px 2px; }
.ai-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--background-modifier-border);
  border-top-color: var(--interactive-accent);
  border-radius: 50%;
  animation: ai-spin 0.7s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

.ai-suggestion-box {
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 9px;
  padding: 12px 14px;
  font-family: var(--fs-mono);
  font-size: 0.85em;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
  color: var(--text-normal);
  margin: 0;
}
.ai-error-box {
  color: var(--text-error, #dc2626);
  font-size: 0.85em;
  padding: 8px 2px;
  word-break: break-word;
}
.ai-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Reset button in image toolbar ── */
.ic-btn[title] { white-space: nowrap; }

/* ── Template Generator inputs ── */
.ai-textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 0.85em;
  padding: 8px 10px;
  border: 1.5px solid var(--background-modifier-border);
  border-radius: 7px;
  background: var(--background-secondary);
  color: var(--text-normal);
  outline: none;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.ai-textarea:focus { border-color: var(--interactive-accent); }
.ai-label-spaced { margin-top: 6px; }

/* ═══════════════════════════════════════════════
   8. QUICK ACCESS BAR
   ═══════════════════════════════════════════════ */
.qb-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--background-modifier-border);
  flex-shrink: 0;
}
.qb-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 12px;
  color: var(--text-normal);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  max-width: 160px;
}
.qb-item:hover {
  background: var(--background-modifier-hover);
  border-color: var(--interactive-accent);
}
.qb-icon {
  margin-right: 0;
  flex-shrink: 0;
}
.qb-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════
   9. FOLDER FOCUS MODE
   ═══════════════════════════════════════════════ */
body.ff-active .nav-folder.ff-hidden,
body.ff-active .nav-file.ff-hidden {
  display: none;
}
body.ff-active .nav-folder.ff-self > .nav-folder-title {
  display: none;
}
body.ff-active .nav-folder.ff-self > .nav-folder-children {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}
/* Ancestor folders of a nested focused folder: keep the container
   (so the focused folder inside it can still render) but hide the
   ancestor's own title row and reset its indent. */
body.ff-active .nav-folder.ff-ancestor > .nav-folder-title {
  display: none;
}
body.ff-active .nav-folder.ff-ancestor > .nav-folder-children {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}

.ff-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--background-modifier-border);
  flex-shrink: 0;
}
.ff-home-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
}
.ff-home-btn:hover { opacity: 0.85; }
/* "at home" (nothing focused) — quieter style since it's a no-op-ish state */
.ff-home-btn.ff-home-active {
  background: var(--background-secondary);
  color: var(--text-muted);
  border: 1px solid var(--background-modifier-border);
}
.ff-home-btn.ff-home-active:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.ff-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Defensive guarantee: the file explorer's own toolbar (new note,
   new folder, sort, collapse-all icons) must never be hidden or
   squeezed out by our inserted bars. */
.workspace-leaf-content[data-type="file-explorer"] .nav-header {
  flex-shrink: 0;
}

/* ── Main folder tabs in breadcrumb ── */
.ff-breadcrumb {
  flex-wrap: wrap;
}
.ff-tab {
  display: flex;
  align-items: center;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ff-tab:hover {
  background: var(--background-modifier-hover);
  color: var(--text-normal);
}
.ff-tab.ff-tab-active {
  background: var(--interactive-accent);
  color: var(--text-on-accent);
  border-color: var(--interactive-accent);
}

/* ── Main folder badge (dot indicator) ── */
.ff-main-badge {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--interactive-accent);
  margin-left: 5px;
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── Per-folder quick-focus icon (hover-revealed) ── */
.nav-folder-title {
  position: relative;
}
.ff-quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  opacity: 0;
  color: var(--text-faint);
  cursor: pointer;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.nav-folder-title:hover .ff-quick-icon {
  opacity: 0.65;
}
.nav-folder-title .ff-quick-icon:hover {
  opacity: 1;
  background: var(--background-modifier-hover);
  color: var(--interactive-accent);
}