client/app.css

* { box-sizing: border-box; }
:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --border: #e7e7ea;
  --border-strong: #d9d9de;
  --text: #1a1a1e;
  --text-2: #55555e;
  --text-3: #9d9da6;
  --accent: #1d5c45;
  --accent-dark: #144533;
  --accent-soft: #e9f1ec;
  --hl: rgba(29, 92, 69, 0.1);
  --hl-active: rgba(29, 92, 69, 0.22);
  --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.05);
  --shadow-md: 0 4px 16px rgba(20, 20, 30, 0.08), 0 1px 3px rgba(20, 20, 30, 0.06);
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Lora", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
html, body { margin: 0; height: 100%; }
body { font: 14px/1.55 var(--ui); color: var(--text); background: var(--bg); }
button { font: inherit; color: inherit; }
svg.icon { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; display: block; }
.hidden { display: none !important; }
.muted { color: var(--text-3); font-size: 13px; }
.spacer { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; }

.btn {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  border-radius: 7px; padding: 6px 14px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 13.5px;
  transition: border-color .12s, background .12s;
}
.btn:hover { border-color: var(--text-3); }
.btn.primary { background: var(--text); border-color: var(--text); color: #fff; }
.btn.primary:hover { background: #000; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.accent:hover { background: var(--accent-dark); }
.btn.small { padding: 4px 10px; font-size: 12.5px; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: rgba(0,0,0,.05); color: var(--text); }

.iconbtn {
  border: none; background: transparent; color: var(--text-2); border-radius: 6px;
  padding: 5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.iconbtn:hover { background: rgba(0,0,0,.06); color: var(--text); }

input, textarea {
  font: inherit; border: 1px solid var(--border-strong); border-radius: 7px; padding: 6px 10px;
  width: 100%; background: var(--surface); color: var(--text);
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; }

/* --- sign-in overlay --- */
.overlay { position: fixed; inset: 0; background: rgba(18, 18, 24, 0.4); backdrop-filter: blur(2px); z-index: 100; display: flex; align-items: center; justify-content: center; }
.overlay .card {
  background: var(--surface); border-radius: 14px; padding: 40px 44px; max-width: 400px;
  box-shadow: var(--shadow-md); text-align: center;
}
.overlay .card h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.01em; }
.overlay .card p { color: var(--text-2); margin: 0 0 22px; }
#dev-login { margin-top: 14px; display: flex; gap: 8px; }

/* --- header --- */
#topbar {
  display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 52px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
#topbar .wordmark { font-weight: 650; letter-spacing: -0.02em; text-decoration: none; color: var(--text); font-size: 15px; }
#back-link { color: var(--text-2); text-decoration: none; display: flex; align-items: center; padding: 6px; border-radius: 6px; }
#back-link:hover { background: rgba(0,0,0,.05); color: var(--text); }
#doc-title { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
#conn { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
#conn.on { background: var(--accent); }
#whoami { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#whoami img { width: 24px; height: 24px; border-radius: 50%; }
#whoami a { color: var(--text-3); text-decoration: none; }
#whoami a:hover { color: var(--text); }
#presence { display: flex; }
#presence .avatar {
  width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); margin-left: -6px;
}
#presence .avatar:first-child { margin-left: 0; }

/* toolbar inside header */
#header-tools { display: flex; align-items: center; gap: 1px; margin: 0 8px; overflow-x: auto; scrollbar-width: none; }
#header-tools::-webkit-scrollbar { display: none; }
#header-tools button {
  border: none; background: transparent; border-radius: 6px; padding: 5px 8px; cursor: pointer;
  font-size: 12.5px; color: var(--text-2); min-width: 28px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; flex-shrink: 0;
}
#header-tools button:hover { background: rgba(0,0,0,.06); color: var(--text); }
#header-tools button.on { background: var(--accent-soft); color: var(--accent); }
#header-tools .sep { width: 1px; height: 18px; background: var(--border); margin: 0 5px; flex-shrink: 0; }

/* link popover */
#link-pop {
  position: fixed; z-index: 60; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-md); padding: 10px; width: 320px; display: flex; gap: 6px;
}

/* agents panel */
#agents-pop, #share-pop {
  position: fixed; z-index: 60; right: 14px; top: 58px; width: 340px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 14px 16px;
}
#share-pop { right: 90px; }
#agents-pop h3, #share-pop h3 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); }
#agents-pop .hint, #share-pop .hint { font-size: 12.5px; color: var(--text-2); margin: 0 0 10px; }
#share-form { display: flex; gap: 6px; margin-top: 10px; }
.share-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; }
.share-row .iconbtn { margin-left: auto; }
.key-box {
  margin-top: 10px; border: 1px solid var(--accent); background: var(--accent-soft);
  border-radius: 8px; padding: 10px 12px; font-size: 12.5px;
}
.key-box code { font-family: var(--mono); font-size: 11.5px; word-break: break-all; display: block; margin: 6px 0; }
.key-box .row { margin-top: 6px; }
#agents-pop .hint { font-size: 12.5px; color: var(--text-2); margin: 0 0 10px; }
.agent-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; }
.agent-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.agent-row .dot.on { background: var(--accent); }
.agent-row .handle { font-weight: 600; }
.agent-row .copy { margin-left: auto; }
#agent-form { display: flex; gap: 6px; margin-top: 10px; }

/* --- layout: editor + margin --- */
#layout { max-width: 1560px; margin: 0 auto; padding: 24px 20px 40vh; display: flex; gap: 20px; align-items: flex-start; }
#editor-col { flex: 1; min-width: 0; position: relative; }
#editor {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 44px 52px; min-height: 82vh; box-shadow: var(--shadow-sm);
}
#margin-col { width: 300px; flex-shrink: 0; position: relative; }
#margin-tools { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); margin-bottom: 14px; user-select: none; }
#margin-tools input[type="checkbox"] { width: auto; accent-color: var(--accent); margin: 0; }
#margin-items { position: relative; }

/* --- editor content --- */
.tiptap { outline: none; font-family: var(--serif); font-size: calc(16.5px * var(--doc-zoom, 1)); line-height: 1.75; color: #26262b; }
.tiptap > * + * { margin-top: 0.7em; }
.tiptap p { margin: 0; }
.tiptap h1, .tiptap h2, .tiptap h3 { font-family: var(--ui); letter-spacing: -0.022em; line-height: 1.25; color: var(--text); }
.tiptap h1 { font-size: 2em; font-weight: 700; margin-top: 0.4em; }
.tiptap h2 { font-size: 1.45em; font-weight: 650; margin-top: 1.1em; }
.tiptap h3 { font-size: 1.15em; font-weight: 650; margin-top: 1em; }
.tiptap pre {
  background: #f4f4f6; border-radius: 8px; padding: 14px 16px; font-size: 13.5px;
  overflow-x: auto; font-family: var(--mono); line-height: 1.55;
}
.tiptap code { font-family: var(--mono); font-size: 0.85em; background: #f0f0f3; border-radius: 4px; padding: 0.1em 0.35em; }
.tiptap pre code { background: none; padding: 0; }
.tiptap blockquote { border-left: 2px solid var(--border-strong); margin: 0.7em 0 0; padding-left: 18px; color: var(--text-2); font-style: italic; }
.tiptap a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(29,92,69,.35); text-underline-offset: 2px; }
.tiptap ul, .tiptap ol { padding-left: 1.4em; margin: 0; }
.tiptap li { margin: 0.15em 0; }
.tiptap hr { border: none; border-top: 1px solid var(--border); margin: 1.6em 0; }
.tiptap img { max-width: 100%; border-radius: 8px; display: block; margin: 0.4em 0; }
.tiptap img.ProseMirror-selectednode { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.tiptap .comment-hl { background: var(--hl); border-bottom: 1.5px solid rgba(29,92,69,.5); cursor: pointer; }
.tiptap .comment-hl.active { background: var(--hl-active); }
.tiptap .suggestion-hl { background: transparent; position: relative; }
.tiptap .suggestion-hl::before { content: ''; position: absolute; left: -16px; top: 2px; bottom: 2px; width: 2.5px; background: #99b6ab; }
.tiptap p.is-editor-empty:first-child::before { color: var(--text-3); content: attr(data-placeholder); float: left; height: 0; pointer-events: none; }

/* collaboration carets */
.collaboration-carets__caret { border-left: 1px solid; border-right: 1px solid; margin: 0 -1px; pointer-events: none; word-break: normal; position: relative; }
.collaboration-carets__label {
  border-radius: 3px 3px 3px 0; color: #fff; font-size: 10px; font-weight: 600; font-family: var(--ui);
  left: -1px; line-height: normal; padding: 0.1rem 0.35rem; position: absolute; top: -1.35em; user-select: none; white-space: nowrap;
}

/* --- selection menu --- */
#selection-menu { position: absolute; z-index: 30; display: flex; background: var(--text); border-radius: 8px; box-shadow: var(--shadow-md); overflow: hidden; }
#selection-menu button {
  background: transparent; border: none; color: #fff; padding: 7px 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500;
}
#selection-menu button + button { border-left: 1px solid rgba(255,255,255,.15); }
#selection-menu button:hover { background: rgba(255,255,255,.12); }

/* --- margin cards --- */
.card {
  position: absolute; left: 0; width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; cursor: pointer; transition: top .18s ease, box-shadow .15s, border-color .15s;
  box-shadow: var(--shadow-sm);
}
.card:hover { border-color: var(--border-strong); }
.card.expanded { box-shadow: var(--shadow-md); border-color: var(--accent); cursor: default; z-index: 5; }
.card .head { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-2); }
.card .head .icon { color: var(--text-3); }
.card.expanded .head .icon { color: var(--accent); }
.card .head .who { font-weight: 600; color: var(--text); font-size: 13px; flex-shrink: 0; }
.card .head .who.agent::after { content: "agent"; font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; }
.card .head .preview { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.card .head .when { font-size: 11.5px; color: var(--text-3); flex-shrink: 0; }
.card .body { margin-top: 10px; }
.card blockquote {
  margin: 0 0 10px; padding: 3px 10px; border-left: 2px solid rgba(29,92,69,.55); background: var(--hl);
  font-size: 12.5px; color: var(--text-2); border-radius: 0 6px 6px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
}
.card blockquote.orphaned { border-left-color: var(--border-strong); background: #f4f4f6; text-decoration: line-through; }
.msg { margin: 10px 0; font-size: 13.5px; }
.msg .author { font-weight: 600; font-size: 12.5px; display: flex; align-items: center; gap: 6px; color: var(--text); }
.msg .author .when { font-weight: 400; color: var(--text-3); font-size: 11.5px; }
.msg .author .agent-tag { font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 1px 5px; }
.msg .text { white-space: pre-wrap; word-wrap: break-word; color: var(--text-2); margin-top: 2px; }
.msg .text .mention { color: var(--accent); font-weight: 600; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; border-radius: 999px;
  padding: 2px 9px; margin: 4px 4px 0 0; background: #f0f0f3; color: var(--text-2);
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.chip.claimed::before { background: var(--text); }
.chip.done { background: var(--accent-soft); color: var(--accent); }
.chip.done::before { background: var(--accent); }
.chip.failed { background: #f0f0f3; color: var(--text); text-decoration: line-through; }
.reply-row { display: flex; gap: 6px; margin-top: 10px; }
.reply-row input { font-size: 13px; }
.card .actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; align-items: center; }

/* card header actions (accept / reject — visible even collapsed) */
.card .head .iconbtn { padding: 3px; flex-shrink: 0; }
.card .head .accept-btn { color: var(--accent); }
.card .head .accept-btn:hover { background: var(--accent-soft); }
.card .head .reject-btn:hover { color: var(--text); }

/* inline track-changes in the document */
.tiptap .sugg-del { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--text-3); background: rgba(0,0,0,.045); border-radius: 2px; cursor: pointer; }
.tiptap .sugg-ins {
  color: var(--accent-dark); background: var(--accent-soft); box-shadow: 0 1.5px 0 var(--accent);
  border-radius: 2px; padding: 0 1px; cursor: pointer; white-space: pre-wrap;
}
.tiptap .sugg-del-block { text-decoration: line-through; color: var(--text-3); opacity: 0.75; cursor: pointer; }
.tiptap .sugg-del-block.sugg-del-empty { height: 4px; overflow: hidden; margin-top: 0; }
.tiptap .sugg-ins-block {
  border-left: 2.5px solid var(--accent); background: var(--accent-soft);
  padding: 8px 14px; margin: 0.5em 0; cursor: pointer;
}
.tiptap .sugg-ins-block > * + * { margin-top: 0.4em; }
.tiptap .sugg-ins-block img { max-height: 200px; }

/* the active (clicked) suggestion stands out from its neighbors */
.tiptap .sugg-ins.active { background: #cfe5d9; box-shadow: 0 2px 0 var(--accent); font-weight: 600; }
.tiptap .sugg-del.active { background: rgba(0, 0, 0, 0.1); color: var(--text-2); }
.tiptap .sugg-ins-block.active { background: #d9ebe1; border-left-width: 4px; box-shadow: var(--shadow-sm); }
.tiptap .sugg-del-block.active { opacity: 0.55; background: rgba(0, 0, 0, 0.04); }
.tiptap .suggestion-hl { cursor: pointer; }
.tiptap .suggestion-hl.active::before { width: 3.5px; background: var(--accent); }
.tiptap .suggestion-hl.active { background: rgba(29, 92, 69, 0.045); }

/* zoom control */
#zoom-label { font-size: 11.5px; color: var(--text-3); min-width: 34px; text-align: center; user-select: none; }
.rationale { font-size: 13px; color: var(--text-2); margin-top: 8px; font-style: italic; }
.status-note { font-size: 11.5px; color: var(--text-3); }

/* composers (comment + suggest) — positioned next to the anchored text, like cards */
.composer-box { position: absolute; left: 0; width: 100%; z-index: 6; background: var(--surface); border: 1px solid var(--accent); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 8px; transition: top .18s ease; }
.composer-box textarea, .composer-box input { font-size: 13px; }
.composer-box .row { justify-content: flex-end; }
.composer-box blockquote { margin: 0; padding: 3px 10px; border-left: 2px solid rgba(29,92,69,.55); background: var(--hl); font-size: 12.5px; color: var(--text-2); border-radius: 0 6px 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* mention autocomplete */
.mention-menu { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-md); margin-top: 4px; overflow: hidden; position: relative; z-index: 8; }
.mention-menu div { padding: 6px 12px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 7px; }
.mention-menu div:hover { background: var(--accent-soft); }
.mention-menu .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.mention-menu .dot.on { background: var(--accent); }

/* --- home --- */
.home { max-width: 680px; margin: 0 auto; padding: 48px 24px 120px; }
.home-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.home h1 { font-size: 22px; letter-spacing: -0.02em; margin: 0; }
.home h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin: 44px 0 6px; }
.doc-card {
  display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 8px; text-decoration: none; color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.doc-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.doc-card .title { font-weight: 550; }
.doc-card .meta { margin-left: auto; font-size: 12.5px; color: var(--text-3); }
.doc-card .iconbtn { opacity: 0; transition: opacity .12s; }
.doc-card:hover .iconbtn { opacity: 1; }
.home #agent-form { display: flex; gap: 8px; max-width: 440px; margin-top: 12px; }
.home .agent-row { border-bottom: 1px solid var(--border); padding: 9px 2px; }
.home .agent-row:last-of-type { border-bottom: none; }

@media (max-width: 980px) {
  #layout { flex-direction: column; }
  #margin-col { width: 100%; }
  #margin-items { position: static; }
  .card, .composer-box { position: static; margin-bottom: 10px; }
  #editor { padding: 32px 26px; }
  #doc-title { max-width: 120px; }
}


/* --- pages sidebar --- */
#layout { position: relative; }
#sidebar {
  width: 220px; flex: 0 0 220px; padding: 18px 10px 18px 16px; box-sizing: border-box;
  border-right: 1px solid var(--line); background: var(--bg-2, rgba(0,0,0,0.015));
  overflow-y: auto; font-size: 13.5px;
}
#sidebar.hidden { display: none; }
#sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sidebar-title { font-weight: 600; color: var(--text-2); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
#page-tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
#page-tree > ul { padding-left: 0; }
#page-tree li { margin: 1px 0; }
#page-tree a {
  display: block; padding: 4px 8px; border-radius: 6px; color: var(--text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#page-tree a:hover { background: rgba(29, 92, 69, 0.07); }
#page-tree a.current { background: rgba(29, 92, 69, 0.12); font-weight: 600; }
#page-tree a.ghost-page { color: var(--text-3); font-style: italic; }
#page-tree .unfiled-label { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 10px 0 2px; }
#structure-link {
  display: block; margin-top: 14px; padding: 4px 8px; color: var(--text-3); font-size: 12px;
  text-decoration: none; border-radius: 6px;
}
#structure-link:hover { background: rgba(29, 92, 69, 0.07); color: var(--text-2); }
#structure-link.current { background: rgba(29, 92, 69, 0.12); color: var(--text); }
#sidebar-toggle {
  position: absolute; left: 0; top: 10px; z-index: 5; width: 22px; height: 26px;
  border: 1px solid var(--line); border-left: none; border-radius: 0 6px 6px 0;
  background: var(--paper, #fff); cursor: pointer; color: var(--text-3); font-size: 11px; padding: 0;
}
#sidebar-toggle:hover { color: var(--text); }
#page-add { font-size: 15px; line-height: 1; }


/* --- image layout bubble --- */
#image-bubble {
  position: fixed; z-index: 60; display: flex; align-items: center; gap: 2px;
  background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 8px;
  padding: 3px 5px; box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}
#image-bubble.hidden { display: none; }
#image-bubble .iconbtn { font-size: 12px; min-width: 26px; }
#image-bubble .iconbtn.on { background: rgba(29, 92, 69, 0.14); color: var(--accent); font-weight: 700; }
#image-bubble .sep { width: 1px; height: 16px; background: var(--line); margin: 0 4px; }
.tiptap img[data-align='center'] { display: block; margin-left: auto; margin-right: auto; }
.tiptap img[data-align='right'] { display: block; margin-left: auto; }
.tiptap img[data-align='left'] { display: block; margin-right: auto; }

/* --- suggestion strip inside comment cards --- */
.sugg-strip {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; margin: 0 -1px;
  border-top: 1px dashed var(--line); font-size: 12.5px; cursor: pointer;
  background: rgba(29, 92, 69, 0.035);
}
.sugg-strip.active { background: rgba(29, 92, 69, 0.1); }
.sugg-strip .preview { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-2); }
.sugg-strip .who { font-weight: 600; }
.sugg-strip svg { flex: 0 0 auto; }

/* --- revision chain nav --- */
.chain-nav { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.chain-nav .iconbtn { min-width: 18px; padding: 0 3px; font-size: 13px; }
.chain-nav .iconbtn:disabled { opacity: 0.3; cursor: default; }
.chain-pos { font-size: 11px; color: var(--text-3); min-width: 26px; text-align: center; }

/* thread head resolve button */
.card.thread .head .resolve-btn { color: var(--accent); }


/* --- page-link autocomplete + links --- */
#pagelink-menu { position: fixed; z-index: 70; }
.tiptap a { cursor: pointer; }
#structure-link { display: flex; align-items: center; gap: 6px; }
#structure-link .icon { width: 14px; height: 14px; }


/* narrow screens: the sidebar becomes a slide-over drawer instead of stacking
   above the document (must come after the base #sidebar rules to win) */
@media (max-width: 980px) {
  #sidebar {
    position: fixed; left: 0; top: 49px; bottom: 0; width: 250px; z-index: 45;
    background: var(--surface); border-right: 1px solid var(--line);
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.12);
  }
  #sidebar-toggle { position: fixed; top: 59px; z-index: 46; }
}


/* stale-bundle banner */
#update-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 10px 16px;
  background: #b45309; color: #fff; font-size: 13.5px; text-align: center;
}
#update-banner a { color: #fff; font-weight: 700; }


/* --- diff rendering refinements --- */
/* multi-line insertions: the outer span is a pure container so its inline
   underline can't paint artifacts around block-level children */
.tiptap .sugg-ins.sugg-ins-multi { display: contents; }
.sugg-ins-seg,
.tiptap .sugg-ins-li,
.tiptap .sugg-ins-codeline {
  color: var(--accent-dark); background: var(--accent-soft); box-shadow: 0 1.5px 0 var(--accent);
  border-radius: 2px; padding: 0 1px; cursor: pointer;
}
/* a real list-item, so the marker aligns exactly with native bullets */
.tiptap .sugg-ins-li { display: list-item; list-style: disc outside; margin-top: 2px; width: fit-content; }
.tiptap .sugg-ins-li::marker { color: var(--accent); }
.tiptap .sugg-ins-li.ordered { list-style: none; }
.tiptap .sugg-ins-li.ordered::before { content: '+  '; color: var(--accent); font-weight: 700; }
.tiptap .sugg-ins-codeline { display: block; width: fit-content; white-space: pre; min-height: 1.2em; }
.tiptap .sugg-ins-multi.active .sugg-ins-li,
.tiptap .sugg-ins-multi.active .sugg-ins-seg,
.tiptap .sugg-ins-multi.active .sugg-ins-codeline { background: #cfe5d9; font-weight: 600; }

/* pieces that continue the SAME suggestion (js-assigned) bridge the gap to
   the previous piece's bar — generous: overshoot only ever overlaps this
   suggestion's own bar, never an unrelated one */
.tiptap .suggestion-hl.hl-join::before,
.tiptap .sugg-ins-block.hl-join::before { top: calc(-1.8em - 4px); }
/* insertion panels: accent bar in the gutter, aligned with range bars */
.tiptap .sugg-ins-block { border-left: none; position: relative; }
.tiptap .sugg-ins-block::before {
  content: ''; position: absolute; left: -16px; top: 0; bottom: 0; width: 2.5px; background: #99b6ab;
}
.tiptap .sugg-ins-block.active::before { width: 3.5px; background: var(--accent); }


/* --- hideable comments margin --- */
#margin-col.hidden { display: none; }
#margin-toggle {
  position: absolute; right: 0; top: 10px; z-index: 5; width: 22px; height: 26px;
  border: 1px solid var(--line); border-right: none; border-radius: 6px 0 0 6px;
  background: var(--surface); cursor: pointer; color: var(--text-3); font-size: 11px; padding: 0;
}
#margin-toggle:hover { color: var(--text); }


/* per-page delete: appears on row hover */
#page-tree a { display: flex; align-items: center; }
#page-tree a > .page-del { display: none; margin-left: auto; padding: 0 2px; flex: 0 0 auto; }
#page-tree a:hover > .page-del { display: inline-flex; }
#page-tree .page-del svg { width: 13px; height: 13px; }
#page-tree .page-del:hover { color: #b03030; }


/* --- slug legend on the structure page --- */
#slug-legend {
  margin-top: 14px; padding: 14px 20px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; font-size: 13px;
}
#slug-legend .legend-title { color: var(--text-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
#slug-legend table { border-collapse: collapse; width: 100%; }
#slug-legend th { text-align: left; font-size: 11.5px; color: var(--text-3); font-weight: 600; padding: 4px 12px 4px 0; border-bottom: 1px solid var(--line); }
#slug-legend td { padding: 5px 12px 5px 0; border-bottom: 1px solid var(--line); }
#slug-legend tr:last-child td { border-bottom: none; }
#slug-legend td a { color: var(--text); text-decoration: none; }
#slug-legend td a:hover { text-decoration: underline; }
#slug-legend code {
  background: rgba(0, 0, 0, 0.05); padding: 1px 7px; border-radius: 5px; cursor: pointer;
  font-size: 12px;
}
#slug-legend code:hover { background: rgba(29, 92, 69, 0.12); }
#slug-legend code.copied { background: var(--accent-soft); color: var(--accent); }


/* compact structure page: no phantom card height, hint above the field */
.structure-mode #editor { min-height: 0; padding: 22px 28px; }
#structure-hint {
  margin-bottom: 12px; padding: 10px 14px; font-size: 12.5px; color: var(--text-2);
  background: rgba(29, 92, 69, 0.05); border: 1px solid var(--line); border-radius: 10px;
}


/* --- agents panel alignment --- */
#agents-list .agent-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
#agents-list .agent-row:last-child { border-bottom: none; }
#agents-list .agent-id { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
#agents-list .agent-id .handle { font-weight: 600; font-size: 13px; }
#agents-list .agent-id .owner { font-size: 11px; }
#agents-list .actions { display: flex; gap: 2px; flex: 0 0 auto; }
#agents-list .actions .iconbtn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
#agents-list .actions .iconbtn.on { color: var(--accent); }
#agents-list .actions .iconbtn svg { width: 15px; height: 15px; }
.key-box .key-label { font-size: 12px; color: var(--text-2); }
.key-box .row { display: flex; gap: 6px; flex-wrap: wrap; }
.key-box .row .btn { white-space: nowrap; }


/* --- instant tooltips for icon buttons --- */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); right: -4px;
  background: #223029; color: #fff; font-size: 11.5px; line-height: 1.35;
  padding: 5px 9px; border-radius: 7px; width: max-content; max-width: 240px;
  white-space: normal; text-align: left; z-index: 95; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
[data-tip].tip-below:hover::after { bottom: auto; top: calc(100% + 7px); }


/* --- task lists --- */
.tiptap ul[data-type='taskList'] { list-style: none; padding-left: 4px; margin: 0.4em 0; }
.tiptap ul[data-type='taskList'] li { display: flex; align-items: flex-start; gap: 8px; margin: 3px 0; }
.tiptap ul[data-type='taskList'] li > label { margin-top: 2px; flex: 0 0 auto; }
.tiptap ul[data-type='taskList'] li > div { flex: 1; }
.tiptap ul[data-type='taskList'] input[type='checkbox'] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.tiptap ul[data-type='taskList'] li[data-checked='true'] > div { color: var(--text-3); text-decoration: line-through; }
/* task lists rendered in suggestion insertion panels */
.sugg-ins-block ul[data-type='taskList'] { list-style: none; padding-left: 0; }
.sugg-ins-block .task-item { display: flex; align-items: flex-start; gap: 8px; }
.sugg-ins-block .task-item.checked > span { color: var(--text-3); text-decoration: line-through; }

/* --- tables --- */
.tiptap table, .sugg-ins-block table { border-collapse: collapse; width: 100%; margin: 0.6em 0; font-size: 0.95em; table-layout: fixed; overflow: hidden; }
.tiptap th, .tiptap td, .sugg-ins-block th, .sugg-ins-block td {
  border: 1px solid var(--border-strong); padding: 6px 10px; vertical-align: top; text-align: left;
}
.tiptap th, .sugg-ins-block th { background: rgba(0,0,0,0.035); font-weight: 650; }
.tiptap td p, .tiptap th p { margin: 0; }
.tiptap .selectedCell:after {
  content: ''; position: absolute; inset: 0; background: rgba(29,92,69,0.12); pointer-events: none;
}
.tiptap td, .tiptap th { position: relative; }


/* --- table controls bar --- */
#table-controls {
  position: fixed; z-index: 60; display: flex; align-items: center; gap: 2px;
  background: var(--paper, #fff); border: 1px solid var(--line); border-radius: 8px;
  padding: 3px 5px; box-shadow: 0 4px 18px rgba(0,0,0,0.12);
}
#table-controls.hidden { display: none; }
#table-controls .iconbtn { font-size: 11.5px; padding: 3px 7px; white-space: nowrap; }
#table-controls .iconbtn.danger:hover { color: #b03030; }
#table-controls .sep { width: 1px; height: 16px; background: var(--line); margin: 0 3px; }


/* --- proposed new pages --- */
#page-tree a.pending-page { color: var(--text-2); border: 1px dashed var(--line); border-radius: 6px; }
#page-tree a.pending-page .pending-badge {
  display: inline-block; margin-left: 6px; font-size: 10px; padding: 0 5px; border-radius: 5px;
  background: rgba(29,92,69,0.1); color: var(--accent); vertical-align: middle;
}
#proposal-view.hidden { display: none; }
#proposal-view {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  min-height: 78vh; box-shadow: var(--shadow-sm); overflow: hidden;
}
.proposal-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--line); background: rgba(29,92,69,0.04);
}
.proposal-meta { font-size: 13px; color: var(--text-2); }
.proposal-actions { display: flex; gap: 8px; }
.proposal-content { padding: 32px 44px; }
.proposal-content::before {
  content: 'Preview of the proposed page — accept to create it'; display: block;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); margin-bottom: 16px;
}