/* PhD public reader — styles. Framework-free. Light/dark aware. */
:root{
  --bg:#f4f5f7; --stage:#e7e9ee; --panel:#ffffff; --ink:#1c2330; --muted:#5b6473;
  --line:#d7dbe3; --accent:#4f46e5; --accent-ink:#ffffff;
  --hl:rgba(255,214,10,.38); --hl-mine:rgba(79,70,229,.22); --hl-mine-line:#4f46e5;
  --shadow:0 8px 30px rgba(20,25,40,.18); --ok:#0f9d58; --warn:#c0392b;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#12151b; --stage:#0c0e13; --panel:#1b1f28; --ink:#e8eaf0; --muted:#98a1b3;
    --line:#2b313d; --accent:#8b83ff; --accent-ink:#0c0e13;
    --hl:rgba(255,214,10,.30); --hl-mine:rgba(139,131,255,.26); --hl-mine-line:#8b83ff;
    --shadow:0 10px 34px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:#12151b; --stage:#0c0e13; --panel:#1b1f28; --ink:#e8eaf0; --muted:#98a1b3;
  --line:#2b313d; --accent:#8b83ff; --accent-ink:#0c0e13;
  --hl:rgba(255,214,10,.30); --hl-mine:rgba(139,131,255,.26); --hl-mine-line:#8b83ff;
  --shadow:0 10px 34px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
button{font:inherit; cursor:pointer}

/* ---- Top bar ---- */
#bar{
  flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:var(--panel); border-bottom:1px solid var(--line); z-index:40;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
#bar .title{font-weight:600; font-size:14px; margin-right:auto; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:38vw}
#bar .grp{display:flex; align-items:center; gap:4px}
#bar .btn{
  border:1px solid var(--line); background:transparent; color:var(--ink);
  border-radius:8px; padding:6px 10px; line-height:1; font-size:13px;
}
#bar .btn:hover{border-color:var(--accent)}
#bar .btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
#pageInput{width:52px; text-align:center; border:1px solid var(--line); border-radius:8px;
  padding:6px 4px; background:transparent; color:var(--ink)}
#pageTotal{color:var(--muted); font-size:13px}
#who{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px}
#who img{width:22px; height:22px; border-radius:50%}
#bar .btn:disabled{opacity:.4; cursor:default; border-color:var(--line)}
#bar .btn.zlabel{min-width:58px; font-variant-numeric:tabular-nums; color:var(--muted)}
@media(max-width:720px){
  #bar{gap:6px; padding:6px 8px}
  #bar .title{display:none}
  #bar .btn{padding:6px 8px}
  #bar .hide-sm{display:none}
  #cmtPage{font-size:0; padding:6px 9px}
  #cmtPage::before{content:"💬"; font-size:14px}
}

/* ---- Stage / pages ---- */
#stage{flex:1 1 auto; overflow:auto; background:var(--stage); position:relative; touch-action:pan-x pan-y; overscroll-behavior:contain}
#pages{position:relative; margin:0 auto; width:max-content; padding:18px 0}
.page{
  position:relative; margin:0 auto 16px; background:#fff; box-shadow:var(--shadow);
}
.page canvas{display:block}
.page .textLayer{
  position:absolute; inset:0; overflow:hidden; opacity:1; line-height:1;
  z-index:2; --scale-factor:1;
}
.page .textLayer span,.page .textLayer br{
  position:absolute; white-space:pre; cursor:text; transform-origin:0 0; color:transparent;
}
.page .textLayer ::selection{background:rgba(79,70,229,.32)}
.page .hl{position:absolute; inset:0; z-index:1; pointer-events:none}
.page .hl i{position:absolute; display:block; background:var(--hl); border-radius:2px}
.page .hl i.srch{background:rgba(255,196,0,.45); box-shadow:0 0 0 1px rgba(200,140,0,.35); border-radius:2px}
.page .hl i.srch.cur{background:rgba(255,120,0,.55); box-shadow:0 0 0 2px rgba(220,90,0,.7)}
.page .hl i.other{background:rgba(255,140,0,.28); box-shadow:inset 0 -2px 0 #e8891a; pointer-events:auto; cursor:pointer; border-radius:2px}
.page .hl i.other.flash{background:rgba(255,140,0,.6); box-shadow:0 0 0 3px rgba(232,137,26,.8)}
.page .hl .otherBadge{position:absolute; right:8px; background:#e8891a; color:#fff; font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; pointer-events:auto; cursor:pointer; box-shadow:var(--shadow); white-space:nowrap}
.page .hl i.mine{background:var(--hl-mine); box-shadow:inset 0 -2px 0 var(--hl-mine-line); pointer-events:auto; cursor:pointer}
.page .linklayer{position:absolute; inset:0; z-index:3}
.page .linklayer a{position:absolute; display:block; border-radius:2px}
.page .linklayer a:hover{background:rgba(79,70,229,.12); box-shadow:0 0 0 1px rgba(79,70,229,.35)}
.page .linklayer a.internal{cursor:pointer}

/* ---- Floating "add comment" button near a selection ---- */
#fab{
  position:fixed; z-index:60; display:none; align-items:center; gap:6px;
  background:var(--accent); color:var(--accent-ink); border:none; border-radius:999px;
  padding:8px 12px; box-shadow:var(--shadow); font-size:13px; font-weight:600;
  transform:translate(-50%,-120%);
}
#fab.show{display:inline-flex}

/* ---- Composer popover ---- */
#composer{
  position:fixed; z-index:80; width:min(420px,92vw); background:var(--panel);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:14px; display:none; flex-direction:column; gap:10px;
}
#composer.show{display:flex}
#composer h3{margin:0; font-size:14px}
#composer .quote{
  font-size:13px; color:var(--muted); border-left:3px solid var(--accent);
  padding:4px 0 4px 10px; max-height:88px; overflow:auto; white-space:pre-wrap;
}
#composer .ctxline{font-size:12px; color:var(--muted)}
#composer select,#composer textarea{
  width:100%; border:1px solid var(--line); border-radius:10px; background:transparent;
  color:var(--ink); padding:9px 10px; font:inherit; resize:vertical;
}
#composer textarea{min-height:96px}
#composer .row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
#composer .row.end{justify-content:flex-end}
#composer .iconbtn{
  border:1px solid var(--line); background:transparent; color:var(--ink);
  border-radius:10px; padding:8px 10px; font-size:13px; display:inline-flex; align-items:center; gap:6px;
}
#composer .iconbtn.active{background:var(--warn); color:#fff; border-color:var(--warn)}
#composer .iconbtn[disabled]{opacity:.45; cursor:not-allowed}
#composer .send{background:var(--accent); color:var(--accent-ink); border:none; border-radius:10px; padding:9px 16px; font-weight:600}
#composer .cancel{background:transparent; border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:9px 14px}
#composer .hint{font-size:12px; color:var(--muted)}
#composer .signin-note{font-size:13px; background:rgba(79,70,229,.08); border:1px solid var(--line);
  border-radius:10px; padding:10px; color:var(--ink)}
#dictindicator{font-size:12px; color:var(--warn); display:none}
#dictindicator.show{display:inline}

/* ---- Toast ---- */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:10px;
  box-shadow:var(--shadow); font-size:13px; opacity:0; transition:.25s; z-index:100; pointer-events:none;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--warn); color:#fff}

/* ---- Loading overlay ---- */
#loading{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:12px; background:var(--stage); z-index:30; color:var(--muted)}
#loading .bar{width:min(320px,60vw); height:6px; background:var(--line); border-radius:3px; overflow:hidden}
#loading .bar i{display:block; height:100%; width:0; background:var(--accent); transition:width .2s}
#loading.hide{display:none}

/* GIS button host */
#gbtn{min-width:120px}

/* ---- Full-text search panel ---- */
#srchBtn.on{border-color:var(--accent); color:var(--accent)}
#search{
  display:none; flex:0 0 auto; flex-direction:column; background:var(--panel);
  border-bottom:1px solid var(--line); z-index:35; max-height:38vh;
}
#search.show{display:flex}
#search .row{display:flex; align-items:center; gap:6px; padding:6px 12px}
#search input{
  flex:1 1 auto; min-width:0; border:1px solid var(--line); border-radius:8px; padding:6px 10px;
  background:transparent; color:var(--ink); font:inherit; font-size:14px;
}
#search input:focus{outline:none; border-color:var(--accent)}
#srchCount{font-size:13px; color:var(--muted); white-space:nowrap; min-width:56px; text-align:right; font-variant-numeric:tabular-nums}
#search .btn{border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:8px; padding:6px 9px; line-height:1; font-size:12px}
#search .btn:hover{border-color:var(--accent)}
#srchList{overflow:auto; border-top:1px solid var(--line); font-size:13px}
#srchList:empty{display:none}
.srchItem{display:flex; gap:10px; padding:5px 12px; cursor:pointer; border-bottom:1px solid var(--line); align-items:baseline}
.srchItem:hover{background:rgba(79,70,229,.06)}
.srchItem.cur{background:rgba(79,70,229,.12)}
.srchItem .pg{flex:0 0 46px; color:var(--muted); font-variant-numeric:tabular-nums}
.srchItem .tx{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink)}
.srchItem mark{background:rgba(255,196,0,.5); color:inherit; border-radius:2px; padding:0 1px}
.srchMore{padding:6px 12px; color:var(--muted); font-size:12px}
@media(max-width:720px){ #search{max-height:50vh} #srchCount{min-width:44px} .srchItem .pg{flex-basis:40px} }

/* ---- Owner view: all readers' comments ---- */
#ownerBtn .n{display:inline-block; min-width:18px; padding:0 5px; margin-left:4px; border-radius:999px; background:#e8891a; color:#fff; font-size:11px; font-weight:700; text-align:center}
#ownerBtn.on{border-color:#e8891a; color:#e8891a}
#owner{display:none; flex:0 0 auto; flex-direction:column; background:var(--panel); border-bottom:1px solid var(--line); z-index:34; max-height:46vh}
#owner.show{display:flex}
#owner .row{display:flex; align-items:center; gap:8px; padding:6px 12px; flex-wrap:wrap}
#owner .cnt{color:var(--muted); font-size:13px}
#owner input{flex:1 1 220px; min-width:0; border:1px solid var(--line); border-radius:8px; padding:6px 10px; background:transparent; color:var(--ink); font:inherit; font-size:13px}
#owner input:focus{outline:none; border-color:var(--accent)}
#owner .btn{border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:8px; padding:6px 9px; line-height:1; font-size:12px}
#owner .status{padding:0 12px 6px; font-size:12px; color:var(--warn)}
#owner .status:empty{display:none}
#ownerList{overflow:auto; border-top:1px solid var(--line); font-size:13px}
.ownerItem{padding:8px 12px; border-bottom:1px solid var(--line); cursor:pointer}
.ownerItem:hover{background:rgba(232,137,26,.07)}
.ownerItem .oh{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; font-size:12px; color:var(--muted)}
.ownerItem .who{color:var(--ink); font-weight:600}
.ownerItem .ok{color:var(--ok); font-weight:700}
.ownerItem .unv{color:var(--muted)}
.ownerItem .pg,.ownerItem .kind,.ownerItem .cat{padding:1px 7px; border-radius:6px; background:rgba(127,127,127,.12)}
.ownerItem .ts{margin-left:auto; font-variant-numeric:tabular-nums}
.ownerItem .oq{margin:4px 0 2px; padding-left:10px; border-left:3px solid #e8891a; color:var(--muted); font-style:italic; white-space:pre-wrap}
.ownerItem .om{white-space:pre-wrap; color:var(--ink)}
.ownerItem audio{width:100%; margin-top:4px; height:32px}
.ownerEmpty{padding:12px; color:var(--muted)}
@media(max-width:720px){ #owner{max-height:55vh} #ownerBtn{font-size:0; padding:6px 8px} #ownerBtn::before{content:"🗂"; font-size:14px} }

/* Agentic Probe: title link back to the talk, and Talk / Slides / PDF links */
#bar .title a{color:inherit;text-decoration:none}
#bar .title a:hover{text-decoration:underline}
#bar .grp.links a.btn{text-decoration:none;display:inline-flex;align-items:center}
@media (max-width:760px){#bar .grp.links{display:none}}