/* 图上的旁问（t-20261027-pz69 G1，image-aside.js）
   - 图右上角一枚圆钮：白纸底、细边、蓝色「旁问」图标，和选区条上那颗是同一个图标；悬停出一句提示，同选区条。
   - 在图上拖出来的框：一圈蓝色空心细线，不铺底色；松手后圆钮挪到框的右上角。
   - 问过的那一块在图上留四个蓝色角标（.img-ask-mark），引线从右上角标出发，和正文里旁问那句的蓝色底线是同一个意思。
   - 引文卡：图的缩略图（课件页、截下的那块、导师画的图）+ 一行出处；笔记里的旁问写「笔记 · 小节」。 */
.material-page-face { position: relative; }
.img-ask {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: var(--shadow-pop);
  cursor: pointer;
}
.img-ask[hidden] { display: none; }
.img-ask .icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.img-ask:hover { border-color: var(--accent); background: var(--accent-soft); }
.img-ask:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.img-ask.is-in { animation: img-ask-in var(--motion-t0) var(--ease-out) both; }
@keyframes img-ask-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
/* 悬停提示：和选区条按钮上的提示同一个样子，在圆钮左边 */
.img-ask__hint {
  display: none;
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%);
  padding: 4px 8px;
  border-radius: var(--r-xs);
  background: var(--ink);
  color: var(--canvas);
  font: 400 var(--fs-caption)/1.4 var(--font-sans);
  white-space: nowrap;
  box-shadow: var(--shadow-pop);
  pointer-events: none;
}
@media (hover: hover) {
  .img-ask:hover .img-ask__hint, .img-ask:focus-visible .img-ask__hint { display: block; animation: img-ask-hint 120ms ease 300ms both; }
}
@keyframes img-ask-hint { from { opacity: 0; } to { opacity: 1; } }

/* 拖框：画框时整张图换成十字光标，不选字 */
.is-boxing, .is-boxing * { cursor: crosshair !important; user-select: none; -webkit-user-select: none; }
/* 图上的框（t-20261027-sgwh）：不铺底色、不盖住课件。笔用 --paper-pen（课件页、图示的纸两套主题都是白的；资料查看器的页深色下是反色的深底，用 --accent）。
   拖的时候是一圈 1.5px 空心线；问过的那一块只留四个角标（每个角两笔），引线从右上角标出发（aside-margin.js）。 */
.img-ask-box, .img-ask-mark { position: absolute; z-index: 3; box-sizing: border-box; pointer-events: none; --pen: var(--paper-pen); }
.material-viewer :is(.img-ask-box, .img-ask-mark) { --pen: var(--accent); }
.img-ask-box { border: 1.5px solid var(--pen); border-radius: 2px; background: none; }
.img-ask-box[hidden] { display: none; }
.img-ask-mark {
  --tick: min(12px, 30%);
  --tw: 2px;
  --stroke: linear-gradient(var(--pen), var(--pen));
  background-image: var(--stroke), var(--stroke), var(--stroke), var(--stroke), var(--stroke), var(--stroke), var(--stroke), var(--stroke);
  background-repeat: no-repeat;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-size: var(--tick) var(--tw), var(--tw) var(--tick), var(--tick) var(--tw), var(--tw) var(--tick), var(--tick) var(--tw), var(--tw) var(--tick), var(--tick) var(--tw), var(--tw) var(--tick);
}
/* 悬停气泡、写着问题、窗口开着：角标加粗一档（同引线的 is-hot / is-open） */
.img-ask-mark:is(.is-hot, .is-compose, .is-live) { --tw: 3px; }
/* 问出去的那一刻拖出来的框直接换成角标，不另做淡入：那时页边引线正在画、气泡正滑进来，同一刻不再多一样在动 */

/* 引文卡上的图：缩略图 + 一行出处（右栏旁问顶上） */
.anchor-image { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 4px 0 2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.anchor-image__thumb {
  position: relative;
  flex: none;
  width: 88px;
  height: 58px;
  overflow: hidden;
  border-radius: var(--r-xs);
  box-shadow: 0 0 0 1px var(--border);
  background: var(--figure-paper);
}
.anchor-image__thumb > img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 导师画的图（沙箱里的 HTML）：同一张图按 440px 宽画一遍（和正文里差不多的版式），整张缩小进缩略图，只看不点；
   下面两个缩放是第一帧的近似，画好后由 workspace.js fitThumbScale 按框和图的实际大小缩放、居中 */
.thumb-scale { position: absolute; top: 0; left: 0; display: block; width: 440px; transform-origin: 0 0; pointer-events: none; }
.anchor-image__thumb > .thumb-scale { transform: scale(.2); }
.mn-float__thumb { position: relative; }
.mn-float__thumb > .thumb-scale { transform: scale(.1228); }
.thumb-scale > :is(.html-visual-card, .canvas-visual-card) { width: 440px; max-width: none; margin: 0; }
.thumb-scale > :is(.html-visual-card, .canvas-visual-card) figcaption { display: none; }
.thumb-scale > :is(.html-visual-card, .canvas-visual-card) :is(.html-visual-stage, .canvas-visual-stage) { box-shadow: none; border-radius: 0; }
.anchor-image__mark { position: absolute; border: 1.5px solid var(--accent); border-radius: 2px; pointer-events: none; }
.anchor-image__text { min-width: 0; color: var(--muted); font-size: var(--fs-caption); line-height: 1.5; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.anchor-image:hover .anchor-image__thumb { box-shadow: 0 0 0 1px var(--accent); }
.anchor-image:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
.aside-pane > .anchor-card:has(.anchor-image) { max-height: none; }
[data-theme="dark"] .anchor-image__thumb { box-shadow: 0 0 0 1px var(--border-strong); }

/* 笔记里的旁问：说明行前一个笔记小图标；引文点了回到笔记那几行 */
.anchor-card > .caption.is-note { display: inline-flex; align-items: center; gap: 5px; }
.anchor-card > .caption.is-note .icon { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aside-pane .anchor-quote.is-link { cursor: pointer; }
.aside-pane .anchor-quote.is-link:hover { color: var(--ink); }

/* 页边浮窗头（问过以后）：图的缩略图代替那段字 */
.mn-float__quote.has-thumb { display: flex; align-items: center; gap: 8px; -webkit-line-clamp: unset; cursor: pointer; }
.mn-float__thumb { flex: none; width: 54px; height: 36px; overflow: hidden; border-radius: var(--r-xs); box-shadow: 0 0 0 1px var(--border); background: var(--figure-paper); }
.mn-float__thumb > img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 手机上问过的旁问铺满（placeTall）：头上有整行宽，缩略图放大到看得清线和点 */
.mn-float.is-tall .mn-float__thumb { width: 112px; height: 70px; }
.mn-float__thumb-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  .img-ask.is-in { animation: none; }
  .img-ask__hint { animation: none !important; }
}

/* 触屏贴底的选区条挂在 body 上（workspace.js seatTouchPill）：它在的时候，左下角的输入圆钮和「回到最新」让开，
   不在选区条边上露出半颗（同页边旁问贴底输入条的让位） */
body:has(> .selection-pill.is-touch:not([hidden])) :is(.composer-launcher, .scroll-to-latest) { visibility: hidden; }

/* ---------- 右栏旁问列表（t-20261027-sgwh，aside-rail.js） ----------
   旁问这一栏不再有一排「旁问 N」标签（标签条还在，只是藏起来：display:none，读屏、键盘也到不了，它们走列表的行和返回钮）：
   先是一张列表，点进去是那条旁问，头部左边一个返回钮。 */
.rp-section[data-view="aside"] > .rp-tabbar > .wtab-strip { display: none; }
/* 列表页：放大、关闭两颗钮和一级标签「旁问」同一行，不留一条空着的标签条 */
.rp-body > .rp-primary-tabs:not([hidden]) ~ .rp-section[data-view="aside"].is-list > .rp-tabbar { position: relative; z-index: 2; align-self: flex-end; box-sizing: border-box; height: 42px; margin-top: -43px; padding: 6px 6px 0; border-bottom: 0; background: transparent; }
.aside-listback { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-right: auto; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); cursor: pointer; transition: background-color var(--motion-t0) linear, color var(--motion-t0) linear; }
.aside-listback[hidden] { display: none; }
.aside-listback:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.aside-listback:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.aside-listback .al-icon { width: 18px; height: 18px; }
.al-icon { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.rp-pane.aside-list-pane { padding: 6px 8px 24px; }
.rp-pane.aside-list-pane.is-on { display: block; height: 100%; overflow-y: auto; }
.al-list { margin: 0; padding: 0; list-style: none; }
.al-list > li + li { border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.al-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; width: 100%; padding: 11px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); text-align: left; cursor: pointer; transition: background-color var(--motion-t0) linear; }
.al-row:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.al-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.al-ico { display: grid; justify-items: center; align-content: start; padding-top: 2px; color: var(--muted); }
.al-text { display: grid; gap: 2px; min-width: 0; }
.al-quote { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--fs-ui)/1.5 var(--font-sans); }
.al-ans { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 400 12.5px/1.5 var(--font-sans); }
.al-ans:empty { display: none; }

/* 当前开着的这一条：从右栏顶上的引文卡淡淡地引回正文里它问的地方（滚动时跟随，锚点滚出视野就收起） */
.aside-lead { position: fixed; inset: 0; z-index: 4; width: 100vw; height: 100vh; overflow: visible; pointer-events: none; opacity: 0; transition: opacity var(--motion-t0) linear; }
.aside-lead.is-on { opacity: 1; }
.aside-lead__line { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; opacity: .5; }
.aside-lead__dot { fill: var(--accent); opacity: .65; }
/* 从白纸上的框 / 课件页出发的，先走在白纸上：用白纸上的笔 */
.aside-lead.is-paper :is(.aside-lead__line, .aside-lead__dot) { stroke: var(--paper-pen); }
.aside-lead.is-paper .aside-lead__dot { fill: var(--paper-pen); stroke: none; }
.aside-lead.is-paper .aside-lead__line { opacity: .75; }
@media (prefers-reduced-motion: reduce) {
  .aside-lead { transition: none; }
}

/* ---------- 旁问窗格底部的引文条（t-20261027-sgwh，aside-quote.js）----------
   在回答里选一句、点「引用」，那一句挂在窗格底部（窗格里原来的输入框收起了，小人的输入条替它收话）：左边一道竖线（同聊天里的引文），一行放不下就省略，× 去掉这一条。
   发出去以后这几句留在学生那条消息的开头，样子相同。 */
.aside-quotes { flex: none; display: grid; gap: 2px; max-height: 84px; margin: 6px 0; padding: 0; overflow-y: auto; list-style: none; }
.aside-quotes > li { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 1px 2px 1px 8px; border-left: 2px solid var(--accent); }
/* 小人的输入条（c2dr）浮在窗格底边：引文条留出它的位置，坐在它的正上方，不被盖住（workspace.js seatAsideQuoteStrips；输入条在窗格顶上时引文条跟到引文卡下面） */
.aside-quotes.is-under-say { margin-bottom: 60px; }
.aq-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--fs-caption); line-height: 1.6; }
.aq-del { display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; transition: background-color var(--motion-t0) linear, color var(--motion-t0) linear; }
.aq-del:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.aq-del:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.aq-del svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.amsg-user > .amsg-quote { margin-bottom: 4px; padding-left: 8px; border-left: 2px solid var(--accent); color: var(--muted); font-size: var(--fs-caption); line-height: 1.6; overflow-wrap: anywhere; }
.amsg-user > .amsg-said { white-space: pre-wrap; overflow-wrap: anywhere; }