*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sidebar-width: 260px;
  --toolbar-height: 48px;
  --sidebar-bg: #f7f7f5;
  --sidebar-border: #e8e8e5;
  --text-primary: #37352f;
  --text-secondary: #9b9a97;
  --accent: #d9d9d9;
  --border: #e9e9e7;
  --hover-bg: #ebebeaff;
  --active-bg: #ebebeaff;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  color: var(--text-primary);
  background: #fff;
}

#app { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ── */
#sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}

.app-identity { display: flex; align-items: center; gap: 7px; min-width: 0; cursor: pointer; }
.sidebar-header-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

.app-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.app-title { font-size: 14px; font-weight: 600; }

#btn-collapse-sidebar {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#btn-collapse-sidebar:hover { background: var(--hover-bg); color: var(--text-primary); }

/* Sidebar resizer */
#sidebar-resizer {
  width: 4px;
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s;
  position: relative;
  z-index: 10;
}
#sidebar-resizer:hover, #sidebar-resizer.dragging { background: var(--accent); }

/* Collapsed sidebar */
#app.sidebar-collapsed #sidebar {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  border-right: none;
}
#app.sidebar-collapsed #sidebar-resizer {
  width: 20px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  cursor: pointer;
}
#app.sidebar-collapsed #sidebar-resizer::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 3L9 7L5 11' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

#btn-new-file {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#btn-new-file:hover { background: var(--hover-bg); color: var(--text-primary); }

#btn-new-folder {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#btn-new-folder:hover { background: var(--hover-bg); }

#file-tree { flex: 1; overflow-y: auto; padding: 6px 0; }

/* ── CDN 캐시 정보 (사이드바 하단 / 툴바) ── */
#tree-cache-info {
  flex-shrink: 0;
  border-top: 1px solid var(--sidebar-border);
  padding: 8px 16px;
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.file-cache-info {
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#tree-cache-info[hidden], .file-cache-info[hidden] { display: none; }
#tree-cache-info.stale, .file-cache-info.stale { color: var(--text-primary); }

/* 좁은 화면에서는 툴바가 밀리므로 숨긴다 (사이드바 쪽은 그대로 표시) */
@media (max-width: 640px) {
  .file-cache-info { display: none; }
}

.tree-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 13.5px;
  cursor: pointer;
  border-radius: 4px;
  margin: 0 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  user-select: none;
  touch-action: manipulation;
}
.tree-item:hover { background: var(--hover-bg); }
.tree-item.active { background: var(--active-bg); font-weight: 500; }

.tree-icon { font-size: 12px; flex-shrink: 0; }
.tree-label { overflow: hidden; text-overflow: ellipsis; }

.tree-dir-block { }
.tree-children { padding-left: 0; }

/* ── Main ── */
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

#toolbar {
  height: var(--toolbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
  flex-shrink: 0;
}

#file-path-container { flex: 1; min-width: 0; }

.file-path {
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-path:hover:not(.placeholder) { background: var(--hover-bg); }
.file-path.placeholder { cursor: default; font-style: italic; }

.file-path-edit {
  font-size: 13px;
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 3px 8px;
  outline: none;
}

#toolbar-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.status { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.status.error { color: #e03e3e; }
.status.warn { color: #d97706; }

#btn-save {
  background: #2383E2FF;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
#btn-save:hover:not(:disabled) { background: #1a73d1; }
#btn-save:disabled { opacity: 0.45; cursor: default; }

/* ── Editor area ── */
#editor-container { flex: 1; overflow-y: auto; }

/* ── Skeleton loader (Notion style) ── */
#skeleton-loader {
  flex: 1;
  overflow-y: auto;
  padding: 52px 96px 120px;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

@keyframes sk-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.sk-line {
  height: 1.1em;
  border-radius: 4px;
  background: linear-gradient(90deg, #ebebea 25%, #f1f1f1 50%, #ebebea 75%);
  background-size: 800px 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}

.sk-tree-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px 5px 14px;
  margin: 0;
}

.sk-tree-icon {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #ebebea 25%, #e8e8e8 50%, #ebebea 75%);
  background-size: 800px 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}

.sk-tree-text {
  height: 10px;
  padding: 0 20px;
  border-radius: 4px;
  background: linear-gradient(90deg, #ebebea 25%, #e8e8e8 50%, #ebebea 75%);
  background-size: 800px 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}

#editor {
  max-width: 860px;
  margin: 0 auto;
  padding: 52px 96px 120px;
  transition: max-width 0.2s, padding 0.2s;
}
#editor-container.wide #editor {
  max-width: 100%;
  padding: 40px 48px 120px;
}

/* ── TipTap / ProseMirror ── */
.ProseMirror { outline: none; min-height: 60vh; position: relative; }

.ProseMirror > * + * { margin-top: 0.3em; }

.ProseMirror p {
  line-height: 1.65;
  font-size: 16px;
  color: var(--text-primary);
}

.ProseMirror h1 { font-size: 2em; font-weight: 700; line-height: 1.2; margin-top: 1.4em; margin-bottom: 0.8em; }
.ProseMirror h2 { font-size: 1.7em; font-weight: 600; line-height: 1.25; margin-top: 1.2em; margin-bottom: 0.8em; }
.ProseMirror h3 { font-size: 1.25em; font-weight: 600; margin-top: 1em; margin-bottom: 0.8em; }
.ProseMirror h4, .ProseMirror h5, .ProseMirror h6 { font-size: 1em; font-weight: 600; margin-top: 0.8em; }

.ProseMirror ul, .ProseMirror ol { padding-left: 1.5em; }
.ProseMirror li { line-height: 1.65; }
.ProseMirror li + li { margin-top: 0.1em; }

.ProseMirror blockquote {
  border-left: 3px solid #d4d4d0;
  margin: 0.6em 0;
  padding: 0.15em 1em;
  color: var(--text-secondary);
}

.ProseMirror code {
  background: rgb(215 215 215 / 15%);
  border: 1px solid rgba(135, 131, 120, 0.35);
  border-radius: 6px;
  padding: 0.1em 0.35em;
  font-size: 0.88em;
  font-family: 'SFMono-Regular', 'Fira Code', Consolas, monospace;
  color: #EB5757;
}
/* Plain pre (not wrapped in NodeView) */
.ProseMirror pre {
  background: #f6f8fa;
  color: #24292e;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 1em 1.2em;
  overflow-x: auto;
  margin: 0.8em 0;
  line-height: 1.8;
}
.ProseMirror pre code { background: none; border: none; color: inherit; padding: 0; font-size: 0.85em; }

/* ── Code block NodeView ── */
.code-block-wrapper { margin: 0.8em 0; }

.code-block-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #eef0f3;
  border: 1px solid #e1e4e8;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 3px 10px;
}

.code-lang-wrapper { position: relative; }

.code-lang-btn {
  font-size: 11px;
  font-family: inherit;
  border: none;
  background: transparent;
  color: #666;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  outline: none;
  white-space: nowrap;
}
.code-lang-btn:hover { background: rgba(0,0,0,0.07); color: #333; }

.code-delete-btn {
  font-size: 14px;
  border: none;
  background: transparent;
  color: #999;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  outline: none;
  margin-left: auto;
  line-height: 1;
}
.code-delete-btn:hover { background: rgba(220,50,50,0.1); color: #e03e3e; }

.code-lang-dropdown {
  position: fixed;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.13);
  z-index: 1000;
  min-width: 150px;
  overflow: hidden;
}

.code-lang-option {
  padding: 7px 14px;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--text-primary);
  white-space: nowrap;
}
.code-lang-option:hover { background: var(--hover-bg); }
.code-lang-option.selected { color: var(--accent); font-weight: 600; }

.code-block-wrapper pre {
  margin: 0 !important;
  border-radius: 0 0 6px 6px;
  border-top: none !important;
  line-height: 1.8;
}

/* ── Directory view ── */
#dir-view { flex: 1; overflow-y: auto; padding: 16px 24px; }

#dir-breadcrumb {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

.breadcrumb-item {
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 5px;
}
.breadcrumb-item:hover:not(.active) { background: var(--hover-bg); color: var(--text-primary); }
.breadcrumb-item.active { color: var(--text-primary); font-weight: 500; cursor: default; }
.breadcrumb-sep { color: var(--text-secondary); }

#dir-files-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  max-width: 800px;
  margin: 0 auto;
}

/* Header row */
.dir-list-header {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  background: #f7f7f5;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  user-select: none;
}

.dir-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  cursor: pointer;
  background: #fff;
  border-bottom: 1px solid var(--border);
  transition: background 0.08s;
}
.dir-card:last-child { border-bottom: none; }
.dir-card:hover { background: var(--hover-bg); }
.dir-card:active { background: var(--active-bg); }

.dir-card-icon { display: flex; align-items: center; flex-shrink: 0; width: 8px; }
.dir-card-name {
  font-size: 13px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dir-card-type {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.dir-empty { font-size: 13px; color: var(--text-secondary); padding: 16px; }

.ProseMirror hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5em 0;
}


/* ── Gap cursor (between block nodes, e.g. 연속 이미지 사이) ── */
.ProseMirror-gapcursor {
  display: none;
  pointer-events: none;
  position: absolute;
}
.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}
.ProseMirror-gapcursor::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 2px solid var(--accent);
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}
@keyframes ProseMirror-cursor-blink {
  to { visibility: hidden; }
}

.ProseMirror img {
  display: block;
  max-width: 100%;
}

/* ── Node selection (e.g. image selected) ── */
.ProseMirror-selectednode {
  outline: 2px solid var(--accent);
  border-radius: 2px;
}

/* Placeholder text */
.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: #c1c0bc;
  pointer-events: none;
  float: left;
  height: 0;
}

/* ── Theme system ── */
#main {
  --editor-bg:        #fff;
  --body-color:       #37352f;
  --h1-color:         #37352f;
  --h2-color:         #37352f;
  --h3-color:         #37352f;
  --code-bg:          #f6f8fa;
  --code-color:       #24292e;
  --code-border:      #e1e4e8;
  --blockquote-color: #9b9a97;
  --hr-color:         #e9e9e7;
  --toolbar-bg:       #fff;
  --toolbar-border:   #e9e9e7;
}

#editor-container   { background: var(--editor-bg); }
.ProseMirror        { color: var(--body-color); }
.ProseMirror h1     { color: var(--h1-color); }
.ProseMirror h2     { color: var(--h2-color); }
.ProseMirror h3     { color: var(--h3-color); }
.ProseMirror h4, .ProseMirror h5, .ProseMirror h6 { color: var(--h3-color); }
.ProseMirror pre    { background: var(--code-bg) !important; color: var(--code-color) !important; border-color: var(--code-border) !important; }
.ProseMirror blockquote { color: var(--blockquote-color); }
.ProseMirror hr     { border-top-color: var(--hr-color); }
#toolbar            { background: var(--toolbar-bg); border-bottom-color: var(--toolbar-border); }

/* Ocean */
#main[data-theme="ocean"] {
  --h1-color: #0080FFFF;
  --h2-color: #0080FFFF;
  --h3-color: #0080FFFF;
}

/* Forest */
#main[data-theme="forest"] {
  --h1-color: #05A600FF;
  --h2-color: #05A600FF;
  --h3-color: #05A600FF;
}

/* Rose */
#main[data-theme="rose"] {
  --h1-color: #FF2600FF;
  --h2-color: #FF2600FF;
  --h3-color: #FF2600FF;
}

/* Mono */
#main[data-theme="mono"] {
  --h1-color: #000;
  --h2-color: #000;
  --h3-color: #000;
}
#main[data-theme="mono"] .ProseMirror h1,
#main[data-theme="mono"] .ProseMirror h2,
#main[data-theme="mono"] .ProseMirror h3 {
  font-family: 'SFMono-Regular', Consolas, monospace;
}

/* ── Theme button ── */
.btn-theme {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
  line-height: 1;
}
.btn-theme:hover { background: var(--hover-bg); color: var(--text-primary); }

/* ── Theme picker panel ── */
.theme-picker {
  position: fixed;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  z-index: 500;
  padding: 14px 16px;
  width: 220px;
}
.theme-picker-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
  margin-bottom: 10px;
}
.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 6px;
  border: 2px solid transparent;
}
.theme-option:hover { background: #f5f5f5; }
.theme-option.active { border-color: var(--accent); }
.theme-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.theme-option-label { font-size: 10px; color: #666; text-align: center; }

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.modal {
  background: #fff;
  border-radius: 10px;
  padding: 24px 28px;
  width: 360px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.modal-message {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 4px;
}

.modal-input {
  width: 100%;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  outline: none;
  box-sizing: border-box;
}
.modal-input:focus { border-color: var(--accent); }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.btn-cancel {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-secondary);
}
.btn-cancel:hover { background: var(--hover-bg); }

.btn-confirm {
  background: var(--accent);
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
}
.btn-confirm:hover { background: #1a73d1; }

/* ── Slash command menu ── */
.slash-menu {
  position: fixed;
  background: #fff;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 600;
  min-width: 240px;
  overflow: hidden;
  padding: 4px 0;
}
.slash-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
}
.slash-menu-item:hover,
.slash-menu-item.selected { background: var(--hover-bg); }
.slash-menu-icon { font-size: 18px; flex-shrink: 0; }
.slash-menu-text { min-width: 0; }
.slash-menu-label { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.slash-menu-desc  { font-size: 11px; color: var(--text-secondary); }

/* ── Mermaid block ── */
/* ── TOC Block ── */
.toc-block {
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  overflow: hidden;
  margin: 0.8em 0;
  user-select: none;
}
.toc-header {
  background: #f0f2f5;
  border-bottom: 1px solid #e1e4e8;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #666;
}
.toc-list { padding: 12px 18px; }
.toc-item {
  padding: 7px 16px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toc-item:hover { text-decoration: underline; }

.heading-anchor {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  opacity: 0;
  color: #aaa;
  text-decoration: none;
  vertical-align: middle;
  transition: opacity 0.15s;
}
.ProseMirror h1:hover .heading-anchor,
.ProseMirror h2:hover .heading-anchor,
.ProseMirror h3:hover .heading-anchor,
.ProseMirror h4:hover .heading-anchor,
.ProseMirror h5:hover .heading-anchor,
.ProseMirror h6:hover .heading-anchor { opacity: 1; }
.heading-anchor:hover { color: var(--accent); }
.toc-h1 { font-weight: 800; }
.toc-h2 { font-weight: 800; }
.toc-empty { padding: 8px 16px; font-size: 13px; font-style: italic; }

.mermaid-block {
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  overflow: hidden;
  margin: 0.8em 0;
}
.mermaid-header {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f0f2f5;
  border-bottom: 1px solid #e1e4e8;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #666;
  user-select: none;
}
.mermaid-code {
  display: block;
  width: 100%;
  min-height: 72px;
  padding: 10px 14px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 13px;
  border: none;
  border-bottom: 1px solid #e1e4e8;
  resize: vertical;
  outline: none;
  background: #fafafa;
  color: #333;
}
.mermaid-preview {
  padding: 16px;
  background: #fff;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mermaid-preview svg { max-width: 100%; height: auto; }
.mermaid-error { color: #e03e3e; font-size: 12px; font-family: monospace; white-space: pre-wrap; }

/* ── Table ── */
.tableWrapper { overflow-x: auto; margin: 0.8em 0; padding-bottom: 2em; }

.ProseMirror table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid var(--border);
  table-layout: auto;
  margin-bottom: 2.6rem;
}
.ProseMirror table th,
.ProseMirror table td {
  border: 1px solid var(--border);
  padding: 7px 12px;
  vertical-align: top;
  min-width: 60px;
  position: relative;
}
.ProseMirror table th {
  background: #f7f7f5;
  font-weight: 600;
  font-size: 13px;
}
.ProseMirror table p { margin: 0; font-size: inherit; line-height: 1.5; }
.ProseMirror table .selectedCell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(35, 131, 226, 0.1);
  pointer-events: none;
}
.ProseMirror .column-resize-handle {
  position: absolute;
  right: -2px;
  top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
  pointer-events: none;
}

/* ── Table UI (floating controls) ── */
.tui-row-grip, .tui-row-del,
.tui-col-grip, .tui-col-del,
.tui-add-row, .tui-add-col,
.tui-del-table,
.tui-drop-line {
  position: absolute;
  z-index: 700;
  user-select: none;
  pointer-events: auto;
  font-family: inherit;
  box-sizing: border-box;
}

.tui-row-grip, .tui-col-grip {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #c0c0be;
  border-radius: 3px;
  cursor: grab;
  line-height: 1;
}
.tui-row-grip:hover, .tui-col-grip:hover { color: var(--text-secondary); background: var(--hover-bg); }
.tui-row-grip.is-dragging, .tui-col-grip.is-dragging { cursor: grabbing; opacity: 0.5; }

.tui-row-del, .tui-col-del {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #ccc;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
}
.tui-row-del:hover, .tui-col-del:hover { color: #e03e3e; background: #fde8e8; }

.tui-add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.tui-add-row:hover { color: var(--accent); border-color: var(--accent); background: rgba(35,131,226,0.04); }

.tui-add-col {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 300;
  color: var(--text-secondary);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  transition: color 0.1s, border-color 0.1s, background 0.1s;
  line-height: 1;
}
.tui-add-col:hover { color: var(--accent); border-color: var(--accent); background: rgba(35,131,226,0.04); }

.tui-del-table {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 11px;
  color: #e03e3e;
  background: #fff;
  border: 1px solid #fcd7d7;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  white-space: nowrap;
}
.tui-del-table:hover { background: #fde8e8; }

.tui-drop-line {
  background: var(--accent);
  border-radius: 2px;
  pointer-events: none;
  z-index: 900;
  opacity: 0.75;
}

/* ── Inline rename input ── */
.tree-rename-input {
  width: 100%;
  border: none;
  border-bottom: 1.5px solid var(--accent);
  background: transparent;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
  padding: 0;
}

/* ── Inline create input ── */
.tree-inline-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  margin: 2px 6px;
}

.tree-inline-input {
  flex: 1;
  border: none;
  border-bottom: 1.5px solid var(--accent);
  background: transparent;
  font-size: 13.5px;
  color: var(--text-primary);
  outline: none;
  padding: 1px 2px;
  font-family: inherit;
}

/* ── Tree label (allow truncation inside flex) ── */
.tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tree-chevron {
  flex-shrink: 0;
  color: #aaa;
  display: block;
  padding: 4px;
  cursor: pointer;
  border-radius: 3px;
}
.tree-chevron:hover { background: rgba(0,0,0,0.08); }
.tree-icon-svg { flex-shrink: 0; display: block; }
.dir-card-svg { display: block; }
.dir-card-icon { display: flex; align-items: center; justify-content: center; padding: 0 8px;}

/* ── Hover action buttons (delete on files, add on dirs) ── */
.tree-delete-btn,
.tree-add-btn {
  display: none;
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 15px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 3px;
  border-radius: 3px;
  margin-left: auto;
}
.tree-item:hover .tree-delete-btn,
.tree-item:hover .tree-add-btn { display: flex; align-items: center; }
.tree-delete-btn:hover { background: #fde8e8; color: #e03e3e; }
.tree-add-btn:hover { background: rgba(35,131,226,0.12); color: var(--accent); }

/* ── Drag & drop ── */
.tree-item[draggable="true"] { cursor: grab; }
.tree-item[draggable="true"]:active { cursor: grabbing; }

.tree-item.dragging {
  opacity: 0.4;
}

.tree-item.moving {
  opacity: 0.45;
  pointer-events: none;
  animation: tree-moving 1.2s ease-in-out infinite;
}

@keyframes tree-moving {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 0.2; }
}

.tree-item.drag-over,
.tree-dir-block > .tree-item.drag-over {
  background: rgba(35, 131, 226, 0.12);
  outline: 1.5px dashed var(--accent);
  outline-offset: -1px;
  border-radius: 4px;
}

#file-tree.drag-over-root {
  background: rgba(35, 131, 226, 0.05);
}

/* ── Content view (read-only markdown) ── */
#content-view { flex: 1; overflow-y: auto; background: var(--editor-bg); }

.md-body {
  max-width: 860px;
  margin: 0 auto;
  padding: 52px 96px 120px;
  color: var(--body-color);
}
#content-view.wide .md-body {
  max-width: 100%;
  padding: 40px 48px 120px;
}
.md-body > * + * { margin-top: 0.3em; }
.md-body p { line-height: 1.65; font-size: 16px; }
.md-body p:empty { min-height: 1.65em; }
.md-body h1 { font-size: 2em; font-weight: 700; line-height: 1.2; margin-top: 1.4em; margin-bottom: 0.8em; color: var(--h1-color); }
.md-body h2 { font-size: 1.7em; font-weight: 600; line-height: 1.25; margin-top: 1.2em; margin-bottom: 0.8em; color: var(--h2-color); }
.md-body h3 { font-size: 1.25em; font-weight: 600; margin-top: 1em; margin-bottom: 0.8em; color: var(--h3-color); }
.md-body h4, .md-body h5, .md-body h6 { font-size: 1em; font-weight: 600; margin-top: 0.8em; color: var(--h3-color); }
.md-body ul, .md-body ol { padding-left: 1.5em; }
.md-body li { line-height: 1.65; }
.md-body li + li { margin-top: 0.1em; }
.md-body blockquote {
  border-left: 3px solid #d4d4d0;
  margin: 0.6em 0;
  padding: 0.15em 1em;
  color: var(--blockquote-color);
}
.md-body code {
  background: rgb(215 215 215 / 15%);
  border: 1px solid rgba(135, 131, 120, 0.35);
  border-radius: 6px;
  padding: 0.1em 0.35em;
  font-size: 0.88em;
  font-family: 'SFMono-Regular', 'Fira Code', Consolas, monospace;
  color: #EB5757;
}
.md-body pre {
  background: var(--code-bg) !important;
  color: var(--code-color) !important;
  border: 1px solid var(--code-border) !important;
  border-radius: 6px;
  padding: 1em 1.2em;
  overflow-x: auto;
  margin: 0.8em 0;
  line-height: 1.8;
}
.md-body pre code { background: none; border: none; color: inherit; padding: 0; font-size: 0.85em; }
.md-body hr { border: none; border-top: 1px solid var(--hr-color); margin: 1.5em 0; }
.md-body img { display: block; max-width: 100%; }
.md-body table { border-collapse: collapse; width: 100%; border: 1px solid var(--border); margin: 0.8em 0; }
.md-body table th,
.md-body table td { border: 1px solid var(--border); padding: 7px 12px; vertical-align: top; }
.md-body table th { background: #f7f7f5; font-weight: 600; font-size: 13px; }
.md-body a { color: #1a73d1; text-decoration: none; }
.md-body a:hover { text-decoration: underline; }

.mermaid-view {
  padding: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  margin: 0.8em 0;
}
.mermaid-view svg { max-width: 100%; height: auto; }

@media (max-width: 640px) {
  .md-body { padding: 24px 20px 80px; }
  #content-view.wide .md-body { padding: 24px 20px 80px; }
}

/* Scrollbars */
#file-tree::-webkit-scrollbar,
#editor-container::-webkit-scrollbar,
#content-view::-webkit-scrollbar { width: 6px; }
#file-tree::-webkit-scrollbar-track,
#editor-container::-webkit-scrollbar-track { background: transparent; }
#file-tree::-webkit-scrollbar-thumb,
#editor-container::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* Token button */
#btn-token {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 4px 6px;
  border-radius: 4px;
  opacity: 0.4;
  flex-shrink: 0;
}
#btn-token:hover { background: var(--hover-bg); opacity: 1; }
#btn-token.no-token { opacity: 1; filter: drop-shadow(0 0 3px #e03e3e); }

/* Hamburger menu button (hidden on desktop) */
#btn-menu {
  display: none;
  align-items: center;
  justify-content: center;
  /*width: 32px;*/
  height: 32px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-secondary);
}
#btn-menu:hover { background: var(--hover-bg); color: var(--text-primary); }

/* Sidebar backdrop (mobile only) */
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.3);
}

/* Mobile */
@media (max-width: 640px) {
  #btn-menu { display: flex; }
  #sidebar {
    position: absolute;
    z-index: 100;
    height: 100%;
    width: 80vw !important;
    min-width: 80vw !important;
    box-shadow: 2px 0 12px rgba(0,0,0,0.12);
  }
  #app.sidebar-collapsed #sidebar {
    width: 0 !important;
    min-width: 0 !important;
    box-shadow: none;
  }
  #sidebar-resizer { display: none; }
  #editor { padding: 24px 20px 80px; }
  #editor-container.wide #editor { padding: 24px 20px 80px; }
}