/* ───────────────────────────────────────────────────────────────
   notes-doc.css — Document · Sources · Cards (notes redesign)
   Ported from design-mockups/desktop-notes-mockup.html, scoped under
   .notes-doc-root so it never leaks into the rest of the app. Dark mode
   via .notes-doc-root[data-mode="dark"], mirroring notes-canvas.css.
─────────────────────────────────────────────────────────────── */
.notes-doc-root{
  /* Gist paper + pens (see styles.css :root) */
  --paper:#f5f4f0; --paper-2:#efeee9; --paper-3:#e6e4dd;
  --card:#fcfcfa; --line:#dedcd5; --line-soft:#e9e7e1;
  --ink:#1b1b19; --ink-2:#3d3c38; --ink-3:#6b6963; --ink-soft:#8e8c85;
  --blue:#2a4b8d; --red:#b3261e; --green:#2f7a43; --orange:#b8621b; --pink:#b23a6e;
  --accent:#2a4b8d; --on-accent:#fcfcfa;
  --hl-yellow:#f3df6c; --hl-green:#bfe6ae; --hl-pink:#f6c1d6; --hl-blue:#bcd6f3;
  --nd-sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --nd-serif:"Literata","Iowan Old Style",Georgia,serif;
  --radius:6px; --shadow:0 1px 2px rgba(27,27,25,.06),0 10px 28px -14px rgba(27,27,25,.22);

  position:absolute; inset:0;
  display:grid; grid-template-columns:248px 1fr 340px; overflow:hidden;
  background:var(--paper); color:var(--ink);
  font-family:var(--nd-sans); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.notes-doc-root.no-side{grid-template-columns:0 1fr 340px}
.notes-doc-root.no-source{grid-template-columns:248px 1fr 0}
.notes-doc-root.no-side.no-source{grid-template-columns:0 1fr 0}
.notes-doc-root *{box-sizing:border-box}
.notes-doc-root button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.notes-doc-root ::selection{background:var(--hl-yellow)}
.notes-doc-root [hidden]{display:none!important}

/* ── Topbar ── */
.nd-topbar{height:44px;flex:none;display:flex;align-items:center;gap:8px;padding:0 14px;
  border-bottom:1px solid var(--line);background:color-mix(in oklab,var(--paper) 88%,transparent);backdrop-filter:blur(6px)}
.nd-crumb{flex:0 1 auto;min-width:36px;display:flex;align-items:baseline;gap:5px;font-size:13px;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-crumb b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.nd-crumb-sub{color:var(--ink-3);font-weight:400;flex:none}
.nd-topbar-grow{flex:1 1 auto;min-width:8px}
.nd-topbar .nd-seg button{padding:4px 10px}
.nd-topbar .nd-pill{padding:5px 9px}
.nd-preview-chip{flex:none;margin-left:9px;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--orange);background:color-mix(in oklab,var(--orange) 16%,transparent);
  border:1px solid color-mix(in oklab,var(--orange) 40%,transparent);padding:2px 9px;border-radius:20px;white-space:nowrap}
.nd-backchat{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--on-accent);
  background:var(--accent);border:1px solid var(--accent);padding:7px 13px;border-radius:9px;flex:none}
.nd-backchat:hover{filter:brightness(.95)}
.nd-seg{display:flex;background:var(--paper-3);border-radius:9px;padding:3px;gap:2px;flex:none}
.nd-seg button{padding:5px 12px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--ink-3)}
.nd-seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.nd-seg button:disabled{opacity:.45;cursor:not-allowed}
.nd-seg-docview{margin-right:6px}
.nd-pill{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;font-size:12.5px;
  font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--ink-2);flex:none}
.nd-pill:hover{border-color:var(--ink-soft)}
.nd-pill.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ── Columns (sidebar | main | source) ── */
.nd-main{display:flex;flex-direction:column;overflow:hidden;background:var(--paper);min-width:0}

/* ── Left sidebar (subjects → notebooks) ── */
.side{background:var(--paper-2);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;min-width:0}
.notes-doc-root.no-side .side{border-right:none}
.side-top{padding:16px 16px 10px;display:flex;align-items:center;gap:9px}
.logo{width:26px;height:26px;border-radius:7px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:800;font-size:14px;cursor:pointer;flex:none}
.brand{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{display:block;font-weight:500;color:var(--ink-3);font-size:11px;margin-top:1px}
.side-collapse{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3);font-size:16px;flex:none}
.side-collapse:hover{background:var(--paper-3);color:var(--ink-2)}
.side-search{margin:4px 12px 8px;display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:var(--ink-3)}
.side-search input{border:none;background:none;outline:none;font-family:inherit;font-size:13px;color:var(--ink);width:100%}
.tree{flex:1;overflow:auto;padding:6px 8px 16px}
.tree-section{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding:12px 8px 4px;font-weight:600}
.subj{margin-bottom:2px}
.subj-head,.page-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:7px;font-size:13.5px;color:var(--ink-2);user-select:none;cursor:pointer}
.subj-head{font-weight:600;color:var(--ink)}
.subj-head:hover,.page-item:hover{background:var(--paper-3)}
.subj-caret{font-size:10px;color:var(--ink-3);transition:transform .15s;width:12px;display:inline-block;text-align:center}
.subj.collapsed .subj-caret{transform:rotate(-90deg)}
.subj.collapsed .pages{display:none}
.subj-dot{width:8px;height:8px;border-radius:50%;flex:none}
.pages{margin:1px 0 4px 14px;padding-left:8px;border-left:1px solid var(--line)}
.page-item{padding-left:8px}
.page-item .pg-ico{font-size:13px;width:16px;text-align:center;color:var(--ink-3);flex:none}
.page-item.active{background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-weight:600}
.page-item.active .pg-ico{color:var(--accent)}
.side-foot{padding:10px 12px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.side-foot .av{width:24px;height:24px;border-radius:50%;background:var(--blue);color:var(--on-accent);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}

/* ── Document ── */
.doc-scroll{flex:1;overflow:auto;padding:38px 0 160px}
.nd-doc{max-width:740px;margin:0 auto;padding:0 56px;width:100%}
.nd-doc.study .reveal .tg-children{display:none}
.nd-doc.study .reveal>.tg-head .reveal-hint{display:inline-flex}
.doc-title{font-family:var(--nd-serif);font-size:36px;font-weight:700;line-height:1.15;outline:none;margin:8px 0 4px;color:var(--ink)}
.doc-meta{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:12.5px;margin-bottom:6px}
.doc-meta .tag{background:var(--paper-3);padding:2px 9px;border-radius:20px;font-weight:600;color:var(--ink-2)}
.doc-rule{height:1px;background:var(--line);margin:14px 0 8px}
.nd-callout{display:flex;gap:10px;align-items:flex-start;background:var(--hl-blue);
  border-radius:10px;padding:10px 13px;margin:10px 0 4px;font-size:13px;color:var(--ink-2)}
.nd-callout b{color:var(--blue)}

/* ── Blocks ── */
.block{position:relative;padding:3px 0;margin-left:-44px;padding-left:44px}
.block-tools{position:absolute;left:0;top:3px;display:flex;gap:1px;opacity:0;transition:opacity .12s}
.block:hover>.block-tools{opacity:1}
.btool{width:20px;height:24px;display:grid;place-items:center;color:var(--ink-soft);border-radius:5px;font-size:14px}
.btool:hover{background:var(--paper-3);color:var(--ink-2)}
.btool.grip{cursor:grab}
.btool.grip:active{cursor:grabbing}
/* drag-to-move / drag-to-embed indicators */
.block.dragging{opacity:.4}
.block.drop-before:after,
.block.drop-after:after{content:"";position:absolute;left:44px;right:0;height:2px;
  background:var(--blue);border-radius:2px;pointer-events:none;z-index:2}
.block.drop-before:after{top:0}
.block.drop-after:after{bottom:0}
.block.drop-inside{box-shadow:inset 0 0 0 2px var(--blue);border-radius:8px;
  background:color-mix(in oklab,var(--blue) 7%,transparent)}
.block-content{outline:none;min-height:1.5em}
.block-content:empty:focus::before,
.nd-blocks > .block:first-child > .block-content:empty::before{content:attr(data-ph);color:var(--ink-soft);pointer-events:none;
  white-space:pre-line;line-height:1.7}
.b-heading .block-content{font-family:var(--nd-serif);font-size:20px;font-weight:700;margin-top:10px}
.b-text .block-content{font-size:15.5px;color:var(--ink-2)}
.b-bullet .block-content{position:relative;padding-left:22px}
.b-bullet .block-content:before{content:"•";position:absolute;left:6px;color:var(--accent);font-weight:700}
.nd-blocks{counter-reset:ol}
.b-numbered .block-content{position:relative;padding-left:26px}
.b-numbered .block-content:before{counter-increment:ol;content:counter(ol) ".";position:absolute;left:2px;color:var(--accent);font-weight:700}
/* generic indent wrapper for nested children (Tab to indent any block) */
.blk-children{margin:2px 0 2px 9px;padding-left:14px;border-left:1px solid var(--line-soft);counter-reset:ol}
.b-quote{border-left:3px solid var(--accent);background:var(--card);border-radius:0 8px 8px 0;padding:10px 14px 10px 44px;box-shadow:var(--shadow)}
.b-quote .block-content{font-family:var(--nd-serif);font-style:italic;color:var(--ink-2)}
/* Reference notes blend in like a normal block — only the page pill marks them */
.b-quote.b-ref{border-left:none;background:none;box-shadow:none;border-radius:0;padding:3px 0 3px 44px}
.b-quote.b-ref .block-content{font-family:inherit;font-style:normal}
.src-pill{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-style:normal;font-family:var(--nd-sans);
  font-size:11px;font-weight:600;color:var(--blue);background:var(--hl-blue);padding:3px 9px;border-radius:20px;cursor:pointer;user-select:none}
.src-pill:hover{filter:brightness(.97)}
.notes-doc-root mark{padding:1px 1px;border-radius:3px}
.notes-doc-root mark.y{background:var(--hl-yellow)} .notes-doc-root mark.g{background:var(--hl-green)}
.notes-doc-root mark.p{background:var(--hl-pink)} .notes-doc-root mark.b{background:var(--hl-blue)}

/* ── Toggles (plain — caret + text, no card or special colour) ── */
.tg{margin:0;padding:0;background:none;border:none}
.tg-head{display:flex;align-items:flex-start;gap:6px;font-weight:400;color:var(--ink-2)}
.tg-caret{flex:none;width:22px;height:1.6em;display:grid;place-items:center;background:none;border:none;
  color:var(--ink-2);cursor:pointer;transition:transform .15s;user-select:none;transform:rotate(90deg)}
.tg-caret::before{content:"";width:0;height:0;border-style:solid;
  border-width:6px 0 6px 9px;border-color:transparent transparent transparent currentColor}
.tg-caret:hover{color:var(--ink)}
.tg.collapsed .tg-caret{transform:rotate(0deg)}
.tg-children{margin:2px 0 2px 9px;padding-left:14px;border-left:1px solid var(--line-soft)}
.tg.collapsed .tg-children{display:none}
.tg-head .block-content{flex:1}
.reveal-hint{display:none;align-items:center;font-weight:600;font-size:11px;color:var(--accent);
  background:var(--paper-2);padding:2px 9px;border-radius:14px;margin-left:8px}
.tg.collapsed .reveal-hint{display:inline-flex}
/* AI mix-up/recall variants render plain too (classes kept for study-mode logic) */
.tg.reveal,.tg.mixup{border:none;background:none}
.tg.mixup .tg-head{color:var(--ink-2)}
.tg.mixup .tg-caret{background:none;border:none;color:var(--ink-3)}
.tg.mixup .tg-children,.tg.reveal .tg-children{border-left-color:var(--line-soft)}
.chip{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:20px;margin-left:8px;vertical-align:middle}
.chip.red{background:var(--red);color:var(--on-accent)}
.chip.ai{background:var(--blue);color:var(--on-accent)}
.chip.rev{background:var(--green);color:var(--on-accent)}

/* comparison table */
.cmp{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin:6px 0;background:var(--card)}
.cmp .row{display:grid;grid-template-columns:140px 1fr 1fr;border-top:1px solid var(--line-soft)}
.cmp .row:first-child{border-top:none}
.cmp .row.head{background:var(--paper-2);font-weight:700;font-size:12.5px}
.cmp .cell{padding:8px 11px;font-size:13.5px;border-left:1px solid var(--line-soft)}
.cmp .cell:first-child{border-left:none;font-weight:600;color:var(--ink-2)}
.ck{color:var(--green);font-weight:700}.cx{color:var(--red);font-weight:700}

/* editable table block */
.nd-table-wrap{position:relative;margin:6px 0;padding-right:22px;padding-bottom:22px}
.nd-table{display:grid;border:1px solid var(--line);border-radius:9px;overflow:visible;background:var(--card)}
.nd-table .tcell{position:relative;padding:8px 11px;font-size:13.5px;color:var(--ink-2);
  border-left:1px solid var(--line-soft);border-top:1px solid var(--line-soft)}
.nd-table .tcell.thead{background:var(--paper-2);font-weight:700;font-size:12.5px;color:var(--ink);border-top:none;padding-right:26px}
.nd-table .tcell-edit{outline:none;min-height:1.2em}
.nd-table .tcell-edit:empty:focus:before{content:"…";color:var(--ink-soft)}
.tbl-del{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--paper);
  font-size:12px;line-height:1;display:grid;place-items:center;opacity:0;transition:opacity .12s;z-index:6;cursor:pointer}
.nd-table .tcell:hover>.tbl-del{opacity:.9}
.tbl-del:hover{background:var(--accent);opacity:1}
.tbl-delcol{top:50%;right:5px;left:auto;transform:translateY(-50%)}
.tbl-delrow{left:-9px;top:50%;transform:translateY(-50%)}
.tbl-add{position:absolute;display:grid;place-items:center;color:var(--ink-soft);z-index:2;
  border:1px dashed var(--line);border-radius:6px;font-size:13px;background:var(--card);opacity:0;transition:opacity .12s}
.nd-table-wrap:hover .tbl-add{opacity:1}
.tbl-add:hover{color:var(--accent);border-color:var(--accent)}
.tbl-addcol{top:0;right:0;width:18px;bottom:22px}
.tbl-addrow{left:0;bottom:0;height:18px;right:22px}

/* ── Slash ── */
.nd-slash{position:fixed;z-index:50;width:268px;background:var(--card);border:1px solid var(--line);
  border-radius:11px;box-shadow:0 12px 40px rgba(27,27,25,.18);padding:6px}
.slash-h{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);padding:6px 8px 3px}
.slash-item{display:flex;align-items:center;gap:11px;padding:8px;border-radius:8px;cursor:pointer}
.slash-item:hover,.slash-item.sel{background:var(--paper-3)}
.slash-ico{width:30px;height:30px;border-radius:7px;background:var(--paper-2);display:grid;place-items:center;font-size:15px}
.slash-item b{font-size:13.5px;display:block;font-weight:600}
.slash-item span{font-size:11.5px;color:var(--ink-3)}

/* block menu (six-dot grip click) */
.nd-blockmenu{width:208px}
.nd-blockmenu .slash-item span{display:none}
.bm-sep{height:1px;background:var(--line);margin:5px 4px}
.slash-item.danger b{color:var(--red)}
.slash-item.danger:hover,.slash-item.danger.sel{background:color-mix(in oklab,var(--red) 12%,transparent)}
.bm-colorrow{display:flex;gap:5px;padding:4px 8px;flex-wrap:wrap}
.bm-sw{width:22px;height:22px;border-radius:6px;border:1px solid var(--line);cursor:pointer;
  display:grid;place-items:center;font-size:12px;font-weight:700;line-height:1;background:var(--card)}
.bm-sw:hover{outline:2px solid var(--blue);outline-offset:1px}
.bm-sw.bm-text.nd-c-default{color:var(--ink)}
.bm-sw.bm-bg.nd-bg-default{background:var(--card)}

/* ── Per-block colours (text + background) ── */
/* text colour scoped under .notes-doc-root so it beats `.b-text .block-content` etc. */
.notes-doc-root .nd-c-gray{color:#6b6963}.notes-doc-root .nd-c-brown{color:#7a5a3c}.notes-doc-root .nd-c-orange{color:#b8621b}
.notes-doc-root .nd-c-yellow{color:#8a6d0e}.notes-doc-root .nd-c-green{color:#2f7a43}.notes-doc-root .nd-c-blue{color:#2a4b8d}
.notes-doc-root .nd-c-purple{color:#6a4aa8}.notes-doc-root .nd-c-pink{color:#b23a6e}.notes-doc-root .nd-c-red{color:#b3261e}
.nd-bg-gray{background:#e9e7e1}.nd-bg-brown{background:#eadfd2}.nd-bg-orange{background:#f8cc9c}
.nd-bg-yellow{background:#f3df6c}.nd-bg-green{background:#bfe6ae}.nd-bg-blue{background:#bcd6f3}
.nd-bg-purple{background:#d8c6f1}.nd-bg-pink{background:#f6c1d6}.nd-bg-red{background:#f6c9c4}
/* a coloured block fills behind its whole subtree as one continuous rounded region.
   Only vertical/right padding + radius here — keep the base 44px left gutter & -44 margin. */
.block[class*=" nd-bg-"]{border-radius:10px;padding-top:8px;padding-bottom:8px;padding-right:14px;margin-top:4px;margin-bottom:4px}
.block[class*=" nd-bg-"] .blk-children,
.block[class*=" nd-bg-"] .tg-children{border-left:none}
.block.selected{background:color-mix(in oklab,var(--blue) 15%,transparent);border-radius:6px;box-shadow:none}
/* marquee box selection */
.nd-marquee{position:fixed;z-index:40;pointer-events:none;border:1px solid var(--blue);
  background:color-mix(in oklab,var(--blue) 14%,transparent);border-radius:4px}
.nd-doc{user-select:none}
.nd-doc .block-content{user-select:text}
.nd-selbar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:80;
  display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);
  padding:8px 10px 8px 16px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.25);font-size:13px;font-weight:600}
.nd-selbar button{background:rgba(255,255,255,.14);color:var(--paper);padding:6px 12px;border-radius:8px;font-weight:600}
.nd-selbar button:hover{background:rgba(255,255,255,.24)}

.nd-fmt{position:fixed;z-index:60;display:flex;gap:2px;background:var(--ink);border-radius:9px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.nd-fmt button{width:28px;height:28px;border-radius:6px;color:var(--paper-2);display:grid;place-items:center;font-size:13px}
.nd-fmt button:hover{background:rgba(255,255,255,.14)}
.nd-fmt .sw{width:18px;height:18px;border-radius:5px;border:1.5px solid rgba(255,255,255,.3)}

/* ── Source panel (multi-doc) ── */
.nd-source{background:var(--paper-2);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;min-width:0}
.notes-doc-root.no-source .nd-source{border-left:none}
.src-head2{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid var(--line)}
.src-head2 b{font-size:14px;color:var(--ink)}
.src-cnt{background:var(--paper-3);padding:2px 8px;border-radius:11px;font-size:11px;font-weight:600;color:var(--ink-2)}
.src-grow{flex:1}
.src-mini{font-size:11px;font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--ink-2);padding:5px 9px;border-radius:8px}
.src-mini:hover{border-color:var(--ink-soft)}
.src-mini.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.src-mini.accent{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.src-searchbar{display:flex;align-items:center;gap:8px;margin:10px 15px 8px;padding:9px 11px;border:1.5px solid var(--blue);border-radius:9px;background:var(--card)}
.src-searchbar input{border:none;outline:none;background:none;font:inherit;font-size:13px;width:100%;color:var(--ink)}
.doc-tabs{display:flex;gap:6px;padding:0 15px 10px;overflow-x:auto;flex-wrap:wrap}
.dtab{font-size:11px;font-weight:600;padding:4px 10px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);white-space:nowrap}
.dtab:hover{border-color:var(--ink-soft)}
.dtab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pdf{flex:1;overflow:auto;padding:14px 15px 40px}
.pdf-page{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:20px 18px;box-shadow:var(--shadow);font-size:12.5px;line-height:1.6;color:var(--ink-2)}
.pdf-page h4{font-family:var(--nd-serif);font-size:15px;margin:0 0 10px;color:var(--ink)}
.passage{position:relative;border-radius:6px;padding:5px 7px;margin:0 -7px;transition:background .12s}
.passage:hover{background:var(--hl-yellow)}
.passage .pull{position:absolute;right:6px;top:6px;opacity:0;transition:opacity .12s;background:var(--blue);color:var(--on-accent);font-size:10px;font-weight:700;padding:3px 8px;border-radius:14px;cursor:pointer}
.passage:hover .pull{opacity:1}
.pdf-num{text-align:center;color:var(--ink-soft);font-size:11px;margin-top:10px}
/* Original-file viewer (native PDF render + page-reference controls) */
.src-doc-view{display:flex;flex-direction:column;height:100%;gap:8px}
.src-doc-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.src-doc-head h4{font-family:var(--nd-serif);font-size:14px;margin:0;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src-pagebar{display:flex;align-items:center;gap:6px}
.src-pagebtn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--card);color:var(--ink-2);border-radius:7px;padding:3px 9px;font-size:13px;font-weight:700;line-height:1;cursor:pointer;text-decoration:none}
.src-pagebtn:hover{border-color:var(--ink-soft)}
.src-pageinput{width:42px;text-align:center;border:1px solid var(--line);border-radius:7px;padding:3px 4px;font:inherit;font-size:12px;background:var(--card);color:var(--ink)}
.src-addref{border:none;background:var(--blue);color:var(--on-accent);border-radius:8px;padding:6px 11px;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.src-addref:hover{filter:brightness(1.05)}
.src-pdf-frame{flex:1;width:100%;min-height:380px;border:1px solid var(--line);border-radius:6px;background:var(--card)}
/* PDF.js viewer: own toolbar + lazily-rendered, scroll-tracked pages */
.src-pdf-wrap{flex:1;display:flex;flex-direction:column;gap:6px;min-height:0}
.src-pdf-toolbar{display:flex;align-items:center;gap:6px}
.src-pdf-ind{font-size:11px;font-weight:700;color:var(--ink-2);background:var(--paper-3);padding:3px 9px;border-radius:11px}
.src-pdf-scroll{position:relative;flex:1;overflow:auto;border:1px solid var(--line);border-radius:6px;background:var(--paper-3);padding:8px;min-height:0}
.src-pdf-page{width:100%;margin:0 auto 8px;background:var(--card);box-shadow:var(--shadow);border-radius:2px;overflow:hidden}
.src-pdf-page:last-child{margin-bottom:0}
.src-pdf-page canvas{display:block;width:100%;height:auto}
.src-img-wrap{flex:1;overflow:auto;border:1px solid var(--line);border-radius:6px;background:var(--card);padding:8px;text-align:center}
.src-img-wrap img{max-width:100%;height:auto;border-radius:3px}
.src-doc-hint{font-size:10.5px;color:var(--ink-soft);line-height:1.4}
.src-results-h{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);padding:4px 2px 8px}
.passage.result{background:var(--card);border:1px solid var(--line);border-radius:8px;margin:0 0 8px;padding:10px 12px}
.passage.result:hover{background:var(--card);border-color:var(--ink-soft)}
.src-tag{display:block;margin-top:8px;font-size:10px;font-weight:700;color:var(--blue);background:var(--hl-blue);padding:3px 8px;border-radius:11px;width:fit-content}
.shelf-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);margin-bottom:8px;cursor:pointer}
.shelf-row:hover{border-color:var(--ink-soft)}
.shelf-ic{width:26px;height:32px;border:1px solid var(--line);border-radius:4px;background:var(--paper-2);display:grid;place-items:center;font-size:9px;font-weight:700;color:var(--red);flex:none}
.shelf-meta{flex:1}.shelf-meta b{display:block;font-size:13px;color:var(--ink)}.shelf-meta span{font-size:11px;color:var(--ink-3)}
.shelf-ch{color:var(--ink-3);font-size:16px}
.src-empty{color:var(--ink-3);font-size:12.5px;padding:14px 4px;line-height:1.5}
.add-src-bar{padding:10px 15px;border-bottom:1px solid var(--line);background:var(--paper-3)}
.add-src-row{display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--accent);border-radius:9px;padding:8px 10px}
.add-src-row input{flex:1;border:none;outline:none;background:none;font:inherit;font-size:13px;color:var(--ink)}
.add-src-go{background:var(--accent);color:var(--on-accent);border:none;border-radius:7px;padding:6px 12px;font-size:12px;font-weight:700}
.add-src-hint{font-size:11px;color:var(--ink-3);margin-top:7px;line-height:1.45}
.add-src-upload{color:var(--blue);font-weight:600;cursor:pointer}

/* ── Anki-style flashcards ── */
.cards-view{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;background:var(--paper)}
.deck-bar{width:100%;max-width:600px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:26px 20px 12px}
.deck-name{font-family:var(--nd-serif);font-size:20px;color:var(--ink);font-weight:700}
.deck-name span{font-family:var(--nd-sans);font-size:13px;color:var(--ink-3);font-weight:500}
.deck-right{display:flex;align-items:center;gap:16px}
.deck-counts{display:flex;gap:14px;font-size:12px;font-weight:700}
.deck-counts .ct{display:flex;align-items:center;gap:5px}
.deck-counts .ct:before{content:"";width:8px;height:8px;border-radius:50%}
.ct.new{color:var(--blue)}.ct.new:before{background:var(--blue)}
.ct.learn{color:var(--orange)}.ct.learn:before{background:var(--orange)}
.ct.due{color:var(--green)}.ct.due:before{background:var(--green)}
.new-card-btn{font-size:12.5px;font-weight:600;color:var(--on-accent);background:var(--accent);border:none;padding:8px 13px;border-radius:9px;white-space:nowrap}
.new-card-btn:hover{filter:brightness(.95)}
.deck-progress{width:100%;max-width:600px;height:5px;background:var(--paper-3);border-radius:3px;overflow:hidden;flex:none}
.deck-progress .bar{height:100%;background:var(--accent);border-radius:3px;width:0;transition:width .3s}
.review-area{width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center;flex:1}
.card-stage{width:100%;display:flex;align-items:center;justify-content:center;padding:28px 20px 18px;flex:1}
.anki-card{width:100%;min-height:280px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 10px 40px rgba(27,27,25,.1);padding:30px 34px;display:flex;flex-direction:column}
.ac-tag{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;text-align:center}
.ac-q{font-family:var(--nd-serif);font-size:25px;line-height:1.35;color:var(--ink);text-align:center;margin:auto 0}
.ac-divider{height:1px;background:var(--line);margin:20px 0}
.ac-a{font-size:17px;line-height:1.55;color:var(--ink-2);text-align:center}
.ac-a b{color:var(--ink)}
.ac-a mark{background:var(--hl-yellow);padding:1px 4px;border-radius:3px}
.card-actions{width:100%;max-width:600px;padding:0 20px 14px;display:flex;flex-direction:column;align-items:center;gap:12px}
.show-ans{width:100%;padding:15px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:700;border:none;display:flex;align-items:center;justify-content:center;gap:10px}
.show-ans:hover{filter:brightness(1.08)}
.show-ans kbd{font-size:11px;background:rgba(255,255,255,.18);padding:2px 7px;border-radius:5px;font-family:var(--font-mono)}
.rate-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}
.rate{padding:12px 6px;border-radius:11px;border:none;color:var(--on-accent);font-size:14px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.rate span{font-size:11px;font-weight:600;opacity:.85}
.rate.again{background:#b3261e}.rate.hard{background:#b8621b}.rate.good{background:#2f7a43}.rate.easy{background:#2a4b8d}
.rate:hover{filter:brightness(1.07)}
.cards-hint{font-size:12px;color:var(--ink-3);text-align:center;line-height:1.5;max-width:520px;margin:2px auto 0}
.cards-done{text-align:center;color:var(--ink-2);padding:50px 20px}
.cards-done .big{font-size:46px}
.cards-done h3{font-family:var(--nd-serif);margin:10px 0 4px;color:var(--ink)}
.cards-done button{margin-top:14px;background:var(--accent);color:var(--on-accent);border:none;padding:10px 18px;border-radius:10px;font-weight:600}
.add-card{width:100%;max-width:600px;padding:26px 20px 30px;display:flex;flex-direction:column}
.add-card .ac-head{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}
.add-card .ac-head b{font-family:var(--nd-serif);font-size:21px;color:var(--ink)}
.add-card .ac-head span{font-size:12px;color:var(--ink-3)}
.add-card label{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);margin:12px 0 6px}
.add-card textarea{width:100%;min-height:74px;resize:vertical;border:1px solid var(--line);border-radius:11px;background:var(--card);
  padding:12px 14px;font:inherit;font-size:15px;color:var(--ink);outline:none}
.add-card textarea:focus{border-color:var(--blue)}
.add-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.add-cancel{background:none;border:1px solid var(--line);color:var(--ink-2);padding:10px 16px;border-radius:10px;font-weight:600;font-size:13.5px}
.add-save{background:var(--accent);border:none;color:var(--on-accent);padding:10px 18px;border-radius:10px;font-weight:700;font-size:13.5px}
.add-tip{margin-top:18px;font-size:12.5px;color:var(--ink-3);background:var(--hl-blue);border-radius:10px;padding:11px 13px;line-height:1.5}
.add-tip b{color:var(--blue)}

/* toast + flash */
.nd-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);
  color:var(--paper);padding:10px 18px;border-radius:24px;font-size:13px;font-weight:600;
  box-shadow:0 8px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.25s;z-index:100}
.nd-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.flash{animation:nd-flash 1.1s ease}
@keyframes nd-flash{0%,100%{box-shadow:var(--shadow)}30%{box-shadow:0 0 0 3px var(--blue)}}

@media(max-width:1100px){.notes-doc-root:not(.no-side){grid-template-columns:220px 1fr 0}
  .notes-doc-root.no-side{grid-template-columns:0 1fr 0}}

/* Tap-scrim behind the mobile sidebar drawer — hidden everywhere except phones,
   so it can be rendered unconditionally without affecting desktop. */
.side-backdrop{display:none}

/* ── Phone view (≤600px) — single-column document; sidebar slides over ── */
@media(max-width:600px){
  .notes-doc-root,
  .notes-doc-root:not(.no-side),
  .notes-doc-root.no-side{grid-template-columns:0 1fr 0}

  /* Left notebook list becomes an overlay drawer (toggled by the ☰ button) */
  .notes-doc-root:not(.no-side) .side{
    position:absolute;top:0;left:0;bottom:0;width:min(82vw,300px);z-index:50;
    box-shadow:0 12px 40px rgba(27,27,25,.35)}
  .side-backdrop{display:block;position:absolute;inset:0;z-index:40;background:rgba(27,27,25,.38)}

  .nd-topbar{gap:6px;padding:0 10px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .nd-topbar>*{flex:none}
  .nd-crumb{min-width:60px}
  .nd-seg button{padding:5px 9px}
  .nd-pill{padding:7px 9px}

  .doc-scroll{padding:24px 0 120px}
  .nd-doc{padding:0 16px}
  .block{margin-left:-28px;padding-left:28px}
  .doc-title{font-size:26px}
}
@media(max-width:400px){.nd-doc{padding:0 12px}}

/* ───────────────────────────── Dark mode ───────────────────────────── */
.notes-doc-root[data-mode="dark"]{
  --paper:#121211; --paper-2:#1a1a18; --paper-3:#222220;
  --card:#1a1a18; --line:#2e2d2a; --line-soft:#262624;
  --ink:#eceae4; --ink-2:#cfccc4; --ink-3:#a19e96; --ink-soft:#7e7c75;
  --blue:#93b2ee; --red:#ef8b80; --green:#7fd19a; --orange:#f0a872; --pink:#ec8fc1;
  --accent:#93b2ee; --on-accent:#121211;
  --hl-yellow:#6a5d1c; --hl-green:#2f4a28; --hl-pink:#522a3c; --hl-blue:#253c58;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);
}
/* per-block colours — dark mode (lighter text, deeper bg tints) */
.notes-doc-root[data-mode="dark"] .nd-c-gray{color:#b7ab97}
.notes-doc-root[data-mode="dark"] .nd-c-brown{color:#cf9b78}
.notes-doc-root[data-mode="dark"] .nd-c-orange{color:#e0a060}
.notes-doc-root[data-mode="dark"] .nd-c-yellow{color:#d9c06a}
.notes-doc-root[data-mode="dark"] .nd-c-green{color:#7fd19a}
.notes-doc-root[data-mode="dark"] .nd-c-blue{color:#93b2ee}
.notes-doc-root[data-mode="dark"] .nd-c-purple{color:#b79de8}
.notes-doc-root[data-mode="dark"] .nd-c-pink{color:#e58fc0}
.notes-doc-root[data-mode="dark"] .nd-c-red{color:#ea8a7a}
.notes-doc-root[data-mode="dark"] .nd-bg-gray{background:#2a2a27}
.notes-doc-root[data-mode="dark"] .nd-bg-brown{background:#352d24}
.notes-doc-root[data-mode="dark"] .nd-bg-orange{background:#43331f}
.notes-doc-root[data-mode="dark"] .nd-bg-yellow{background:#6a5d1c}
.notes-doc-root[data-mode="dark"] .nd-bg-green{background:#2f4a28}
.notes-doc-root[data-mode="dark"] .nd-bg-blue{background:#253c58}
.notes-doc-root[data-mode="dark"] .nd-bg-purple{background:#3d3058}
.notes-doc-root[data-mode="dark"] .nd-bg-pink{background:#522a3c}
.notes-doc-root[data-mode="dark"] .nd-bg-red{background:#43261f}
.notes-doc-root[data-mode="dark"] .rate.again{background:#8f1f18}
.notes-doc-root[data-mode="dark"] .rate.hard{background:#9a5216}
.notes-doc-root[data-mode="dark"] .rate.good{background:#2f7a43}
.notes-doc-root[data-mode="dark"] .rate.easy{background:#2a4b8d}
.notes-doc-root[data-mode="dark"] .show-ans{background:#0b0b0a;color:var(--ink)}

/* ── Diagram blocks (Mermaid pulled from chat / created via slash) ───────── */
.notes-doc-root .nd-diagram{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:14px;margin:2px 0}
.notes-doc-root .nd-diagram-svg{text-align:center;overflow-x:auto}
.notes-doc-root .nd-diagram-svg svg{max-width:100%;height:auto}
.notes-doc-root .nd-diagram-src{font-family:var(--font-mono,ui-monospace,monospace);font-size:12px;white-space:pre;overflow-x:auto;color:var(--ink-soft);background:var(--paper);border-radius:8px;padding:10px}
.notes-doc-root .nd-diagram-edit-toggle{margin-top:8px;font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;color:var(--ink-soft);background:none;border:none;cursor:pointer;opacity:.55}
.notes-doc-root .nd-diagram:hover .nd-diagram-edit-toggle{opacity:1}
.notes-doc-root .nd-diagram-edit{margin-top:10px}
.notes-doc-root .nd-diagram-ta{width:100%;font-family:var(--font-mono,ui-monospace,monospace);font-size:12.5px;line-height:1.5;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px;resize:vertical}
.notes-doc-root .nd-diagram-actions{display:flex;gap:8px;margin-top:8px}
.notes-doc-root .nd-diagram-btn{font-size:12px;padding:5px 12px;border-radius:7px;border:1px solid var(--line);background:var(--blue);color:var(--on-accent);cursor:pointer}
.notes-doc-root .nd-diagram-btn.ghost{background:transparent;color:var(--ink-soft)}

/* ═══════════════════════════════════════════════════════════════
   UNIFIED PAGE — resizable Document ⇄ Chat split (.nd-unified)
   Notebook rail · nd-main(topbar + nd-workspace) · slide-overs.
   All scoped under .nd-unified so the legacy grid is untouched.
═══════════════════════════════════════════════════════════════ */
.notes-doc-root.nd-unified{display:flex}

/* ── notebook rail (absolute so opening it never reflows the workspace) ── */
.nd-unified .side{position:absolute;top:0;bottom:0;left:0;width:52px;z-index:45;
  overflow:hidden;transition:width .16s ease}
.nd-unified .nd-main{margin-left:52px;flex:1;position:relative;display:flex;flex-direction:column;min-width:0}
.nd-unified .side>*{opacity:0;transition:opacity .12s}
.nd-unified .side .side-top{opacity:1}
.nd-unified .side .side-top .brand,
.nd-unified .side .side-top .side-collapse{opacity:0}
.nd-unified.rail-open .side,
.nd-unified .side:hover{width:248px;box-shadow:2px 0 30px rgba(27,27,25,.25)}
.nd-unified.rail-open .side>*,
.nd-unified .side:hover>*,
.nd-unified.rail-open .side .side-top .brand,
.nd-unified.rail-open .side .side-top .side-collapse,
.nd-unified .side:hover .side-top .brand,
.nd-unified .side:hover .side-top .side-collapse{opacity:1}
.nd-unified .side-backdrop{display:none}
.nd-unified.rail-open .side-backdrop{display:block;position:absolute;inset:0;z-index:40;background:rgba(27,27,25,.30)}

/* ── topbar snap segment ── */
.nd-seg-snap button{font-variant-emoji:text}
.nd-chat-toggle{display:none}

/* ── workspace: doc | handle | chat, sized by flex-grow vars ── */
.nd-workspace{flex:1;min-height:0;display:flex;position:relative}
.nd-docpane{flex:var(--doc-flex,1) 1 0;min-width:0;overflow:hidden;display:flex;flex-direction:column;background:var(--card)}
.nd-docpane .doc-scroll{flex:1;overflow:auto}
.nd-chatpane{flex:var(--chat-flex,1) 1 0;min-width:0;overflow:hidden;display:flex;flex-direction:column;
  position:relative;background:var(--paper-2);border-left:1px solid var(--line);
  box-shadow:inset 6px 0 12px -8px rgba(0,0,0,.12)}
.nd-workspace.snap-notes{--doc-flex:2.6;--chat-flex:1}
.nd-workspace.snap-split{--doc-flex:1;--chat-flex:1}
.nd-workspace.snap-chat{--doc-flex:.42;--chat-flex:1}
.nd-split-handle{flex:0 0 6px;cursor:col-resize;background:var(--line);position:relative;z-index:5}
.nd-split-handle::after{content:"";position:absolute;inset:0 -5px}
.nd-split-handle::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:2px;height:26px;border-radius:2px;background:var(--ink-soft)}
.nd-split-handle:hover,.nd-split-handle.dragging{background:var(--accent)}
.nd-split-handle:hover::before,.nd-split-handle.dragging::before{background:#fff}

/* keep the doc block gutter from leaking onto chat markdown */
.nd-chatpane .block{margin:0;padding:0}

/* (the doc-side pane header was folded into .nd-topbar — Blocks/Canvas switch,
   Sample/Undo/Redo now live there; the chat side keeps its own .cp-head below) */

/* ── chat pane header ── */
.cp-head{flex:none;display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-bottom:1px solid var(--line);font-size:12.5px;background:var(--paper-2)}
.cp-head-role{flex:none;font-weight:700;color:var(--ink)}
.cp-head-grow{flex:1}
.cp-head-title{color:var(--ink-3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38%}
.cp-head-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;
  font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--ink-2)}
.cp-head-btn:hover{border-color:var(--ink-3)}
.cp-empty{padding:40px 24px;text-align:center;color:var(--ink-3);font-size:13px}

/* ── chat-history slide-over (inside .nd-chatpane) ── */
.ch-drawer{position:absolute;top:0;left:0;bottom:0;width:min(280px,82%);z-index:26;
  background:var(--paper-2);border-right:1px solid var(--line);box-shadow:8px 0 24px rgba(27,27,25,.16);
  transform:translateX(-104%);transition:transform .2s ease;display:flex;flex-direction:column;padding:10px}
.ch-drawer.open{transform:none}
.ch-drawer-head{display:flex;align-items:center;font-size:12px;font-weight:700;color:var(--ink);padding:4px 4px 10px}
.ch-drawer-head button{margin-left:auto;font-size:13px;color:var(--ink-3);background:none;border:none;cursor:pointer}
.ch-drawer-list{flex:1;overflow:auto;display:flex;flex-direction:column;gap:2px}
.ch-row{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;font-size:12.5px;
  color:var(--ink-2);cursor:pointer}
.ch-row:hover{background:var(--paper-3)}
.ch-row.on{background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-weight:600}
.ch-row-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-row-meta{font-size:10.5px;color:var(--ink-3);font-family:var(--font-mono,ui-monospace,monospace);flex:none}
.ch-empty{color:var(--ink-3);font-size:12px;padding:12px 6px}
.ch-newrow{margin-top:6px;display:flex;align-items:center;gap:8px;padding:9px;border-radius:8px;
  font-size:12.5px;font-weight:600;color:var(--accent);background:none;border:none;cursor:pointer;width:100%}
.ch-newrow:hover{background:color-mix(in oklab,var(--accent) 10%,transparent)}
.ch-drawer-scrim{position:absolute;inset:0;z-index:25;background:rgba(27,27,25,.26);opacity:0;
  pointer-events:none;transition:.2s}
.ch-drawer-scrim.open{opacity:1;pointer-events:auto}

/* ── Sources slide-over (over the workspace, below the topbar) ── */
.nd-unified .nd-source-over{position:absolute;top:44px;right:0;bottom:0;width:min(440px,48%);z-index:44;
  transform:translateX(102%);transition:transform .2s ease;box-shadow:-8px 0 26px rgba(27,27,25,.16)}
.nd-unified .nd-source-over.open{transform:none}
.nd-src-scrim{position:absolute;top:44px;right:0;bottom:0;left:0;z-index:43;background:rgba(27,27,25,.24);opacity:0;
  pointer-events:none;transition:.2s}
.nd-src-scrim.open{opacity:1;pointer-events:auto}

/* ── re-assert chat control styling: the .notes-doc-root button reset
   (border:none;background:none;color:inherit) is more specific than the
   chat styles from styles.css, so scope them one level deeper here ── */
.nd-chatpane .compose-row{background:var(--card);border:1px solid var(--line)}
.nd-chatpane .compose-send{background:var(--ink);color:var(--paper);border:none;border-radius:999px}
.nd-chatpane .compose-send:hover:not(:disabled){background:var(--accent)}
.nd-chatpane .voice-toggle{background:transparent;border:1px solid var(--line);border-radius:999px;color:var(--ink-3)}
.nd-chatpane .voice-toggle.is-active{background:color-mix(in oklab,var(--accent) 12%,transparent);border-color:var(--accent);color:var(--accent)}
.nd-chatpane .compose-suggest button{background:var(--paper-3);border:1px solid var(--line);color:var(--ink-2)}
.nd-chatpane .compose-suggest button:hover{border-color:var(--accent);color:var(--accent)}
.nd-chatpane .msg-speak,
.nd-chatpane .msg-add-note,
.nd-chatpane .msg-note-view,
.nd-chatpane .msg-mermaid-save,
.nd-chatpane .msg-note-suggest-dismiss{border:1px solid var(--line)}
.nd-chatpane .msg-note-suggest-add{background:var(--accent);color:var(--on-accent);border:none}
.nd-chatpane .msg-bubble-a{background:var(--card)}

/* ── responsive ── */
@media(max-width:1000px){
  .nd-seg-snap{display:none}
  .nd-chat-toggle{display:flex}
  .nd-workspace{display:block}
  .nd-docpane{height:100%}
  .nd-split-handle{display:none}
  .nd-chatpane{position:absolute;top:0;right:0;bottom:0;width:min(420px,86%);z-index:42;
    border-left:1px solid var(--line);box-shadow:-8px 0 26px rgba(27,27,25,.18);
    transform:translateX(102%);transition:transform .2s ease}
  .nd-unified.chat-open .nd-chatpane{transform:none}
}
@media(max-width:600px){
  .nd-unified .nd-source-over,
  .nd-unified .nd-chatpane{width:100%}
  .nd-unified.rail-open .side,.nd-unified .side:hover{width:min(82vw,300px)}
}