body { font: 16px/1.5 system-ui, sans-serif; margin: 0; color: #1c1c1c; }
header, main { padding: 0.75rem 1.5rem; }
header { border-bottom: 1px solid #ddd; display: flex; gap: 1rem; align-items: baseline; }
.banner { background: #fff6d6; border: 1px solid #e6d28a; padding: 0.5rem 0.75rem; border-radius: 4px; }
.body { max-width: 42rem; }

.editor-layout { display: grid; grid-template-columns: 16rem minmax(0, 44rem) 20rem; gap: 1.5rem; justify-content: center; }
.editor-layout > aside { min-height: 8rem; }
.doc-title { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.75rem; font-weight: 600; border: 0; border-bottom: 1px solid #ddd; padding: 0.25rem 0; margin-bottom: 1rem; }
#editor .ProseMirror { min-height: 20rem; outline: none; }
#save-status { color: #666; font-size: 0.875rem; }

/* Reading page: outline | body | chat */
.read-layout { display: grid; grid-template-columns: 15rem minmax(0, 42rem) 22rem; gap: 1.5rem; justify-content: center; align-items: start; }
.outline { position: sticky; top: 1rem; font-size: 0.875rem; }
.outline ul { list-style: none; padding: 0; margin: 0; }
.outline li { padding: 0.25rem 0; }
.outline-sub { padding-left: 0.75rem; }
.outline-count, .outline-note { color: #777; font-size: 0.8125rem; }
.outline-new { color: #8a4b00; font-weight: 600; }
.outline-chat { text-decoration: none; }
.chat-panel { position: sticky; top: 1rem; display: flex; flex-direction: column; max-height: calc(100vh - 2rem); }
.chat-tabs { display: flex; gap: 0.25rem; align-items: baseline; border-bottom: 1px solid #ddd; }
.chat-tab { padding: 0.35rem 0.6rem; text-decoration: none; color: #555; border-bottom: 2px solid transparent; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-tab[aria-selected="true"] { color: #1c1c1c; border-bottom-color: #1c1c1c; }
.chat-pin { margin-left: auto; font-size: 0.8125rem; color: #666; }

/* Chat: one column, like a conversation */
.chat { display: flex; flex-direction: column; min-height: 0; }
.chat-label { margin: 0.5rem 0; color: #8a4b00; font-size: 0.8125rem; }
.messages { overflow-y: auto; max-height: 28rem; padding: 0.5rem 0; }
.chat-empty { color: #888; }
.msg { display: flex; gap: 0.6rem; padding: 0.35rem 0.5rem; border-radius: 6px; }
.msg-own { background: #f4f4f2; }
.avatar { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #d9d4c7; color: #3b3626; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 600; }
.msg-main { min-width: 0; }
.msg-name { font-weight: 600; }
.msg-time { color: #888; font-size: 0.75rem; text-decoration: none; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-removed { color: #888; font-style: italic; }
.mention { background: #fff1c9; border-radius: 3px; padding: 0 0.15rem; text-decoration: none; }
.day-divider { display: flex; align-items: center; gap: 0.75rem; color: #888; font-size: 0.75rem; margin: 0.75rem 0 0.25rem; }
.day-divider::before, .day-divider::after { content: ""; flex: 1; border-top: 1px solid #e4e4e0; }
.quote { margin: 0.35rem 0; padding: 0.4rem 0.75rem; background: #faf6ec; border-left: 3px solid #d8c9a0; font-family: Georgia, "Times New Roman", serif; }
.quote p { margin: 0; }
.quote-source { font: 0.75rem system-ui, sans-serif; color: #777; margin-top: 0.25rem; }
.ref-note { margin-left: 0.5rem; color: #8a4b00; }
.typing { min-height: 1.25rem; margin: 0.25rem 0.5rem; color: #777; font-size: 0.8125rem; font-style: italic; }
.composer { display: flex; gap: 0.5rem; align-items: flex-end; margin-top: 0.5rem; }
.composer textarea { flex: 1; font: inherit; resize: vertical; padding: 0.4rem 0.5rem; }
.space-chat { max-width: 40rem; }

/* Threads */
.thread-link { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; font-size: 0.8125rem; color: #2a5db0; text-decoration: none; }
.reply-avatar { width: 1.25rem; height: 1.25rem; font-size: 0.6875rem; margin-right: -0.25rem; }
.thread-panel { border-left: 1px solid #ddd; padding-left: 0.75rem; display: flex; flex-direction: column; }
.thread-head { display: flex; justify-content: space-between; align-items: baseline; }
.thread-count { margin: 0.5rem 0.5rem 0; color: #888; font-size: 0.75rem; }
.cited-divider { display: flex; align-items: center; gap: 0.75rem; color: #8a4b00; font-size: 0.75rem; margin: 0.5rem 0; }
.cited-divider::before, .cited-divider::after { content: ""; flex: 1; border-top: 1px dashed #d8c9a0; }

/* Discussion marks: underlines only, nothing in the margin */
.mark { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.mark-talked { text-decoration-color: #e3d6ae; }
.mark-new { text-decoration-color: #b8860b; }
.mark-earlier { text-decoration-style: dashed; text-decoration-color: #b9a98a; }
.mark-tip { position: absolute; z-index: 10; max-width: 20rem; padding: 0.4rem 0.6rem; background: #fff; border: 1px solid #d8d2c0; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); font-size: 0.8125rem; }
.mark-tip-who { color: #555; }
.mark-tip-latest { margin-top: 0.15rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* Selection toolbar */
#sel-toolbar { position: absolute; z-index: 10; display: flex; gap: 0.25rem; padding: 0.25rem; background: #1c1c1c; border-radius: 6px; }
#sel-toolbar button { font: 0.8125rem system-ui, sans-serif; color: #fff; background: transparent; border: 0; padding: 0.25rem 0.5rem; cursor: pointer; }
#sel-toolbar button:hover { background: #3a3a3a; border-radius: 4px; }

/* A quote waiting above the composer */
.composer { flex-wrap: wrap; }
.quote-slot { flex: 0 0 100%; }
.quote-slot:empty { display: none; }
.quote-remove { font-size: 0.75rem; background: none; border: 0; color: #777; cursor: pointer; padding: 0; }
.nav-refs { margin-left: 1rem; }
.badge { background: #8a4b00; color: #fff; border-radius: 999px; padding: 0 0.4rem; font-size: 0.75rem; }
.ack-name { color: #555; }
.ack { margin-left: 0.15rem; }
.react-control { display: inline-flex; gap: 0.25rem; margin: 0.15rem 0; }
.react { background: none; border: 1px solid #ddd; border-radius: 999px; padding: 0 0.45rem; font-size: 0.8rem; cursor: pointer; }
.react.on { background: #f3ead2; border-color: #d8c9a0; }
.refs-inbox { list-style: none; padding: 0; }
.ref-item { border-bottom: 1px solid #eee; padding: 0.5rem 0; }
.ref-new { border-left: 3px solid #8a4b00; padding-left: 0.5rem; }
.pocket-title { font-size: 0.875rem; margin: 0 0 0.5rem; }
.pocket-list { list-style: none; margin: 0; padding: 0; }
.pocket-clip { border: 1px solid #e2e2e2; border-radius: 6px; padding: 0.5rem; margin-bottom: 0.5rem; font-size: 0.8125rem; }
.pocket-clip[draggable="true"] { cursor: grab; }
.pocket-label { margin: 0 0 0.25rem; color: #555; }
.pocket-type { margin-left: 0.25rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: #888; }
.pocket-text { margin: 0; }
.pocket-shell { margin: 0; font-style: italic; color: #777; }
.thread-actions form { display: inline; }

/* Quote and cite: markers beside blocks, the destination chooser, the editor's suggestion lists */
.linklike { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.block-marker { position: absolute; z-index: 9; width: 24px; }
.block-marker button { font: 0.8125rem system-ui, sans-serif; width: 24px; padding: 0.125rem 0; color: #888; background: #fff; border: 1px solid #e2e2e2; border-radius: 4px; cursor: pointer; }
.block-marker button:hover { color: #1c1c1c; border-color: #bbb; }
.marker-menu { position: absolute; z-index: 10; display: flex; gap: 0.25rem; padding: 0.25rem; background: #1c1c1c; border-radius: 6px; }
.marker-menu[hidden], .block-marker[hidden] { display: none; }
.marker-menu button { font: 0.8125rem system-ui, sans-serif; color: #fff; background: transparent; border: 0; padding: 0.25rem 0.5rem; cursor: pointer; }
.marker-menu button:hover { background: #3a3a3a; border-radius: 4px; }
.destination { position: absolute; z-index: 11; min-width: 14rem; max-width: 22rem; padding: 0.5rem; background: #fff; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); font: 0.875rem system-ui, sans-serif; }
.destination-title { margin: 0 0 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: #777; }
.destination-list { list-style: none; margin: 0; padding: 0; }
.destination-list button { display: block; width: 100%; text-align: left; font: inherit; padding: 0.25rem 0.5rem; background: none; border: 0; border-radius: 4px; cursor: pointer; }
.destination-list button:hover { background: #f0f0f0; }
.destination-note { margin: 0 0 0.25rem; }
.suggest-list { position: absolute; z-index: 12; min-width: 16rem; max-width: 26rem; max-height: 18rem; overflow: auto; margin: 0; padding: 0.25rem; list-style: none; background: #fff; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); font: 0.875rem system-ui, sans-serif; }
.suggest-list li { padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; }
.suggest-list li[aria-selected="true"] { background: #e8f0fe; }
.suggest-kind { display: inline-block; margin-right: 0.375rem; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: #888; }
.suggest-snippet { display: block; font-size: 0.75rem; color: #666; }
.suggest-empty { color: #888; cursor: default; }

/* Picking chat messages */
.msg-picked { background: #e8f0fb; outline: 1px solid #9db8e0; }
.selection-bar { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem 0.75rem; background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); z-index: 20; }
.selection-bar[hidden] { display: none; }
.selection-bar .primary { font-weight: 600; }
.selection-note { color: #a33; font-size: 0.85rem; }
.origin-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0.25rem 0 0.5rem; font-size: 0.8rem; }
.origin-chip { padding: 0.1rem 0.6rem; border: 1px solid #d8d8d0; border-radius: 999px; background: #faf9f5; }
.origin-change { border-style: dashed; color: #7a5b00; }