/* Source-Linked AI Reading Workspace — prototype styles
   Calm, reading-first, light theme matching the product mockups. */
:root{
  --bg:#F3F4F6; --surface:#FFFFFF; --surface-2:#F9FAFB; --ink:#111827;
  --ink-2:#374151; --muted:#6B7280; --faint:#9CA3AF; --line:#E5E7EB;
  --line-2:#EEF0F3; --blue:#2563EB; --blue-weak:#DBEAFE; --blue-2:#1D4ED8;
  --violet:#7C3AED; --violet-weak:#F3E8FF; --green:#059669; --amber:#F59E0B;
  --hl-yellow:#FEF3C7; --hl-blue:#DBEAFE; --hl-green:#DCFCE7; --hl-pink:#FCE7F3;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --shadow-lg:0 10px 30px rgba(16,24,40,.12);
  --radius:12px; --radius-sm:8px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --left-w:250px; --right-w:384px;
  --kb:0px;   /* on-screen keyboard overlap, measured from visualViewport (see initKeyboardInset) */
}
*{box-sizing:border-box}
html,body{height:100%;overflow:clip}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit}
svg{display:block}
.hidden{display:none !important}

/* ---------- App shell ---------- */
#app{display:grid;grid-template-columns:var(--left-w) 1fr var(--right-w);
  grid-template-rows:minmax(0,1fr);
  height:100vh;height:100dvh;overflow:clip;transition:grid-template-columns .18s ease}
#app.collapse-left{--left-w:0px}
#app.collapse-right{--right-w:0px}
#scrim{display:none}

/* ---------- Left sidebar ---------- */
#sidebar{background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-width:0;overflow:clip}
.sb-top{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 6px}
.brand{width:34px;height:34px;border-radius:9px;background:#0B0F19;color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:18px;letter-spacing:-1px}
.icon-btn{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  color:var(--muted)}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.new-btn{margin:8px 14px 10px;height:40px;border:1px solid var(--line);border-radius:10px;
  display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--blue);font-weight:600;
  box-shadow:var(--shadow)}
.new-btn:hover{background:var(--surface-2)}
.side-btn{margin:-2px 14px 12px;height:34px;border:1px solid var(--line);border-radius:9px;
  display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--muted);font-weight:600;font-size:13px;background:transparent}
.side-btn:hover{background:var(--surface-2);color:var(--text)}
.side-btn svg{flex:0 0 auto}
.btn-link{background:none;border:0;padding:0;color:var(--muted);font-weight:600;font-size:12.5px;cursor:pointer}
.btn-link:hover{color:var(--text);text-decoration:underline}
.nav{padding:2px 8px}
.nav-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:8px;
  color:var(--ink-2);font-weight:500;cursor:pointer}
.nav-item:hover{background:var(--surface-2)}
.nav-item.active{background:var(--blue-weak);color:var(--blue-2);font-weight:600}
.nav-item.active .ic{color:var(--blue)}
.nav-item .ic{color:var(--faint)}
.sb-sec{margin-top:14px;padding:6px 16px;color:var(--muted);font-weight:600;
  font-size:12px;display:flex;align-items:center;gap:6px;justify-content:space-between}
.tree{padding:0 8px}
.tree-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;
  color:var(--ink-2);cursor:pointer;font-size:13.5px}
.tree-row:hover{background:var(--surface-2)}
.tree-row.active{background:var(--blue-weak);color:var(--blue-2);font-weight:600}
.tree-row .fic{color:var(--faint);flex:0 0 auto}
.tree-row.active .fic{color:var(--blue)}
.tree .indent-1{padding-left:20px}
.tree .indent-2{padding-left:36px}
.tree .indent-3{padding-left:50px}
.doc-row .doc-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-row .doc-actions{flex:0 0 auto;display:flex;gap:1px;margin-left:4px}
.doc-act{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--faint);
  font-size:14px;line-height:1;opacity:0;transition:opacity .12s}
.doc-act svg{width:14px;height:14px}
.doc-row:hover .doc-act{opacity:1}
.doc-act.star.on{opacity:1;color:#F59E0B}
.doc-act:hover{background:var(--surface-2);color:var(--ink)}
.doc-act.danger:hover,.doc-act[data-trash]:hover{color:#DC2626}
.lib-empty{padding:10px 16px;color:var(--faint);font-size:12.5px;line-height:1.5}
.doc-dot{width:15px;height:18px;flex:0 0 auto}
.sb-storage{margin-top:auto;padding:14px 16px;border-top:1px solid var(--line-2);color:var(--muted);font-size:12px}
.bar{height:6px;border-radius:99px;background:var(--line);margin:7px 0;overflow:hidden}
.bar>i{display:block;height:100%;width:42%;background:var(--blue);border-radius:99px}

/* ---------- Center reader ---------- */
#reader{display:flex;flex-direction:column;min-width:0;background:var(--bg);overflow:clip;position:relative}
.rd-top{height:60px;flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line);position:relative}
.rd-mid{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px}
.rd-top>.icon-btn{flex:0 0 auto}   /* the panel toggles must never be squeezed by a crowded toolbar */
.rd-group{display:flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:10px;padding:4px;background:var(--surface);box-shadow:var(--shadow)}
.pagebox{display:flex;align-items:center;gap:8px}
.pagein{width:38px;flex:0 0 auto;text-align:center;border:1px solid var(--line);border-radius:7px;
  padding:5px 4px;font-weight:600}
.pagetotal{color:var(--muted);white-space:nowrap}
.zoom{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:9px;
  padding:5px 10px;background:var(--surface);box-shadow:var(--shadow);font-weight:600}
.tools{margin:0 auto;display:flex;gap:2px;border:1px solid var(--line);border-radius:11px;
  padding:5px;background:var(--surface);box-shadow:var(--shadow)}
.tool{width:38px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--ink-2)}
.tool:hover{background:var(--surface-2)}
.tool.active{background:var(--blue);color:#fff}
.tool.active.hl{background:var(--amber);color:#3b2c00}
.tool.active.shot{background:var(--blue)}
/* pan freely, but leave pinch to initPinch() — the browser's own zoom would magnify the toolbar
   and drawers along with the page, and blur the canvas instead of re-rendering it. */
.rd-scroll{flex:1;overflow:auto;padding:26px 0 60px;position:relative;touch-action:pan-x pan-y}
.page-wrap{width:max-content;margin:0 auto;position:relative}
/* continuous scroll: stacked pages.
   `safe center` centers a page that fits but falls back to start-alignment when it doesn't —
   plain `center` pushes the overflow outside the scroll range, stranding the page's left edge. */
#contPages{display:flex;flex-direction:column;align-items:center;align-items:safe center;gap:16px}
.pg{position:relative;background:#fff;box-shadow:var(--shadow);width:max-content}
.pg>canvas{display:block}
.icon-btn.active{background:var(--blue-weak);color:var(--blue)}
.icon-btn.save-btn.saved{color:#059669;background:rgba(16,185,129,.14)}
#pageCanvas{display:block;background:#fff;box-shadow:0 6px 24px rgba(16,24,40,.14);border-radius:2px}
.textLayer{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;
  opacity:1;line-height:1;z-index:2}
.textLayer > span{color:transparent;position:absolute;white-space:pre;cursor:text;
  transform-origin:0% 0%}
.textLayer ::selection{background:rgba(37,99,235,.28)}
.textLayer .search-hit{background:rgba(245,158,11,.38);border-radius:2px}
.textLayer mark.sh{background:rgba(245,158,11,.34);color:inherit;border-radius:2px;padding:0}
.textLayer mark.sh.cur{background:rgba(245,158,11,.9);box-shadow:0 0 0 1.5px rgba(180,110,0,.55)}
.find-bar{position:absolute;top:68px;right:16px;z-index:40;display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px 8px}
.find-bar.hidden{display:none}
.find-bar .find-ic{width:16px;height:16px;color:var(--muted);flex:0 0 auto;margin:0 3px}
#findInput{border:0;outline:none;background:transparent;font-size:13.5px;color:var(--ink);width:210px;font-family:inherit}
#findInput::placeholder{color:var(--muted)}
.find-count{font-size:12px;color:var(--muted);min-width:52px;text-align:right;font-variant-numeric:tabular-nums;padding:0 2px}
.find-sep{width:1px;align-self:stretch;background:var(--line);margin:2px 3px}
.find-nav{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--ink-2);flex:0 0 auto;background:transparent;border:0;cursor:pointer}
.find-nav:hover{background:var(--surface-2);color:var(--ink)}
.find-nav svg{width:16px;height:16px}
.overlay{position:absolute;left:0;top:0;pointer-events:none;z-index:3}
.hl-rect{position:absolute;border-radius:2px;pointer-events:auto;cursor:pointer}
.hl-rect.text{background:rgba(37,99,235,.20)}
.hl-rect.yellow{background:rgba(250,204,21,.45)}
.hl-rect.box{background:transparent;border:1.5px solid var(--blue);border-radius:6px}
.hl-rect.figbox{background:transparent;border:1.5px dashed var(--blue);border-radius:6px}
.pin{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--blue);
  color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;z-index:5;
  box-shadow:0 2px 6px rgba(37,99,235,.5);pointer-events:auto;cursor:pointer;transform:translate(6px,-4px)}
.pin.shot{background:var(--green)} .pin.sel{outline:3px solid rgba(37,99,235,.25)}
#connectors{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:40;overflow:visible}
#connectors path{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:2 4;stroke-linecap:round;opacity:.85}
/* screenshot capture */
.capbar{position:absolute;top:74px;left:50%;transform:translateX(-50%);z-index:31;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:14px;padding:9px 12px 9px 14px;font-weight:600;color:var(--blue)}
.capbar .x{color:var(--muted);font-weight:500;cursor:pointer;padding-left:8px;border-left:1px solid var(--line)}
.selbox{position:absolute;border:1.5px dashed var(--blue);background:rgba(37,99,235,.08);z-index:15;pointer-events:none}
.selhandle{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid var(--blue);border-radius:2px}
#captureMask{position:absolute;left:0;right:0;top:60px;bottom:0;z-index:30;cursor:crosshair;display:none;touch-action:none}

/* ---------- Right notes panel ---------- */
#notes{background:var(--surface);border-left:1px solid var(--line);display:flex;
  flex-direction:column;min-width:0;overflow:clip;position:relative}
.nt-top{padding:16px 16px 10px;display:flex;align-items:center;justify-content:space-between}
.nt-top h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.3px}
.nt-tophdr{display:flex;align-items:center;gap:6px;color:var(--muted)}
.nt-sub{padding:0 16px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.toggle{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-weight:500}
.sw{width:38px;height:22px;border-radius:99px;background:var(--line);position:relative;transition:.15s}
.sw.on{background:var(--blue)}
.sw>i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;
  transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sw.on>i{left:18px}
.selectlite{border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-weight:600;
  color:var(--ink-2);display:flex;align-items:center;gap:8px;background:var(--surface)}
.pills{display:flex;gap:8px;padding:4px 16px 12px;flex-wrap:wrap}
.pill{border:1px solid var(--line);border-radius:99px;padding:5px 12px;color:var(--ink-2);
  font-weight:600;font-size:12.5px}
.pill:hover{background:var(--surface-2)}
.pill.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.pill.ai.active{background:var(--violet);border-color:var(--violet)}
.nt-list{flex:1;overflow:auto;padding:4px 16px 16px;display:flex;flex-direction:column;gap:12px}
.daysep{color:var(--faint);font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin:8px 2px 0}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  box-shadow:var(--shadow);overflow:hidden;scroll-margin-top:10px}
.card.ai{border-color:#E9D5FF}
/* Faint Scandinavian tints so each note kind reads at a glance (muted, low-saturation) */
.card.k-hl{background:#F8F3EA}
.card.k-comment{background:#EDF2E9}
.card.k-ai{background:#F2EFF8}
.card.k-shot{background:#E9EFF4}
.card.sel{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-weak)}
/* nested reply thread inside a note card */
.card .replies{border-top:1px solid var(--line)}
.card .reply{position:relative;border-top:1px solid var(--line-2)}
.card .reply:first-child{border-top:0}
.card .reply.ai{background:#FBF9FE}
.card .reply .card-h{padding:10px 12px 4px 22px}
.card .reply .reply-b{padding:0 14px 12px 22px}
.card .reply::before{content:"";position:absolute;left:12px;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--line)}
.card .reply.ai::before{background:#D8B4FE}
.card-h{display:flex;align-items:center;gap:10px;padding:11px 12px 6px}
.avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:11px;font-weight:700;flex:0 0 auto}
.avatar.ai{background:var(--violet-weak);color:var(--violet)}
.who{font-weight:700;font-size:13.5px}
.when{color:var(--faint);font-size:12px;margin-left:auto}
.kebab{color:var(--faint);padding:2px 4px;border-radius:6px}
.kebab:hover{background:var(--surface-2);color:var(--ink)}
.card-b{padding:2px 13px 13px 13px}
.msg{font-size:13.5px;color:var(--ink);line-height:1.5}
.msg .md-p{margin:0 0 8px}
.msg .md-p:last-child{margin-bottom:0}
.msg .md-h{margin:12px 0 6px;font-weight:700;line-height:1.3;color:var(--ink)}
.msg h4.md-h{font-size:14.5px}
.msg h5.md-h{font-size:13.5px}
.msg h6.md-h{font-size:12.5px;color:var(--ink-2)}
.msg .md-ul,.msg .md-ol{margin:6px 0 8px;padding-left:20px}
.msg .md-ul{list-style:disc}
.msg .md-ol{list-style:decimal}
.msg .md-ul li,.msg .md-ol li{margin:2px 0}
.msg code{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:0 4px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.msg .md-q{margin:6px 0;padding:2px 0 2px 10px;border-left:3px solid var(--line);color:var(--ink-2)}
.msg .md-hr{border:0;border-top:1px solid var(--line);margin:10px 0}
.msg .md-tablewrap{overflow-x:auto;margin:8px 0}
.msg .md-table{border-collapse:collapse;width:100%;font-size:12.5px}
.msg .md-table th,.msg .md-table td{border:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top}
.msg .md-table thead th{background:var(--surface-2);font-weight:700}
.prov-body{margin-top:8px}
.prov-lbl{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:2px}
.tr-step .tr-n{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--blue);color:#fff;font-size:9.5px;font-weight:700;margin-right:6px;vertical-align:middle}
.tr-step .tr-sub{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:5px 0 2px}
.tr-tools{font-size:11px;color:var(--ink-2);margin-bottom:6px}
.tr-tools code{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:0 5px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px}
.msg .men{color:var(--blue);font-weight:600}
.msg a.cite,.msg a{color:var(--blue);text-decoration:none;font-weight:500}
.msg a.cite:hover,.msg a:hover{text-decoration:underline}
.q-src{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;margin-top:7px}
.q-src .qn{width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;
  font-size:11px;font-weight:700;display:grid;place-items:center}
.linked-quote{border-left:3px solid var(--line);background:var(--surface-2);border-radius:0 8px 8px 0;
  padding:8px 11px;color:var(--ink-2);font-size:13px;margin:9px 0 4px;font-family:var(--serif)}
.quote-wrap{margin:9px 0 4px}.quote-wrap .linked-quote{margin:0}
.linked-quote.clip{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.quote-more{margin-top:5px;color:var(--blue);font-weight:600;font-size:11.5px;font-family:var(--sans)}
.quote-more:hover{text-decoration:underline}
.shot-thumb{margin:9px 0 4px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.shot-thumb img{display:block;width:100%}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.chip{border:1px solid var(--line);border-radius:7px;padding:2px 8px;color:var(--ink-2);
  font-size:10.5px;font-weight:600;background:var(--surface);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.chip.dim{color:var(--muted)}
.disc{display:flex;align-items:center;gap:6px;color:var(--faint);font-size:11.5px;margin-top:9px}
/* collapsed sources/provenance disclosure under an AI answer */
.prov{margin-top:9px}
.prov>summary{list-style:none;cursor:pointer;color:var(--faint);font-size:11.5px;display:inline-flex;align-items:center;gap:5px;user-select:none}
.prov>summary::-webkit-details-marker{display:none}
.prov>summary .disc-i{opacity:.8}
.prov>summary .prov-more{color:var(--blue);font-weight:600}
.prov[open]>summary .prov-more{color:var(--muted);font-weight:500}
.prov>summary:hover .prov-more{text-decoration:underline}
.prov .chips{margin-top:8px}
/* agent "show work" transcript */
.trace{margin-top:8px}
.trace>summary{list-style:none;cursor:pointer;color:var(--blue);font-size:11.5px;font-weight:600;user-select:none;display:inline-flex;align-items:center;gap:5px}
.trace>summary::-webkit-details-marker{display:none}
.trace>summary::before{content:"▸";font-size:10px}
.trace[open]>summary::before{content:"▾"}
.trace .tr-list{margin-top:8px;border-left:2px solid var(--line);padding-left:10px;display:flex;flex-direction:column;gap:8px}
.tr-step .tr-h{font-size:11px;font-weight:600;color:var(--ink-2);margin-bottom:3px}
.tr-body{margin:0;background:var(--surface-2);border-radius:7px;padding:8px 9px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10.5px;line-height:1.45;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:break-word;max-height:220px;overflow:auto}
.tagrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.tag{border-radius:6px;padding:2px 7px;font-size:10.5px;font-weight:600;letter-spacing:.01em}
.tag.q{background:#EFF6FF;color:#1D4ED8}.tag.claim{background:#F1F5F9;color:#334155}
.tag.def{background:#ECFDF5;color:#047857}.tag.eq{background:#FFF7ED;color:#C2410C}
.tag.fig{background:#F5F3FF;color:#6D28D9}.tag.shot{background:#ECFEFF;color:#0E7490}
.tag.vis{background:#FDF4FF;color:#A21CAF}.tag.conf{background:#FEF2F2;color:#B91C1C}
.tag.crit{background:#FEF2F2;color:#B91C1C}.tag.sum{background:#F0FDF4;color:#15803D}
.tag.act{background:#FFFBEB;color:#B45309}
/* message hover actions (edit / delete) — replaces the kebab menu */
.card-h .collapse-btn{opacity:.6}
.card-h .collapse-btn:hover{opacity:1}
.macts{margin-left:2px;display:flex;gap:1px;opacity:0;transition:opacity .12s}
.card-h:hover .macts{opacity:1}
.mact{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--faint)}
.mact svg{width:15px;height:15px}
.mact:hover{background:var(--surface-2);color:var(--ink)}
.mact[data-delnote]:hover,.mact[data-delmsg]:hover{color:#DC2626}
/* inline edit box for comments and AI answers */
.edit-wrap{margin-top:8px}
.edit-input{width:100%;border:1px solid var(--blue);border-radius:9px;padding:8px 10px;font-size:13.5px;line-height:1.5;resize:vertical;min-height:62px;background:var(--surface);color:var(--ink);outline:none;font-family:inherit}
.edit-actions{display:flex;gap:8px;margin-top:8px}
.eb-save{background:var(--blue);color:#fff;border-radius:8px;padding:6px 14px;font-weight:600;font-size:12.5px}
.eb-reask{background:var(--violet-weak);color:var(--violet);border-radius:8px;padding:6px 12px;font-weight:600;font-size:12.5px}
.eb-reask:hover{filter:brightness(.97)}
.eb-cancel{color:var(--muted);border-radius:8px;padding:6px 12px;font-weight:600;font-size:12.5px}
.eb-cancel:hover{background:var(--surface-2)}
/* inline thread composer inside the active note card */
.thread-compose{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--surface-2)}
.tc-input{flex:1;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13px;line-height:1.45;resize:none;max-height:120px;background:var(--surface);color:var(--ink);outline:none;font-family:inherit}
.tc-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-weak)}
/* live @mention highlighting: transparent-text textarea over a mirror backdrop */
.men-box{position:relative;flex:1;min-width:0}
.men-box .men-input{display:block;width:100%}
.men-hl{position:absolute;inset:0;overflow:hidden;pointer-events:none;white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;color:var(--ink);box-sizing:border-box;margin:0}
.men-hl .men{color:var(--blue);font-weight:700}
.men-input{color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:var(--ink)!important;background:transparent!important}
.men-input::placeholder{-webkit-text-fill-color:var(--muted)!important;color:var(--muted)!important;opacity:1}
.tc-send{width:34px;height:34px;flex:0 0 auto;border-radius:9px;background:var(--blue);color:#fff;display:grid;place-items:center}
.tc-send svg{width:17px;height:17px}
.tc-send:hover{filter:brightness(1.06)}
.tag .rm{margin-left:5px;opacity:.5;cursor:pointer}
.addtag{border:1px dashed var(--line);border-radius:7px;padding:2px 7px;color:var(--muted);font-size:11px}
.badge-appx{background:#FFFBEB;color:#B45309;border:1px solid #FDE68A;border-radius:7px;
  padding:2px 8px;font-size:11px;font-weight:700}
.badge-gen{background:var(--violet-weak);color:var(--violet);border-radius:7px;padding:2px 8px;
  font-size:11px;font-weight:700}
.vis-card{border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:8px;background:var(--surface)}
.vis-card h4{margin:0 0 8px;text-align:center;font-size:14px}
.vis-card .ascii{margin:0;padding:12px;background:#0B0F19;color:#E5E7EB;border-radius:8px;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.4;white-space:pre;tab-size:2}
.vis-card img{width:100%;border-radius:8px;display:block}
.vis-take{margin:10px 0 0;padding-left:18px}
.vis-take li{font-size:12.5px;margin:3px 0}
.strip{display:flex;align-items:center;gap:6px;margin-top:11px;flex-wrap:wrap}
.strip .st{border:1px solid var(--line);border-radius:9px;padding:6px 9px;font-size:11px;font-weight:600;text-align:center}
.strip .st.b{background:#EFF6FF;color:#1D4ED8;border-color:#BFDBFE}
.strip .st.v{background:var(--violet-weak);color:var(--violet);border-color:#E9D5FF}
.strip .ar{color:var(--faint)}
.reply-row{display:flex;gap:8px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.mini-btn{border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-weight:600;
  color:var(--ink-2);font-size:12px;display:inline-flex;align-items:center;gap:6px}
.mini-btn:hover{background:var(--surface-2)}
.mini-btn.ai{color:var(--violet);border-color:#E9D5FF}
.mini-btn.p{background:var(--blue);color:#fff;border-color:var(--blue)}
.resolved-flag{color:var(--green);font-weight:700;font-size:11.5px;display:inline-flex;gap:5px;align-items:center}
.card.isres{opacity:.72}
/* count + sort row under the notes list (was inline styles, which no rule could override) */
.nt-foot{display:flex;justify-content:space-between;padding:8px 16px;color:var(--faint);font-size:12px;
  border-top:1px solid var(--line-2)}
.nt-foot #sortSel{color:var(--muted);font-weight:600}
.composer{flex:0 0 auto;border-top:1px solid var(--line);padding:12px 14px;background:var(--surface)}
.composer .ctx{font-size:11.5px;color:var(--muted);margin-bottom:7px;display:flex;align-items:center;gap:7px}
.composer .ctx .qn{width:16px;height:16px;font-size:10px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center}
.cbox{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line);border-radius:12px;
  padding:8px 8px 8px 12px;background:var(--surface)}
.cbox:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-weak)}
.cbox textarea{flex:1;border:0;outline:0;resize:none;max-height:120px;background:transparent;line-height:1.4}
.send{width:34px;height:34px;border-radius:9px;background:var(--blue);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.send:disabled{background:var(--line);color:var(--faint)}
.empty{color:var(--faint);text-align:center;padding:40px 20px;font-size:13px}

/* ---------- Toasts / typing ---------- */
#toasts{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:200;display:flex;
  flex-direction:column;gap:8px;align-items:center}
.toast{background:#0B0F19;color:#fff;border-radius:10px;padding:10px 16px;font-size:13px;
  box-shadow:var(--shadow-lg);max-width:520px}
.toast.err{background:#7F1D1D}
.typing{display:inline-flex;gap:4px;align-items:center;color:var(--violet);font-size:12.5px}
.typing i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:bl 1s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* ---------- Modal / Settings ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(16,24,40,.42);z-index:120;display:grid;place-items:center;padding:20px}
.modal{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);width:560px;max-width:100%;
  max-height:90vh;overflow:auto}
.modal h3{margin:0;padding:18px 20px;border-bottom:1px solid var(--line);font-size:17px;
  display:flex;align-items:center;justify-content:space-between}
.modal .body{padding:18px 20px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;margin-bottom:6px;font-size:13px}
.field .hint{color:var(--muted);font-size:12px;margin-top:5px}
.field input,.field select{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.field input:focus,.field select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-weak)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-weight:600;color:var(--ink-2)}
.seg button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.chk{display:flex;align-items:center;gap:10px;padding:8px 0}
.chk .sw{flex:0 0 auto}
.modal .foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
.btn{border-radius:10px;padding:9px 16px;font-weight:600}
.btn.primary{background:var(--blue);color:#fff}.btn.primary:hover{background:var(--blue-2)}
.btn.ghost{border:1px solid var(--line);color:var(--ink-2)}.btn.ghost:hover{background:var(--surface-2)}
.confirm-mask{z-index:200}
.confirm-box{background:var(--surface);border-radius:14px;box-shadow:var(--shadow-lg);max-width:430px;width:100%;padding:20px 22px}
.confirm-msg{font-size:14.5px;line-height:1.55;color:var(--ink);white-space:pre-wrap}
.confirm-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.btn.danger{background:#DC2626;color:#fff}
.btn.danger:hover{background:#B91C1C}

/* ---------- Export view ---------- */
#exportView{position:fixed;inset:0;background:var(--bg);z-index:100;display:flex;flex-direction:column}
.ex-top{height:64px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;background:var(--surface);border-bottom:1px solid var(--line)}
.ex-back{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink-2)}
.ex-body{flex:1;display:grid;grid-template-columns:300px 1fr;overflow:hidden}
.ex-opts{border-right:1px solid var(--line);background:var(--surface);padding:22px;overflow:auto}
.ex-opts h1{font-size:22px;margin:0 0 6px}
.ex-opts p.sub{color:var(--muted);margin:0 0 18px;font-size:13px}
.ex-opts .lbl{font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.ex-chk{display:flex;align-items:center;gap:11px;padding:7px 0;font-weight:500}
.ex-chk .box{width:22px;height:22px;border-radius:6px;border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto}
.ex-chk.on .box{background:var(--blue);border-color:var(--blue);color:#fff}
.ex-chk .ic{color:var(--faint)}
.lay{display:flex;flex-direction:column;gap:10px}
.lay .opt{border:1px solid var(--line);border-radius:11px;padding:12px;display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.lay .opt.on{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-weak)}
.lay .opt .r{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);margin-left:auto;flex:0 0 auto}
.lay .opt.on .r{border-color:var(--blue);background:radial-gradient(circle at center,#fff 0 3px,var(--blue) 4px)}
.lay .opt b{display:block;font-size:13.5px}.lay .opt small{color:var(--muted)}
.ex-preview{overflow:auto;padding:26px}
.ex-sheet{max-width:860px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:34px 38px}
.ex-sheet h2{margin:0 0 3px;font-size:22px}
.ex-sheet .dt{color:var(--muted);font-size:13px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:6px}
.ex-item{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-bottom:1px solid var(--line-2);padding:20px 0}
.ex-item.compact{grid-template-columns:1fr;gap:8px}
.ex-num{width:22px;height:22px;border-radius:50%;background:var(--violet-weak);color:var(--violet);
  font-weight:700;font-size:12px;display:inline-grid;place-items:center;margin-right:8px}
.ex-loc{font-weight:700;font-size:13.5px;margin-bottom:12px;display:flex;align-items:center}
.ex-sub{color:var(--muted);font-weight:600;font-size:12px;margin-bottom:6px}
.ex-quote{background:#EFF6FF;border-left:3px solid #93C5FD;border-radius:0 9px 9px 0;padding:12px 13px;font-family:var(--serif);font-size:13px;color:#1E293B}
.ex-quote.yellow{background:#FEF9C3;border-left-color:#FCD34D;color:#3F3F46}
.ex-shot{border:1px solid var(--line);border-radius:9px;overflow:hidden}.ex-shot img{width:100%;display:block}
.ex-comment .who{font-size:13px}
.ex-resp{margin-top:12px}

@media print{
  @page{margin:12mm}
  html,body{background:#fff;overflow:visible !important;height:auto !important}
  /* print highlight/quote/chip backgrounds faithfully (Chrome drops them by default) */
  #exportView, #exportView *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #app,#exportView .ex-top,#exportView .ex-opts,#connectors,#toasts{display:none !important}
  #exportView{position:static;display:block;height:auto;overflow:visible}.ex-body{display:block;overflow:visible;height:auto}
  .ex-preview{padding:0;overflow:visible;height:auto}
  .ex-sheet{box-shadow:none;border:0;border-radius:0;max-width:none;padding:0;font-size:9.5px;line-height:1.4}
  .ex-item{break-inside:avoid;padding:12px 0;gap:16px}
  /* smaller type for the printed evidence packet */
  .ex-sheet h2{font-size:15px}
  .ex-sheet .dt{font-size:9px;padding-bottom:10px}
  .ex-loc{font-size:10.5px;margin-bottom:8px}
  .ex-num{width:16px;height:16px;font-size:9px;margin-right:6px}
  .ex-sub{font-size:8.5px;margin-bottom:4px}
  .ex-quote{font-size:9px;padding:8px 10px}
  .ex-resp,.ex-comment .who{font-size:9.5px}
  .ex-sheet .msg,.ex-sheet .disc{font-size:9.5px}
  .ex-sheet .chip,.ex-sheet .tag{font-size:8px;padding:1px 6px}
}
/* ---- reader fallback (shown when PDF engine can't start, e.g. sandboxed preview) ---- */
#readerFallback{display:flex;justify-content:center;padding:56px 24px}
#readerFallback .fb-card{background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:36px 40px;max-width:620px;font-family:var(--sans)}

/* ---- sidebar: scrollable middle, pinned top/bottom (no cramming) ---- */
.sb-top, .new-btn, .sb-storage { flex: 0 0 auto; }
.sb-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* topbar panel toggles appear only when that panel is collapsed (reopen affordance) */
#btnToggleLeft, #btnToggleRight { display: none; }
#app.collapse-left #btnToggleLeft { display: grid; }
#app.collapse-right #btnToggleRight { display: grid; }

/* ---- line icons ---- */
.nav-item .ic svg{width:18px;height:18px;display:block}
.tree-row .fic svg{width:16px;height:16px;display:block}
.sb-sec svg{opacity:.75}
.new-btn svg{flex:0 0 auto}

/* ---- notes search bar ---- */
.nt-searchbar{display:flex;align-items:center;gap:8px;margin:0 16px 10px;border:1px solid var(--line);
  border-radius:10px;padding:7px 11px;color:var(--muted)}
.nt-searchbar input{border:0;outline:0;flex:1;background:transparent;color:var(--ink)}
.nt-searchbar:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-weak)}

/* ---- provider brand avatars ---- */
.avatar.gpt{background:#10A37F;color:#fff}
.avatar.claude{background:#D97757;color:#fff;border-radius:7px}
.avatar.gemini{background:#1C69FF;color:#fff}
.avatar.openrouter{background:#6566F1;color:#fff}
.avatar.ai svg{width:16px;height:16px}
.avatar.brand svg{width:17px;height:17px}

/* ---- popover (funnel / kebab menus) ---- */
.popover{position:fixed;z-index:80;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:7px;min-width:214px}
.popover .row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-weight:500;color:var(--ink-2);cursor:pointer}
.popover .row:hover{background:var(--surface-2)}
.popover .row .sw{margin-left:auto}
.popover .sep{height:1px;background:var(--line-2);margin:6px 4px}
.popover .lab{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding:7px 10px 3px}
.popover .row.on{color:var(--blue);font-weight:600}

/* notes list children keep natural height + the LIST scrolls (no cramming/clipping) */
.nt-list > * { flex: 0 0 auto; }

/* Settings: "Default" radio sits next to each provider (no dedicated row) */
.lbl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.lbl-row label{margin:0}
.def-radio{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;
  padding:4px 12px 4px 9px;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--surface);cursor:pointer}
.def-radio:hover{background:var(--surface-2)}
.def-radio .rdot{width:13px;height:13px;border-radius:50%;border:2px solid #CBD5E1;flex:0 0 auto}
.def-radio.on{color:var(--blue);border-color:var(--blue);background:var(--blue-weak)}
.def-radio.on .rdot{border:4px solid var(--blue)}

/* ---- compact note cards (compact by default; active expands) ---- */
.card{position:relative}
.card .clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Badge sits inline to the left of the preview text; timestamp floats top-right. */
.card.compact .cc{display:flex;gap:10px;align-items:flex-start;padding:11px 13px 12px}
.card.compact .cc-badge{width:22px;height:22px;border-radius:50%;color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.card.compact .cc-main{flex:1 1 auto;min-width:0}
.card.compact .cc-main .msg{padding-right:46px}
.card.compact .cc-main .msg + .msg{margin-top:6px;padding-right:0}
.card.compact .cc-when{position:absolute;top:12px;right:14px;color:var(--faint);font-size:12px}
.cc-tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.03em;padding:1px 5px;border-radius:5px;margin-right:6px;vertical-align:1.5px}
.cc-tag.ai{background:#DCFCE7;color:#059669}
.cc-tag.you{background:#DBEAFE;color:#2563EB}
/* Checked "show on card" messages render in full (no 2-line clamp), with markdown/bullets intact. */
.card.compact .cc-full{white-space:normal;overflow:visible}
.card.compact .cc-full > .cc-tag{margin-bottom:4px}
/* A checked generated visual keeps its image + takeaways on the collapsed card (not just the title). */
.card.compact .cc-full{padding-right:0}
.card.compact .cc-vis{margin-top:4px;padding:10px}
.card.compact .cc-vis h4{font-size:13px;margin-bottom:6px}
.card.compact .cc-vis img{max-height:220px;width:auto;max-width:100%;margin:0 auto}
.mact.showtog{opacity:.5}
.card-h:hover .mact.showtog{opacity:.8}
.mact.showtog:hover{opacity:1}
.mact.showtog.on{opacity:1;color:var(--blue)}
.card.compact .loc-line{color:var(--muted);font-size:12px;margin-top:7px;display:flex;align-items:center;gap:7px}
.card.compact .loc-line .qn{width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;flex:0 0 auto}
.unread-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);position:absolute;right:14px;bottom:14px}
.expand-hint{color:var(--faint);font-size:11.5px;margin-top:8px}

@media (max-width:1100px){:root{--right-w:340px;--left-w:0px}}

/* ---------- Phones & small tablets ----------
   The three-column grid can't give the page a readable column here — at 390px it
   leaves the reader 50px — so both asides become drawers that slide over the page.
   `.collapse-left`/`.collapse-right` keep their meaning: present = closed. */
@media (max-width:820px){
  #app{grid-template-columns:1fr;transition:none}
  /* bottom rides above the on-screen keyboard: iOS leaves the layout viewport (and 100dvh) at full
     height when the keyboard opens, so a drawer pinned to it hides its own composer underneath. */
  #sidebar,#notes{position:fixed;top:0;bottom:var(--kb,0px);z-index:60;
    box-shadow:var(--shadow-lg);transition:transform .22s ease}
  #sidebar{left:0;width:min(80vw,290px);transform:translateX(-100%)}
  #notes{right:0;width:min(92vw,380px);transform:translateX(100%)}
  #app:not(.collapse-left) #sidebar{transform:none}
  #app:not(.collapse-right) #notes{transform:none}

  #scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(9,12,20,.42);
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  #app:not(.collapse-left) #scrim,#app:not(.collapse-right) #scrim{opacity:1;pointer-events:auto}

  /* an open drawer covers the passage the line would point at */
  #connectors{display:none}
  .col-resizer{display:none}

  /* Keep .rd-top at its 60px height — #captureMask, .capbar and .find-bar are offset against it.
     Static so the tools bar below resolves against #reader, not this. Nothing else needs it
     positioned (#findBar hangs off #reader; .capbar off .rd-scroll). */
  .rd-top{gap:4px;padding:0 4px;position:static}
  /* No -webkit-overflow-scrolling:touch — on iOS it makes a scroller the containing block for
     positioned descendants, which strands the tools bar inside this 60px strip. Momentum
     scrolling has been the default since iOS 13 anyway. */
  .rd-mid{gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .rd-mid::-webkit-scrollbar{display:none}
  .rd-mid>*{flex:0 0 auto}
  .icon-btn{width:34px;height:34px}

  /* The 4 tools don't fit beside page nav + zoom at this width, and a thumb can't reach the top
     bar anyway — float them at the bottom instead. Absolute against #reader (whose bottom is the
     100dvh edge) rather than fixed, so iOS Safari's bottom toolbar can't sit over them.
     Below the scrim, so an open drawer covers them. */
  .tools{position:absolute;z-index:45;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));
    transform:translateX(-50%);margin:0;gap:4px;padding:6px;border-radius:14px;
    box-shadow:var(--shadow-lg)}
  .tool{width:46px;height:42px}
  .rd-scroll{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  #toasts{bottom:calc(84px + env(safe-area-inset-bottom))}   /* clear the tools bar */

  /* iOS draws its own Copy / Look Up / Find Selection menu right on top of the selection, and it
     can't be suppressed — so don't compete for that space. Pin our actions to the bottom of the
     reader instead, where the tools bar lives, and stand the tools bar down while they're up.
     positionSelPop() clears its inline left/top at this width so these rules win. */
  #selPop{left:50%;right:auto;top:auto;transform:translateX(-50%);
    bottom:calc(14px + env(safe-area-inset-bottom) + var(--kb,0px));gap:4px}
  body:has(#selPop:not(.hidden)) .tools{opacity:0;pointer-events:none}

  .composer{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .sb-storage{padding-bottom:calc(14px + env(safe-area-inset-bottom))}

  /* iOS zooms the whole page when a focused control's text is under 16px, panning the layout until
     it looks broken — the toolbar and half the drawer slide off-screen. Keep controls at 16px here.
     Listed by class because the base rules set a smaller size and would otherwise win. */
  input,textarea,select,.pagein,.tc-input,.edit-input,#findInput{font-size:16px}

  /* Typing a reply inside a note? That card's composer is the one that matters. The document-level
     composer and the count/sort row sit right on top of it, in the room the keyboard just took.
     Driven by a class rather than :has(:focus) — :focus doesn't match while the document is
     unfocused, and the drawer's layout shouldn't hinge on that. */
  #notes.replying .nt-foot,
  #notes.replying .composer{display:none}
}
@media (max-width:560px){
  /* the zoom readout and the single-page/continuous toggle are the least load-bearing here */
  #zoomVal,#btnContinuous{display:none}
}
/* ---- draggable divider for the right notes panel ---- */
.col-resizer{position:absolute;top:0;left:0;width:8px;height:100%;cursor:col-resize;z-index:35;touch-action:none}
.col-resizer::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:transparent;transition:background .12s}
.col-resizer:hover::before,body.col-resizing #rightResizer::before{background:var(--blue)}
body.col-resizing{cursor:col-resize;user-select:none}
body.col-resizing #app{transition:none}
/* ---- math (MathJax SVG) + fenced pseudocode inside answers/comments ---- */
.msg .math-d{display:block;margin:8px 0;max-width:100%;overflow-x:auto;overflow-y:hidden}
.msg pre.code-block{margin:8px 0;padding:11px 13px;background:#0B0F19;color:#E5E7EB;border-radius:8px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.5;white-space:pre;tab-size:2}
.msg pre.code-block code{background:none;border:0;padding:0;color:inherit;font-size:inherit;white-space:pre}
.msg mjx-container{max-width:100%}
.msg mjx-container[display="true"]{margin:6px 0!important;overflow-x:auto;overflow-y:hidden}
.ex-sheet pre.code-block{background:#0B0F19;color:#E5E7EB}
/* MathJax inline SVGs must render inline: the global svg{display:block} reset would otherwise force every inline equation onto its own line (breaking sentence flow). */
mjx-container svg{display:inline-block}
.msg mjx-container[display="true"] svg,.ex-sheet mjx-container[display="true"] svg{display:block;margin:0 auto}
/* ---- Settings tabs + Templates (prompt) editors ---- */
.settabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-2px 0 16px}
.settab{padding:8px 14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:8px 8px 0 0}
.settab:hover{color:var(--ink);background:var(--surface-2)}
.settab.on{color:var(--blue);border-bottom-color:var(--blue)}
.tabpane.hidden{display:none}
.pt-actions{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.pt-item{margin-bottom:18px}
.pt-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.pt-head label{font-weight:600;font-size:13px}
.pt-reset{font-size:11.5px;font-weight:600;color:var(--blue);padding:3px 9px;border-radius:7px}
.pt-reset:hover{background:var(--blue-weak)}
.pt-item textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;resize:vertical;min-height:94px;color:var(--ink);background:var(--surface-2)}
.pt-item textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-weak);background:var(--surface)}
.pt-item .hint{margin-top:5px}
details.pt-item{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--surface);overflow:hidden}
details.pt-item>summary{list-style:none;cursor:pointer;padding:9px 12px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink);user-select:none}
details.pt-item>summary::-webkit-details-marker{display:none}
details.pt-item>summary .pt-cx{color:var(--muted);font-size:11px;width:10px;display:inline-block;transition:transform .12s}
details.pt-item[open]>summary .pt-cx{transform:rotate(90deg)}
details.pt-item>summary:hover{background:var(--surface-2)}
details.pt-item .pt-badge{margin-left:auto;color:var(--violet);font-weight:700;font-size:10.5px;background:var(--violet-weak);padding:1px 9px;border-radius:99px}
details.pt-item .pt-body{padding:0 12px 12px}
.pt-actions-row{display:flex;justify-content:flex-end;margin:2px 0 6px}
.pt-sec{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}


/* ---------- non-blocking "open notes?" announcement banner ---------- */
.top-banner{position:fixed;top:64px;left:50%;transform:translateX(-50%) translateY(-12px);z-index:65;
  display:flex;align-items:center;gap:12px;max-width:min(720px,calc(100vw - 32px));
  background:#0B0F19;color:#e5e7eb;padding:8px 10px 8px 14px;border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.32);font-size:13.5px;
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.top-banner.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.top-banner .tb-ic{flex:0 0 auto;color:#93c5fd;display:flex}
.top-banner .tb-msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top-banner.ocr .tb-msg{white-space:normal;line-height:1.35}
.top-banner .tb-msg b{color:#fff;font-weight:700}
.top-banner .tb-act{flex:0 0 auto;background:var(--blue,#2563EB);color:#fff;font-weight:700;font-size:12.5px;padding:6px 13px;border-radius:8px;white-space:nowrap}
.top-banner .tb-act:hover{filter:brightness(1.1)}
.top-banner .tb-x{flex:0 0 auto;color:#94a3b8;font-size:14px;line-height:1;padding:5px 7px;border-radius:7px}
.top-banner .tb-x:hover{color:#fff;background:rgba(255,255,255,.1)}

/* ---------- drag-and-drop a PDF (+ its .notes.json) onto the reader ---------- */
#reader.drop-hint{outline:2.5px dashed var(--violet, #7c3aed);outline-offset:-10px;background:var(--violet-weak, rgba(124,58,237,.06))}
#reader.drop-hint::after{content:"Drop a PDF (+ its .notes.json), or a shared .html, to open it";position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:40;background:#0B0F19;color:#fff;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:99px;box-shadow:0 6px 20px rgba(0,0,0,.28);pointer-events:none}

/* ---------- read-only shared file (single-file annotated paper) ---------- */
body.readonly #roBanner{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#0B0F19;color:#cbd5e1;font-size:12.5px;text-align:center;padding:7px 12px;letter-spacing:.01em}
body.readonly #roBanner a{color:#C4B5FD;font-weight:700;text-decoration:none}
body.readonly #roBanner a:hover{text-decoration:underline}
body.readonly #rdScroll{padding-bottom:44px}