:root{
  --bg:#f7f7f4;
  --panel:#fff;
  --border:#dfe6e2;
  --ink:#1f2a24;
  --sub:#57645d;
  --accent:#22a06b;
  --danger:#d93b3b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

/* Layout */
.layout{
  display:grid;
  grid-template-columns:1fr; /* main content always full width */
  height:100vh;
  position:relative; /* for absolute sidebar */
  z-index:0;
}

/* Bold current scope */
.scopebar .crumb.current{ font-weight:700; color: var(--ink); }

/* Centered page loader */
#pageLoader{
  position: fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.65);
  z-index:500;
}
#pageLoader .spinner{
  width:64px; height:64px;
  border:8px solid #cfd8d3;
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* Sidebar */
.sidebar {
  position:absolute; /* slides over main content */
  top:0; left:0;
  width:280px;
  height:100%;
  background: var(--panel);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding-right:6px;
  transform: translateX(-100%);
  transition: transform 0.25s ease-in-out;
  z-index:100; /* above main content */
}

body.sidebar-visible .sidebar {
  transform: translateX(0);
}

/* Main content */
.main{
  display:flex;
  flex-direction:column;
}

.mainbar{
  background:var(--panel);
  border-bottom:1px solid var(--border);
  padding:8px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.mainbar .path{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  display:flex;
  align-items:center;
  gap:8px;
}
.actions button{
  margin-left:6px;
  padding:6px 12px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:8px;
  cursor:pointer;
}

/* Floating full-height purple toggle tab */
#btnToggleSidebar {
  position: fixed;
  left:0;
  top:0;
  height:100vh;
  width:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  background: rgba(128, 0, 128, 0.25);
  border:none;
  border-right:1px solid rgba(0,0,0,0.06);
  z-index:110; /* above sidebar */
  cursor:pointer;
  color:white;
  font-weight:700;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border-radius:0;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

/* Ensure main header button styling doesn't override toggle tab */
.actions #btnToggleSidebar { margin-left:0; transform:none; }

/* Other styling */
.actions .danger{border-color:#f3c6c6; color:#8b1a1a; background:#fff5f5}
.previewToggle{margin-left:10px; color:var(--sub); font-size:13px}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--border)
}
#refreshTree{border:1px solid var(--border); background:#fff; padding:4px 8px; border-radius:6px; cursor:pointer}

/* Scope bar */
.scopebar{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border);
  font-size:13px; color:var(--sub); overflow:auto; white-space:nowrap;
}
.scopebar .crumb{color:var(--ink); cursor:pointer; padding:2px 4px; border-radius:6px}
.scopebar .crumb:hover{background:#f3f5f4}
.scopebar .sep{opacity:.5; padding:0 2px}
.scopebar button{margin-left:auto; border:1px solid var(--border); background:#fff; border-radius:8px; padding:4px 8px; cursor:pointer}

/* Tree */
.tree{padding:8px 8px 16px; overflow:auto; flex:1; font-size:14px}
.tree details{margin:2px 0}
.tree summary{list-style:none; cursor:pointer; padding:4px 6px; border-radius:6px; display:flex; align-items:center; gap:6px}
.tree summary::-webkit-details-marker{display:none}
.tree summary:hover{background:#f3f5f4}
.tree .chev{display:inline-block; width:1em; text-align:center; transition:transform .15s}
.tree details[open] > summary .chev{transform:rotate(90deg)}
.tree .label{user-select:none; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
.tree .focus{opacity:0; transition:opacity .12s; border:1px solid var(--border); background:#fff; border-radius:6px; padding:2px 6px; cursor:pointer; font-size:12px}
.tree summary:hover .focus{opacity:1}
.tree .file{padding:4px 6px; border-radius:6px; cursor:pointer; display:flex; align-items:center; gap:6px; white-space:nowrap}
.tree .file:hover{background:#f3f5f4}
.tree .file.active{background:#eef7f3}
.tree .name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
.tree .file .name.dirty::after{content:" *"; margin-left:2px; color:#f5b301; font-weight:600}

/* Create + links */
.createBox{border-top:1px solid var(--border); padding:10px 12px}
.createBox input, .createBox textarea{
  width:100%; border:1px solid var(--border); border-radius:8px; padding:8px; margin:6px 0; font:inherit; background:#fff;
}
.createBox .row{display:flex; gap:6px}
.createBox button{padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer}

.linksBox{border-top:1px solid var(--border); padding:10px 12px}
.linksBox button{margin-top:6px; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer}
#links{max-height:180px; overflow:auto; font-family:ui-monospace, Menlo, Consolas, monospace}
#links .edge{padding:2px 0; border-bottom:1px dashed #eaeaea}

/* Editor + preview */
.editorWrap{display:grid; grid-template-columns:1fr 40%; height:100%}
#editor,#ta{height:calc(100vh - 56px); width:100%; border:none; outline:none; margin:0}
#ta{padding:12px; font:13px/1.5 ui-monospace, Menlo, Consolas, monospace}
.hidden{display:none}
#preview{height:calc(100vh - 56px); width:100%; border-left:1px solid var(--border)}
@media (max-width:1000px){ .editorWrap{grid-template-columns:1fr} #preview{display:none} }

/* Save/loader + status dot */
#saveLoader{display:inline-block; margin-left:8px; width:16px; height:16px; border:3px solid #bbb; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; visibility:hidden; vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
#saveStatusDot{position:fixed; right:10px; top:10px; width:10px; height:10px; border-radius:50%; background:#bbb; box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(0,0,0,.05); z-index:5}
#saveStatusDot.ok{background:#22a06b} 
#saveStatusDot.err{background:#d93b3b} 
#saveStatusDot.dirty{background:#f5b301} 

/* Right-hand linkmap panel (mirror of .sidebar) */
.linkmap-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding-left: 6px;
  transform: translateX(100%); /* hidden by default */
  transition: transform 0.25s ease-in-out;
  z-index: 100; /* above main content */
}

/* shown state */
body.linkmap-visible .linkmap-panel {
  transform: translateX(0);
}

/* floating full-height right toggle tab */
#btnToggleLinks {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: rgba(0, 102, 153, 0.18);
  border: none;
  border-left: 1px solid rgba(0,0,0,0.06);
  z-index: 110; /* above linkmap */
  cursor: pointer;
  color: white;
  font-weight: 700;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border-radius: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* small adjustments for the link panel content */
.linksContent { max-height: calc(100vh - 88px); font-family: ui-monospace, Menlo, Consolas, monospace; }
.linksContent .edge{ padding:6px 0; border-bottom:1px dashed #eaeaea; white-space:nowrap; overflow:auto; }


/* Sidebar hidden state */
body.sidebar-hidden .sidebar { transform: translateX(-100%); }