extension/content.css

/* Extension-only: underline overlay + Custom Highlight.
 * Find bar lives in Shadow DOM (see content.js).
 *
 * 性能：网页一律 ::highlight（绑 Range，浏览器绘）；PDF 才用 #il-overlay-host
 * （getClientRects → 绝对定位条）。勿在网页上为「好对齐」改回 overlay——复杂页上
 * 整段 getClientRects 可达秒级。PDF canvas 含字形，红底会蒙字，故 token/蓝线仍 overlay。
 *
 * token（网页）：::highlight(il-token-*) 底色在真实字下
 * token（PDF）：.il-token-underline 红下划线
 * gray：::highlight(il-gray)，统一灰 = CanvasText×Canvas（未搜区：窗前 ∪ 前沿后；全文预览可整篇）
 * underline / pending-underline（网页）：::highlight 蓝下划线
 * underline / pending-underline（PDF）：#il-overlay-host 盖层，可叠画；统一蓝
 * pending：等待染色；若最终无红色 token，则留下作 chunk 级匹配标记
 */

#il-overlay-host {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 2147483644;
}

/* SYNC: client/src/shared/vis/constants.ts → HIGHLIGHT_CONSTANTS
 * UNDERLINE_WIDTH=2, HIGHLIGHT_COLOR fallback #1e6fff
 * pending：等待染色 / 无 token 时的 chunk 匹配标记；与导航线同色，下移叠画、生命周期互不干涉 */
.il-chunk-underline,
.il-chunk-underline-pending {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  height: 2px;
  border-radius: 2px;
  background: #1e6fff;
  z-index: 1;
}
/* 相对导航线下移 2px（=线高），同位叠画时紧贴、不被盖住 */
.il-chunk-underline-pending {
  transform: translateY(2px);
}

/*
 * token 色阶：16 档。
 * SYNC: SurprisalColorConfig → SURPRISAL_RED_RGB / SURPRISAL_MAX_ALPHA(0.7)
 * alpha = ((level+1)/16) * 0.6
 * 注：终点 alpha 用 0.6（介于网页端默认 0.7 与弱化 0.5 之间）；如需调整改最后一项。
 * 网页 ::highlight 底色（终点 alpha 0.6）/ PDF 红下划线（终点不透明）分用色阶。
 */
:root {
  --il-token-0: rgba(255, 71, 64, 0.0375);
  --il-token-1: rgba(255, 71, 64, 0.075);
  --il-token-2: rgba(255, 71, 64, 0.1125);
  --il-token-3: rgba(255, 71, 64, 0.15);
  --il-token-4: rgba(255, 71, 64, 0.1875);
  --il-token-5: rgba(255, 71, 64, 0.225);
  --il-token-6: rgba(255, 71, 64, 0.2625);
  --il-token-7: rgba(255, 71, 64, 0.3);
  --il-token-8: rgba(255, 71, 64, 0.3375);
  --il-token-9: rgba(255, 71, 64, 0.375);
  --il-token-10: rgba(255, 71, 64, 0.4125);
  --il-token-11: rgba(255, 71, 64, 0.45);
  --il-token-12: rgba(255, 71, 64, 0.4875);
  --il-token-13: rgba(255, 71, 64, 0.525);
  --il-token-14: rgba(255, 71, 64, 0.5625);
  --il-token-15: rgba(255, 71, 64, 0.6);
}

::highlight(il-token-0) { background-color: var(--il-token-0); }
::highlight(il-token-1) { background-color: var(--il-token-1); }
::highlight(il-token-2) { background-color: var(--il-token-2); }
::highlight(il-token-3) { background-color: var(--il-token-3); }
::highlight(il-token-4) { background-color: var(--il-token-4); }
::highlight(il-token-5) { background-color: var(--il-token-5); }
::highlight(il-token-6) { background-color: var(--il-token-6); }
::highlight(il-token-7) { background-color: var(--il-token-7); }
::highlight(il-token-8) { background-color: var(--il-token-8); }
::highlight(il-token-9) { background-color: var(--il-token-9); }
::highlight(il-token-10) { background-color: var(--il-token-10); }
::highlight(il-token-11) { background-color: var(--il-token-11); }
::highlight(il-token-12) { background-color: var(--il-token-12); }
::highlight(il-token-13) { background-color: var(--il-token-13); }
::highlight(il-token-14) { background-color: var(--il-token-14); }
::highlight(il-token-15) { background-color: var(--il-token-15); }

/* PDF token：3px；上移 1px，与蓝线叠画时略偏上（z-index 仍压在蓝线之上）。
 * 线比色块更细，色阶终点 alpha=1（网页 ::highlight 仍用 --il-token-* 的 0.6）。
 * alpha = (level+1)/16 */
.il-token-underline {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  height: 3px;
  border-radius: 2px;
  transform: translateY(-1px);
  z-index: 2;
}
.il-token-underline[data-il-token-level="0"] { background-color: rgba(255, 71, 64, 0.0625); }
.il-token-underline[data-il-token-level="1"] { background-color: rgba(255, 71, 64, 0.125); }
.il-token-underline[data-il-token-level="2"] { background-color: rgba(255, 71, 64, 0.1875); }
.il-token-underline[data-il-token-level="3"] { background-color: rgba(255, 71, 64, 0.25); }
.il-token-underline[data-il-token-level="4"] { background-color: rgba(255, 71, 64, 0.3125); }
.il-token-underline[data-il-token-level="5"] { background-color: rgba(255, 71, 64, 0.375); }
.il-token-underline[data-il-token-level="6"] { background-color: rgba(255, 71, 64, 0.4375); }
.il-token-underline[data-il-token-level="7"] { background-color: rgba(255, 71, 64, 0.5); }
.il-token-underline[data-il-token-level="8"] { background-color: rgba(255, 71, 64, 0.5625); }
.il-token-underline[data-il-token-level="9"] { background-color: rgba(255, 71, 64, 0.625); }
.il-token-underline[data-il-token-level="10"] { background-color: rgba(255, 71, 64, 0.6875); }
.il-token-underline[data-il-token-level="11"] { background-color: rgba(255, 71, 64, 0.75); }
.il-token-underline[data-il-token-level="12"] { background-color: rgba(255, 71, 64, 0.8125); }
.il-token-underline[data-il-token-level="13"] { background-color: rgba(255, 71, 64, 0.875); }
.il-token-underline[data-il-token-level="14"] { background-color: rgba(255, 71, 64, 0.9375); }
.il-token-underline[data-il-token-level="15"] { background-color: rgba(255, 71, 64, 1); }

/*
 * 未分析后缀置灰：统一灰（不跟链接/标题各自字色）。
 * CanvasText / Canvas 随色彩方案变，深浅色均可读。
 */
::highlight(il-gray) {
  color: color-mix(in srgb, CanvasText 40%, Canvas 60%);
}

/* 分割线锚点：建立定位上下文，子线用 client−parentRect，避免 body/html margin 把线挤到字上 */
#il-scope-divider-host {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 2147483645;
}

/* 从当前位置：范围预览分割线。横向 CSS 拉满（超宽过冲），JS 只写 top */
#il-scope-divider {
  position: absolute;
  left: -100vw;
  width: 300vw;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px dashed rgba(128, 128, 128, 0.65);
  pointer-events: none;
}

/* 网页导航/等待蓝线：原生 text-decoration，不走 overlay getClientRects.
 * pending 相对导航下移 = 线厚（2→4），贴合成一条 4px 加粗；skip-ink 关掉，
 * 避免两条在降部断点错位，看起来像平行双线。 */
::highlight(il-underline) {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #1e6fff;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}
::highlight(il-pending-underline) {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: #1e6fff;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}