/* B3 Library live documents: the document page inside the Library item page.
   Builds on design-foundation.css tokens and library.css; nothing here
   restyles shared components. */

.lib-preview.lib-doc-host { max-height:none; overflow:visible; padding:0; border:0; background:transparent; }
.lib-doc { display:flex; flex-direction:column; gap:var(--space-3); }
.lib-doc-bar { display:flex; align-items:center; gap:var(--space-3); min-height:40px; padding:0 0 10px; border-bottom:1px solid var(--line); }
.lib-doc-presence { display:flex; align-items:center; }
.lib-doc-presence:empty { display:none; }
.lib-doc-person { width:26px; height:26px; margin-left:-6px; display:grid; place-items:center; border-radius:999px; border:2px solid var(--panel); color:#fff; font-size:var(--text-2xs); font-weight:600; letter-spacing:.02em; }
.lib-doc-person:first-child { margin-left:0; }
.lib-doc-person.more { background:var(--quiet); color:var(--ink-2); }
.lib-doc-status { color:var(--ink-3); font-size:var(--text-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.lib-doc-tools { margin-left:auto; display:flex; align-items:center; gap:var(--space-2); }
.lib-doc-export { position:relative; }
.lib-doc-export > summary { list-style:none; display:inline-flex; align-items:center; gap:var(--space-1); }
.lib-doc-export > summary::-webkit-details-marker { display:none; }
.lib-doc-export > summary svg { width:14px; height:14px; }
.lib-doc-export .library-option-actions { right:0; min-width:150px; }
.lib-doc-export .library-option-actions .btn { justify-content:flex-start; }
.lib-doc-notice:empty { display:none; }

.lib-doc-body { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; align-items:start; }
.lib-doc-body.with-side { grid-template-columns:minmax(0,1fr) 300px; }
.lib-doc-editor, .lib-doc-fallback { min-width:0; max-width:760px; }
.lib-doc-fallback { padding:8px 0; }

/* The document itself: quiet, readable, Notion-like. */
.lib-doc-prose { outline:none; min-height:45vh; padding:6px 0 48px; color:var(--ink); font-size:16px; line-height:1.65; overflow-wrap:anywhere; }
.lib-doc-prose > * + * { margin-top:.6em; }
.lib-doc-prose p { margin:0; }
.lib-doc-prose h1, .lib-doc-prose h2, .lib-doc-prose h3, .lib-doc-prose h4 { margin:1.3em 0 .3em; line-height:1.3; font-weight:650; }
.lib-doc-prose h1 { font-size:1.75em; }
.lib-doc-prose h2 { font-size:1.4em; }
.lib-doc-prose h3 { font-size:1.18em; }
.lib-doc-prose > :first-child { margin-top:0; }
.lib-doc-prose ul, .lib-doc-prose ol { padding-left:1.5em; margin:.4em 0; }
.lib-doc-prose li > p { margin:0; }
.lib-doc-prose blockquote { margin:.6em 0; padding-left:14px; border-left:3px solid var(--line-2); color:var(--ink-2); }
.lib-doc-prose code { padding:1px 5px; border-radius:5px; background:var(--quiet); font-size:.9em; }
.lib-doc-prose pre { padding:12px 14px; border-radius:10px; background:var(--quiet); overflow:auto; }
.lib-doc-prose pre code { padding:0; background:transparent; }
.lib-doc-prose hr { border:0; border-top:1px solid var(--line); margin:1.4em 0; }
.lib-doc-prose a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.lib-doc-readonly .lib-doc-prose { cursor:default; }
.lib-mention { color:var(--accent); font-weight:500; white-space:nowrap; }

/* Suggestions (agent edits waiting for review) and comment anchors. */
.lib-sugg-insertion, .lib-doc-diff ins { color:var(--green); background:var(--green-soft); text-decoration:underline; text-underline-offset:3px; }
.lib-sugg-deletion, .lib-doc-diff del { color:var(--red); background:var(--red-soft); text-decoration:line-through; }
[data-block-suggestion="insertion"] { box-shadow:inset 3px 0 0 var(--green); background:var(--green-soft); padding-left:10px; border-radius:4px; }
[data-block-suggestion="deletion"] { box-shadow:inset 3px 0 0 var(--red); background:var(--red-soft); padding-left:10px; border-radius:4px; color:var(--ink-3); text-decoration:line-through; }
.lib-doc-diff ins.block, .lib-doc-diff del.block { display:block; padding-left:10px; margin:.4em 0; border-radius:4px; }
.lib-doc-diff ins.block { box-shadow:inset 3px 0 0 var(--green); }
.lib-doc-diff del.block { box-shadow:inset 3px 0 0 var(--red); }
.lib-comment { background:var(--amber-soft); border-bottom:2px solid var(--amber); cursor:pointer; }
.lib-comment.active { background:color-mix(in srgb, var(--amber) 32%, transparent); }

/* Other people's cursors (labels are set with textContent). */
.lib-caret { position:relative; margin:0 -1px; border-left:2px solid; border-right:0; word-break:normal; pointer-events:none; }
.lib-caret-label { position:absolute; top:-1.45em; left:-2px; padding:1px 6px; border-radius:5px 5px 5px 0; color:#fff; font-size:var(--text-2xs); font-weight:600; line-height:1.4; white-space:nowrap; user-select:none; }

/* Selection toolbar and @ dropdown. */
.lib-doc-bubble { display:flex; gap:2px; padding:4px; border:1px solid var(--line-2); border-radius:10px; background:var(--panel); box-shadow:0 8px 24px rgba(15,23,42,.14); z-index:40; }
.lib-doc-bubble button { min-width:30px; height:30px; display:grid; place-items:center; padding:0 8px; border:0; border-radius:7px; background:transparent; color:var(--ink); font:inherit; font-size:var(--text-md); cursor:pointer; }
.lib-doc-bubble button:hover { background:var(--hover); }
.lib-doc-bubble button svg { width:15px; height:15px; }
.lib-doc-bubble button[hidden] { display:none; }
.lib-mention-menu { position:fixed; z-index:60; min-width:220px; max-width:280px; padding:4px; border:1px solid var(--line-2); border-radius:10px; background:var(--panel); box-shadow:0 10px 28px rgba(15,23,42,.16); }
.lib-mention-option { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:7px 10px; border:0; border-radius:7px; background:transparent; color:var(--ink); font:inherit; font-size:var(--text-md); text-align:left; cursor:pointer; }
.lib-mention-option.active, .lib-mention-option:hover { background:var(--hover); }

/* Versions dialog. */
.lib-doc-version-list { list-style:none; margin:0; padding:0; }
.lib-doc-version-list li { display:flex; align-items:center; gap:var(--space-3); padding:10px 0; border-bottom:1px solid var(--line); }
.lib-doc-version-list .grow { display:flex; flex-direction:column; min-width:0; flex:1; }
.lib-doc-version-actions { display:flex; gap:6px; flex:none; }
.lib-doc-versions h3 { margin:18px 0 4px; font-size:var(--text-md); }
.lib-doc-diff { margin-top:16px; padding:14px; border:1px solid var(--line); border-radius:12px; max-height:45vh; overflow:auto; }

@media (max-width: 900px) {
  .lib-doc-body.with-side { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 600px) {
  .lib-doc-bar { flex-wrap:wrap; gap:var(--space-2); }
  .lib-doc-tools { margin-left:0; width:100%; }
  .lib-doc-prose { font-size:16px; min-height:40vh; }
  .lib-doc-version-list li { flex-wrap:wrap; }
  .lib-doc-version-actions { width:100%; }
}

/* B3-2: review side panel (agent suggestions, comments) and Mentions. */
.lib-doc-readonly .lib-doc-bubble [data-fmt] { display:none; }
.lib-doc-bubble [data-comment] { font-weight:600; }
.lib-doc-host { position:relative; }
.lib-doc-comment-float { position:absolute; z-index:40; box-shadow:0 8px 24px rgba(15,23,42,.14); }
.lib-doc-comment-float[hidden] { display:none; }
.lib-doc-side { position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto; }
.lib-review { display:flex; flex-direction:column; gap:var(--space-3); }
.lib-review-tabs { display:flex; gap:var(--space-1); border-bottom:1px solid var(--line); }
.lib-review-tabs button { padding:8px 10px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--ink-2); font:inherit; font-size:var(--text-md); cursor:pointer; }
.lib-review-tabs button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }
.lib-review-count:not(:empty) { margin-left:4px; padding:0 6px; border-radius:999px; background:var(--quiet); color:var(--ink-2); font-size:var(--text-xs); }
.lib-review-panel { display:flex; flex-direction:column; gap:10px; }
.lib-review-card { display:flex; flex-direction:column; gap:var(--space-2); padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.lib-review-card.focused { border-color:var(--amber); }
.lib-review-card header { display:flex; flex-direction:column; gap:2px; }
.lib-review-actions { display:flex; flex-wrap:wrap; gap:6px; }
.lib-sugg-list, .lib-comment-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.lib-sugg-row { display:flex; align-items:flex-start; gap:6px; }
.lib-sugg-text { flex:1; min-width:0; padding:4px 6px; border:0; border-radius:7px; background:transparent; color:var(--ink); font:inherit; font-size:var(--text-sm); text-align:left; overflow-wrap:anywhere; cursor:pointer; }
.lib-sugg-text:hover { background:var(--hover); }
.lib-sugg-text ins { color:var(--green); background:var(--green-soft); text-decoration:underline; }
.lib-sugg-text del { color:var(--red); background:var(--red-soft); }
.lib-sugg-actions { display:flex; gap:var(--space-1); flex:none; }
.lib-sugg-actions .btn { min-width:30px; padding:0 8px; justify-content:center; }
.lib-sugg-actions svg { width:14px; height:14px; }
.lib-thread-quote { display:block; width:100%; padding:2px 0 2px 10px; border:0; border-left:3px solid var(--amber); background:transparent; color:var(--ink-2); font:inherit; font-size:var(--text-sm); text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; cursor:pointer; max-height:5.4em; overflow:hidden; }
.lib-comment-item.system .lib-comment-body { color:var(--ink-3); font-size:var(--text-sm); }
.lib-comment-meta { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; font-size:var(--text-sm); }
.lib-comment-own { margin-left:auto; display:flex; gap:var(--space-2); }
.lib-comment-body { font-size:var(--text-md); overflow-wrap:anywhere; }
.linklike { padding:0; border:0; background:transparent; color:var(--ink-3); font:inherit; font-size:var(--text-xs); cursor:pointer; }
.linklike:hover { color:var(--ink); text-decoration:underline; }
.lib-composer { position:relative; display:flex; flex-direction:column; gap:6px; }
.lib-composer textarea { width:100%; min-height:72px; padding:8px 10px; border:1px solid var(--line-2); border-radius:9px; background:var(--quiet); color:var(--ink); font:inherit; font-size:var(--text-md); resize:vertical; }
.lib-composer-menu { position:absolute; top:100%; left:0; }
.lib-resolved > summary { cursor:pointer; color:var(--ink-2); font-size:var(--text-sm); padding:4px 0; }
.lib-resolved .lib-review-card { margin-top:8px; opacity:.85; }
.lib-rail-count { margin-left:auto; min-width:20px; padding:0 6px; border-radius:999px; background:var(--ink); color:var(--panel); font-size:var(--text-xs); font-weight:600; line-height:20px; text-align:center; }
.lib-rail-item .lib-rail-count { flex:none; }
.lib-mention-list { list-style:none; margin:0; padding:0; }
.lib-mention-row a { display:flex; flex-direction:column; gap:2px; padding:12px 10px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; border-radius:8px; }
.lib-mention-row a:hover { background:var(--hover); }
.lib-mention-row.unread .lib-mention-line::before { content:''; display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--accent); vertical-align:middle; }
@media (max-width: 900px) {
  .lib-doc-side { position:static; max-height:none; }
}