client/app.css

/* Inter, served from this origin. It used to come from fonts.googleapis.com,
   which meant two extra TLS handshakes and a render-blocking stylesheet on a
   third party before the page could paint anything — including the skeleton.
   Latin + latin-ext only; anything else falls back down the stack in --ui. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }
:root {
  color-scheme: light;
  --bg: #f9fbfd;   /* Docs' canvas behind the page */
  --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);
  /* --line and --paper were used in 14 places without ever being defined, so
     those borders silently never rendered */
  --line: var(--border);
  --paper: var(--surface);
  --page: #ffffff;          /* the document sheet */
  --page-shadow: 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --input-bg: #ffffff;
  --tint: rgba(0, 0, 0, 0.05);        /* neutral hover/fill over a surface */
  --tint-strong: rgba(0, 0, 0, 0.12);
  --hl-weak: rgba(29, 92, 69, 0.06);  /* accent washes: nav hover, strips, bars */
  --hl-edge: rgba(29, 92, 69, 0.55);  /* the rule beside quoted/commented text */
  --scrim: rgba(18, 18, 24, 0.4);
  --danger: #b03030;
  --chip-bg: #f0f0f3;
  --menu-solid: var(--text);          /* the dark selection bubble */
  --tooltip-bg: #223029;
  --on-primary: #ffffff;              /* text on a filled primary button */
  --primary-hover: #000000;
  --ins-active: #cfe5d9;              /* suggestion insertions, focused */
  --ins-block-active: #d9ebe1;
  --del-bg: rgba(0, 0, 0, 0.045);     /* suggestion deletions */
  --del-bg-active: rgba(0, 0, 0, 0.1);
  --sugg-bar: #99b6ab;                /* the range bar in the page margin */
  --doc-text: #000000;                /* the document's own ink */
  --doc-text-2: #434343;
  --doc-text-3: #666666;
  --doc-rule: #d0d0d0;                /* dividers, blockquote bar */
  --table-rule: #000000;              /* Docs draws table cells in black */
  --code-bg: #f1f3f4;
  --code-block-bg: #f8f9fa;
  --code-block-border: #e0e3e7;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* the document itself is Google Docs' default: Arial 11pt. Liberation Sans and
     Arimo are the metric-compatible stand-ins on Linux. */
  --doc: Arial, "Liberation Sans", Arimo, Helvetica, sans-serif;
  --doc-size: 14.6667px;   /* 11pt at 96dpi */
  --doc-line: 1.15;        /* Docs' default line spacing for Normal text */
  --page-w: 8.5in;         /* US Letter, like a default Docs page */
  --page-pad: 1in;         /* Docs' default margins */
  --canvas: #f9fbfd;       /* the grey-blue surround behind the page */
  --doc-link: #1155cc;     /* Docs' link blue */
  --mono: "Courier New", Courier, ui-monospace, monospace;
}
/* min-height, NOT height: with height:100% the body box is exactly one viewport
   tall, which is also the sticky containing block — the header would then scroll
   away for good after the first screenful. */
html, body { margin: 0; min-height: 100%; }
html { -webkit-text-size-adjust: 100%; }
/* NB: never put overflow-x on html/body — it turns the body into its own
   scrollport and breaks the sticky header again. Runaway width is clipped on
   the layout containers instead. */
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: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--on-primary); }
.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: var(--tint); 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: var(--tint); 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: var(--scrim); 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: var(--tint); 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: 0; margin: 0 4px; overflow-x: auto; scrollbar-width: none; }
#header-tools::-webkit-scrollbar { display: none; }
#header-tools button {
  border: none; background: transparent; border-radius: 6px; padding: 5px 6px; cursor: pointer;
  font-size: 12.5px; color: var(--text-2); min-width: 26px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; flex-shrink: 0;
}
#header-tools button:hover { background: var(--tint); 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 3px; 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; }
/* the sheet: letter width, 1in margins, Docs' soft drop shadow, square corners */
#editor {
  background: var(--page); border: none; border-radius: 0;
  /* the sheet keeps Docs' geometry at every zoom level — 8.5in wide, 1in
     margins, 6.5in of text; zoom stays a text-size control, since magnifying
     the sheet itself would need a horizontal scroller beside the comments */
  width: 100%; max-width: var(--page-w); margin: 0 auto;
  padding: var(--page-pad); min-height: 11in;
  box-shadow: var(--page-shadow);
}
#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; }

/* mobile-only chrome: hidden on desktop, revealed in the phone media query */
.phone-only { display: none !important; }
#margin-head { display: none; }

/* long comment/rationale bodies are clamped to a readable height with a
   "Show more" toggle (js adds .clamped once it measures an overflow) */
.msg .text.clamped, .rationale.clamped { max-height: 9.5em; overflow: hidden; position: relative; }
.msg .text.clamped::after, .rationale.clamped::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--surface) 85%);
  pointer-events: none;
}
.more-btn {
  border: none; background: transparent; padding: 2px 0; margin-top: 2px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--accent);
}
.more-btn:hover { text-decoration: underline; }

/* --- editor content --- */
/* Google Docs' defaults: Arial 11pt, line spacing 1.15, no space between
   paragraphs, and headings at regular weight (Docs does not bold them) — sizes
   and the padding-before/after pattern follow Docs' own exported stylesheet. */
.tiptap { outline: none; font-family: var(--doc); font-size: calc(var(--doc-size) * var(--doc-zoom, 1)); line-height: var(--doc-line); color: var(--doc-text); }
.tiptap > * + * { margin-top: 0; }
.tiptap p { margin: 0; }
.tiptap h1, .tiptap h2, .tiptap h3, .tiptap h4, .tiptap h5, .tiptap h6 {
  font-family: var(--doc); font-weight: 400; line-height: var(--doc-line); letter-spacing: normal; color: var(--doc-text);
}
.tiptap h1 { font-size: 1.818em; margin: 1.212em 0 0.364em; }   /* 20pt, 20pt before / 6pt after */
.tiptap h2 { font-size: 1.455em; margin: 1.091em 0 0.364em; }   /* 16pt, 18pt / 6pt */
.tiptap h3 { font-size: 1.273em; margin: 0.970em 0 0.242em; color: var(--doc-text-2); }  /* 14pt, 16pt / 4pt */
.tiptap h4 { font-size: 1.091em; margin: 0.848em 0 0.242em; color: var(--doc-text-3); }
.tiptap h5 { font-size: 1em; margin: 0.848em 0 0.242em; color: var(--doc-text-3); }
.tiptap h6 { font-size: 1em; font-style: italic; margin: 0.848em 0 0.242em; color: var(--doc-text-3); }
/* the page's opening heading reads as Docs' Title style (26pt) */
.tiptap > h1:first-child { font-size: 2.364em; margin-top: 0; margin-bottom: 0.182em; }
/* Docs has no code block; keep ours but in its monospace (Courier New) */
.tiptap pre {
  background: var(--code-block-bg); border: 1px solid var(--code-block-border); border-radius: 2px; padding: 10px 12px; font-size: 0.95em;
  overflow-x: auto; font-family: var(--mono); line-height: 1.35;
}
.tiptap code { font-family: var(--mono); font-size: 0.95em; background: var(--code-bg); border-radius: 2px; padding: 0 0.2em; }
.tiptap pre code { background: none; padding: 0; }
.tiptap blockquote { border-left: 3px solid var(--doc-rule); margin: 0; padding-left: 18pt; color: inherit; font-style: normal; }
.tiptap a { color: var(--doc-link); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 1px; }
/* Docs indents list text to 0.5in (36pt) with the marker sitting inside it */
.tiptap ul, .tiptap ol { padding-left: 36pt; margin: 0; }
.tiptap li { margin: 0; }
.tiptap li > p { margin: 0; }
.tiptap hr { border: none; border-top: 1px solid var(--doc-rule); margin: 0.75em 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 var(--hl-edge); 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: var(--sugg-bar); }
.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(--menu-solid); 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; }
/* the head preview is a teaser for the collapsed card — once open, the body
   shows the same rationale/message in full, so repeating it is just noise */
.card.expanded .head .preview { display: none; }
.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 var(--hl-edge); 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: var(--tint); 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: var(--chip-bg); 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: var(--chip-bg); color: var(--text); text-decoration: line-through; }
.reply-row { display: flex; gap: 6px; margin-top: 10px; }
.reply-row textarea {
  font-size: 13px; resize: none; overflow-y: auto; min-height: 32px;
  line-height: 1.45; /* one line at rest, grows to ~4 with Shift+Enter */
}
.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: var(--del-bg); 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: var(--ins-active); box-shadow: 0 2px 0 var(--accent); font-weight: 600; }
.tiptap .sugg-del.active { background: var(--del-bg-active); color: var(--text-2); }
.tiptap .sugg-ins-block.active { background: var(--ins-block-active); border-left-width: 4px; box-shadow: var(--shadow-sm); }
.tiptap .sugg-del-block.active { opacity: 0.55; background: var(--del-bg); }
.tiptap .suggestion-hl { cursor: pointer; }
.tiptap .suggestion-hl.active::before { width: 3.5px; background: var(--accent); }
.tiptap .suggestion-hl.active { background: var(--hl-weak); }

/* 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 var(--hl-edge); 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, .mention-menu div.selected { background: var(--accent-soft); }
.mention-menu div.selected { box-shadow: inset 2px 0 0 var(--accent); }
.mention-menu .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.mention-menu .dot.on { background: var(--accent); }

/* editing / suggesting switch — the header's mode control, like Docs' pencil */
/* the theme toggle is icon-only in the header; the label is for the ⋯ sheet */
#theme-btn .lbl { display: none; }

#mode-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--tint); flex-shrink: 0; }
#mode-switch button {
  border: none; background: none; cursor: pointer; border-radius: 999px;
  padding: 4px 9px; font: inherit; font-size: 12.5px; color: var(--text-3); white-space: nowrap;
}
#mode-switch button:hover { color: var(--text); }
#mode-switch button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 550; }
/* suggesting mode: the document is read-only, so the text cursor would lie */
body.suggesting .tiptap { caret-color: transparent; cursor: default; }

/* --- math (KaTeX) ----------------------------------------------------------
   Formulas are atoms: one click opens the LaTeX source in an input, because the
   source is what round-trips to markdown and what agents propose. */
.math-inline { display: inline; border-radius: 3px; }
.math-block {
  display: block; margin: 0.75em 0; text-align: center;
  padding: 4px 0; overflow-x: auto; overflow-y: hidden;
}
/* only the formula itself is clickable — a display block is as wide as the
   text column, and clicking empty space beside it must still move the caret */
/* manipulation: suppresses double-tap-to-zoom, so a double TAP reliably opens
   the source editor on a phone instead of zooming the page */
.math-view { cursor: pointer; border-radius: 3px; padding: 0 2px; touch-action: manipulation; }
.math-block .math-view { display: inline-block; }
.math-view:hover { background: var(--hl-weak); }
.math-inline.selected .math-view, .math-block.selected .math-view { background: var(--hl); outline: 1px solid var(--hl-edge); }
/* before KaTeX lands (and if it never does) the source stays readable */
.math-view.math-raw { font-family: var(--mono); font-size: 0.92em; color: var(--text-2); }
.math-view.math-empty { font-family: var(--ui); font-size: 0.85em; color: var(--text-3); }
/* the source editor: shown in place of the rendering, never both */
.math-src { display: none; }
.math-inline.editing .math-view, .math-block.editing .math-view { display: none; }
.math-inline.editing .math-src, .math-block.editing .math-src {
  display: inline-block; font-family: var(--mono); font-size: 0.92em;
  border: 1px solid var(--accent); border-radius: 4px; padding: 1px 5px;
  background: var(--input-bg); color: var(--text); outline: none; min-width: 60px;
}
.math-block.editing .math-src { display: block; margin: 0 auto; width: min(100%, 46em); text-align: center; }
.math-tool-label { font-family: var(--doc); font-size: 15px; line-height: 1; }
/* KaTeX renders its own colours; only the surroundings are ours */
.katex { font-size: 1.06em; }
.katex-display { margin: 0; }

/* --- loading skeletons -----------------------------------------------------
   Shown from the first paint (they are in the HTML, not built by JS) so a slow
   load looks like it is working rather than finished-and-empty. */
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.sk-line, .sk-card {
  background: var(--tint);
  border-radius: 6px;
  animation: sk-pulse 1.4s ease-in-out infinite;
}
/* An opaque stand-in sheet with the real sheet's geometry, laid over the live
   editor rather than replacing it — the editor stays mounted and measurable, so
   card positions and zoom are already right when the skeleton lifts. */
#doc-skeleton {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none;
  width: 100%; max-width: var(--page-w); margin: 0 auto;
  padding: var(--page-pad); min-height: 11in;
  background: var(--page); box-shadow: var(--page-shadow);
}
#doc-skeleton.hidden { display: none !important; }
#doc-skeleton .sk-line { height: 0.85em; margin-bottom: 0.9em; }
#doc-skeleton .sk-title { height: 1.9em; width: 55%; margin-bottom: 1.6em; }
#doc-skeleton .sk-gap { margin-top: 2em; }
.sk-line.w40 { width: 40%; } .sk-line.w70 { width: 70%; } .sk-line.w75 { width: 75%; }
.sk-line.w80 { width: 80%; } .sk-line.w82 { width: 82%; } .sk-line.w88 { width: 88%; } .sk-line.w90 { width: 90%; }
#docs-list.loading { display: flex; flex-direction: column; gap: 10px; }
#docs-list.loading .sk-card { height: 62px; border-radius: 12px; }
/* animation off for anyone who asked for less motion — the block still shows */
@media (prefers-reduced-motion: reduce) { .sk-line, .sk-card { animation: none; } }

/* --- dark theme -----------------------------------------------------------
   A head script stamps data-theme on <html> (stored choice, else the OS
   setting) before first paint, so there is no light flash and no duplicated
   media-query block. Everything below is a variable override — no layout,
   no per-component dark rules. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121213;
  --canvas: #121213;
  --surface: #1f1f22;
  --page: #1b1b1c;
  --border: #35353a;
  --border-strong: #4b4b52;
  --text: #e4e4e7;
  --text-2: #b3b3bb;
  --text-3: #85858e;
  --accent: #74c2a0;
  --accent-dark: #94d7b8;
  --accent-soft: rgba(116, 194, 160, 0.16);
  --hl: rgba(116, 194, 160, 0.17);
  --hl-active: rgba(116, 194, 160, 0.32);
  --hl-weak: rgba(116, 194, 160, 0.09);
  --hl-edge: rgba(116, 194, 160, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
  --page-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.55);
  --input-bg: #26262a;
  --tint: rgba(255, 255, 255, 0.07);
  --tint-strong: rgba(255, 255, 255, 0.16);
  --scrim: rgba(0, 0, 0, 0.62);
  --danger: #f28b82;
  --chip-bg: #30303a;
  --menu-solid: #2f3136;
  --tooltip-bg: #34363c;
  --on-primary: #17171a;
  --primary-hover: #ffffff;
  --ins-active: rgba(116, 194, 160, 0.32);
  --ins-block-active: rgba(116, 194, 160, 0.22);
  --del-bg: rgba(255, 255, 255, 0.08);
  --del-bg-active: rgba(255, 255, 255, 0.15);
  --sugg-bar: #5f9a83;
  /* the document's own ink, on Docs' dark page */
  --doc-text: #e8e8e6;
  --doc-text-2: #c3c3c1;
  --doc-text-3: #a7a7a5;
  --doc-rule: #55555a;
  --table-rule: #6a6a70;
  --doc-link: #8ab4f8;
  --code-bg: #2b2b30;
  --code-block-bg: #26262b;
  --code-block-border: #3a3a40;
}

/* --- 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; }



/* --- 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: var(--hl-weak); }
#page-tree a.current { background: var(--hl); 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: var(--hl-weak); color: var(--text-2); }
#structure-link.current { background: var(--hl); 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: var(--hl); 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: var(--hl-weak);
}
.sugg-strip.active { background: var(--hl); }
.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; }




/* 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: var(--ins-active); 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: var(--sugg-bar);
}
.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: var(--danger); }


/* --- 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: var(--tint); padding: 1px 7px; border-radius: 5px; cursor: pointer;
  font-size: 12px;
}
#slug-legend code:hover { background: var(--hl); }
#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: var(--hl-weak); 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: var(--tooltip-bg); 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.4em 0; font-size: 1em; table-layout: fixed; overflow: hidden; }
/* Docs draws a 1pt dark rule and pads cells ~5pt; no shaded header row */
.tiptap th, .tiptap td, .sugg-ins-block th, .sugg-ins-block td {
  border: 1px solid var(--table-rule); padding: 5pt 7pt; vertical-align: top; text-align: left;
}
.tiptap th, .sugg-ins-block th { background: none; font-weight: 700; }
.tiptap td p, .tiptap th p { margin: 0; }
.tiptap .selectedCell:after {
  content: ''; position: absolute; inset: 0; background: var(--hl); 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: var(--danger); }
#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: var(--hl); color: var(--accent); vertical-align: middle;
}
#proposal-view.hidden { display: none; }
#proposal-view {
  background: var(--surface); border: none; border-radius: 0;
  width: 100%; max-width: var(--page-w); margin: 0 auto;
  min-height: 78vh; box-shadow: var(--page-shadow); 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: var(--hl-weak);
}
.proposal-meta { font-size: 13px; color: var(--text-2); }
.proposal-actions { display: flex; gap: 8px; }
.proposal-content { padding: var(--page-pad); }
.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;
}

/* --- HTML embeds (sandboxed iframe) --- */
.html-embed-wrap { position: relative; margin: 0.6em 0; }
.tiptap .html-embed, .proposal-content .html-embed {
  /* keeps a light canvas in either theme — the embed's HTML is not ours to re-colour */
  width: 100%; border: 1px solid var(--border); border-radius: 8px; background: #fff;
  display: block; min-height: 24px;
  /* content-box so the JS-set height is the inner viewport exactly — with
     border-box the 1px borders shrink the viewport below the content and
     produce a 2px vertical scrollbar */
  box-sizing: content-box;
}
.html-embed-wrap.ProseMirror-selectednode { outline: 3px solid var(--accent-soft); outline-offset: 2px; border-radius: 8px; }
.html-embed-edit {
  position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity .12s;
  font-size: 12px; padding: 3px 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
}
.html-embed-wrap:hover .html-embed-edit { opacity: 1; }
.html-embed-edit:hover { color: var(--text); border-color: var(--text-3); }

/* embed authoring modal */
.embed-overlay {
  position: fixed; inset: 0; z-index: 120; background: rgba(18,18,24,.4); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
}
.embed-overlay-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  width: min(760px, 92vw); padding: 20px; box-shadow: 0 16px 48px rgba(0,0,0,.22);
}
.embed-overlay-title { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.embed-overlay-hint { font-size: 12.5px; color: var(--text-3); margin-bottom: 12px; }
.embed-overlay-ta {
  width: 100%; height: 300px; resize: vertical; font: 13px/1.55 var(--mono, ui-monospace, monospace);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px; background: var(--input-bg); color: var(--text);
}
.embed-overlay-bar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }


/* ============================================================
   Narrow windows (≤980px: phones, tablets, split-screen). There is no
   room for three columns, so the page tree becomes a slide-over drawer
   and the comments become a bottom sheet over the document. Stacking
   them *under* the document instead would hide every card behind a
   full page scroll.
   ============================================================ */
@media (max-width: 980px) {
  #layout { gap: 0; }
  #margin-head { display: flex; }

  /* the formatting toolbar gets its own full-width row: sharing one row with
     the title and the actions squeezed the title down to "Pl…" */
  #topbar { flex-wrap: wrap; align-content: center; height: auto; min-height: 52px; }
  #doc-title { max-width: 42vw; }
  #header-tools {
    order: 10; flex-basis: 100%; width: 100%; margin: 0;
    padding: 3px 0 1px; border-top: 1px solid var(--border);
  }

  /* --- pages drawer --- */
  #sidebar {
    position: fixed; left: 0; top: var(--hdr-h, 50px); bottom: 0; width: 270px;
    z-index: 49; padding: 16px 12px 24px;
    background: var(--surface); box-shadow: 6px 0 28px rgba(0, 0, 0, 0.18);
  }
  #sidebar-head { margin-bottom: 10px; gap: 6px; }
  /* the tabs live inside #layout, which scrolls: pin them to the viewport so
     the drawer and the sheet stay one tap away at any scroll position */
  #sidebar-toggle, #margin-toggle { position: fixed; top: calc(var(--hdr-h, 52px) + 10px); z-index: 47; }
  #margin-toggle { right: 0; }
  #scrim { position: fixed; inset: 0; z-index: 48; background: var(--scrim); }
  #scrim.hidden { display: none; }

  /* --- comments: bottom sheet --- */
  /* the open sheet hides the bottom ~3/4 of the viewport: without extra trailing
     space the end of the document could never be scrolled into the visible strip */
  body.sheet-open #layout { padding-bottom: 82vh; }
  #margin-col {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto;
    max-height: 74vh; z-index: 55; display: flex; flex-direction: column; padding: 0;
    background: var(--surface); border-top: 1px solid var(--border-strong);
    border-radius: 16px 16px 0 0; box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.2);
    transition: transform .22s ease;
  }
  /* kept in the layout (so counts/measurements stay live) but slid away */
  #margin-col.hidden { display: flex !important; transform: translateY(105%); pointer-events: none; }
  #margin-head {
    align-items: center; gap: 8px; padding: 10px 8px 6px 16px; position: relative;
    border-bottom: 1px solid var(--border);
  }
  #margin-grab {
    position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 2px; background: var(--border-strong);
  }
  #margin-head-title { font-weight: 650; font-size: 14px; flex: 1; }
  #margin-close { min-width: 38px; height: 38px; }
  #margin-tools { margin: 0; padding: 8px 16px 0; font-size: 13px; }
  #margin-items {
    flex: 1; min-height: 0 !important; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; padding: 12px 14px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .margin-empty { padding: 4px 4px 12px; }
  .card, .composer-box { position: static !important; top: auto !important; width: 100%; margin-bottom: 10px; }
  .card { padding: 12px 14px; }
  /* the preview drops to its own full-width line instead of being squeezed to
     "Adds …" between the author and the accept/reject buttons */
  .card .head { gap: 8px; flex-wrap: wrap; row-gap: 4px; }
  .card .head .preview {
    order: 10; flex: 1 0 100%; font-size: 13px; white-space: normal; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .card .head .when { margin-left: auto; }
  .sugg-strip { flex-wrap: wrap; row-gap: 4px; padding: 8px 10px; }
  .sugg-strip .preview { order: 10; flex: 1 0 100%; white-space: normal; }
  .card .head .iconbtn { min-width: 36px; height: 36px; padding: 6px; }
  .msg { font-size: 14.5px; }
  .msg .text.clamped, .rationale.clamped { max-height: 12em; }
  .chip { font-size: 12px; padding: 4px 10px; }
  .reply-row { gap: 8px; }
  .card .actions .btn, .composer-box .btn { padding: 9px 14px; font-size: 14px; }

}

/* ============================================================
   Phones (≤700px), on top of the ≤980 rules above: a compact single-row
   header with the crowded-out controls in a ⋯ sheet, the formatting bar as
   a toggleable second row, a full-bleed document and touch-sized targets.
   ============================================================ */
@media (max-width: 700px) {
  .phone-only { display: inline-flex !important; }

  /* --- header: one compact row --- */
  #topbar {
    height: 50px; min-height: 50px; gap: 2px; padding: 0 6px;
    /* wrap is what lets the formatting strip become a second row */
    flex-wrap: wrap; align-content: center; z-index: 50;
  }
  #back-link { padding: 8px 4px; }
  #doc-title { flex: 1; min-width: 0; max-width: none; font-size: 15px; margin-left: 2px; }
  #conn { margin-right: 2px; }
  /* moved into the ⋯ sheet by js, or simply not worth the width. Scoped to the
     document shell: the home page header has no ⋯ menu to move them into. */
  .page-doc #presence, .page-doc #whoami,
  .page-doc #share-btn, .page-doc #agents-btn, .page-doc #reset-btn { display: none; }
  #topbar .iconbtn { min-width: 40px; height: 40px; border-radius: 9px; }
  #m-fmt { font-weight: 700; font-size: 14px; letter-spacing: -0.02em; }
  #m-more { font-size: 20px; line-height: 1; padding-bottom: 6px; }
  #topbar .iconbtn.on { background: var(--accent-soft); color: var(--accent); }
  /* unread/total comment count on the comments button */
  #m-comments { position: relative; }
  #m-comments .count {
    position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: 8px; background: var(--accent); color: var(--on-primary);
    font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
  }

  /* formatting toolbar: a second header row, revealed by the Aa button.
     It scrolls horizontally instead of squeezing the header. */
  #header-tools { display: none; }
  body.fmt-open #topbar { height: auto; padding-bottom: 5px; }
  body.fmt-open #header-tools {
    display: flex; order: 10; flex-basis: 100%; width: 100%; margin: 0;
    gap: 2px; padding-top: 2px; border-top: 1px solid var(--border);
    overflow-x: auto; overscroll-behavior-x: contain;
  }
  #header-tools button { min-width: 40px; height: 38px; font-size: 13.5px; }
  #header-tools .sep { height: 22px; }
  #zoom-label { min-width: 40px; font-size: 12.5px; }

  /* --- popovers become near-fullwidth sheets under the header --- */
  #share-pop, #agents-pop, #more-pop {
    position: fixed; left: 8px; right: 8px; top: calc(var(--hdr-h, 50px) + 6px);
    width: auto; max-height: calc(100vh - var(--hdr-h, 50px) - 20px);
    overflow-y: auto; z-index: 60; -webkit-overflow-scrolling: touch;
  }
  #link-pop { left: 8px !important; right: 8px; width: auto; top: calc(var(--hdr-h, 50px) + 6px) !important; }
  #more-pop {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-md); padding: 6px;
  }
  #more-pop.hidden { display: none !important; }
  #more-pop .btn, #more-pop #whoami, #more-pop .row {
    display: flex !important; width: 100%; justify-content: flex-start;
    padding: 11px 12px; border: none; border-radius: 9px; font-size: 15px; background: transparent;
  }
  #more-pop .btn + .btn { margin-top: 1px; }
  #more-pop .btn:hover { background: var(--tint); }
  #more-pop #whoami { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 12px; gap: 8px; }
  #more-pop .pop-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); padding: 8px 12px 4px; }

  /* --- layout: document full-bleed --- */
  #layout { padding: 0 0 32vh; gap: 0; overflow-x: clip; }
  #editor, #doc-skeleton {
    padding: 22px 16px 40px; border-radius: 0; border-left: none; border-right: none;
    min-height: 70vh; box-shadow: none;
  }
  .structure-mode #editor { padding: 16px 14px; }
  #proposal-view { border-radius: 0; border-left: none; border-right: none; }
  .proposal-content { padding: 20px 16px; }
  .proposal-bar { padding: 12px 14px; }
  /* 11pt is uncomfortably small on a handset — nudged up, still Arial/1.15 */
  .tiptap { font-size: calc(16px * var(--doc-zoom, 1)); }
  .tiptap pre { font-size: 13px; padding: 10px; }
  /* wide content scrolls inside itself rather than widening the page */
  .tiptap table, .sugg-ins-block table { display: block; overflow-x: auto; white-space: nowrap; }
  .tiptap .suggestion-hl::before, .tiptap .sugg-ins-block::before { left: -8px; }

  /* phone-sized drawer + sheet touch targets */
  #sidebar { width: min(84vw, 300px); padding: 14px 12px 24px; font-size: 15px; }
  #sidebar-head .iconbtn { min-width: 38px; height: 38px; }
  #page-tree a { padding: 10px 10px; border-radius: 8px; }
  #page-tree a > .page-del { display: inline-flex; padding: 6px; }
  #page-tree .page-del svg { width: 16px; height: 16px; }
  #structure-link { padding: 10px; font-size: 13.5px; }
  /* the desktop edge tabs are replaced by real header buttons */
  #sidebar-toggle, #margin-toggle { display: none; }
  #margin-items { padding: 10px 12px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .card { padding: 12px 14px; }

  /* 16px+ inputs: anything smaller makes iOS Safari zoom in on focus */
  input, textarea, .composer-box textarea, .composer-box input, .reply-row textarea { font-size: 16px; }
  #suggest-text { min-height: 30vh; }

  /* --- selection menu: thumb-sized --- */
  #selection-menu { border-radius: 10px; }
  #selection-menu button { padding: 12px 18px; font-size: 15px; }

  /* --- floating bubbles --- */
  #image-bubble, #table-controls { max-width: calc(100vw - 16px); overflow-x: auto; }
  #image-bubble .iconbtn, #table-controls .iconbtn { min-width: 34px; height: 34px; }

  /* theme + mode controls ride the ⋯ sheet on a phone, where the header is full */
  #more-pop #theme-btn { width: 100%; justify-content: flex-start; gap: 10px; padding: 11px 12px; height: auto; font-size: 14px; }
  #more-pop #theme-btn .lbl { display: inline; }
  /* the mode switch rides the ⋯ sheet on a phone, where the header is full */
  #more-pop #mode-switch { margin: 4px 8px 6px; justify-content: center; }
  #more-pop #mode-switch button { flex: 1; padding: 9px 12px; font-size: 13.5px; }

  /* --- home --- */
  .home { padding: 24px 16px 80px; }
  .home-head { flex-wrap: wrap; gap: 10px; }
  .home h1 { font-size: 20px; }
  .home h2 { margin-top: 32px; }
  .doc-card { padding: 14px; gap: 10px; }
  .doc-card .iconbtn { opacity: 1; min-width: 38px; height: 38px; }
  .home #agent-form { flex-wrap: wrap; }
  .home #agent-form .btn { padding: 10px 16px; }
  .overlay .card { padding: 28px 22px; margin: 0 14px; }
  .key-box .row .btn { flex: 1; justify-content: center; }

  /* hover tooltips are useless on touch and stick around after a tap */
  [data-tip]:hover::after { display: none; }
}


@media (hover: none) {
  [data-tip]:hover::after { display: none; }
}