/* annotate.css — 内容互动层样式（划线/报错/收藏）
 * 跟随 shared.css 变量（--ink/--bg-2/--rule/--accent/--x-h/--cn），带 fallback 便于无 shared.css 的本地测试页。
 * 划线视觉 = 微信式细下划线，只在文字下方，不改背景/不动排版。 */

/* 划线：本人的细下划线，仅本人可见、不挡内容；点击可就地删除 */
.hl-mark {
  border-bottom: 2px solid var(--x-h, #b8860b);
  border-bottom-color: color-mix(in srgb, var(--x-h, #b8860b) 60%, transparent);
  background: transparent;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
}
.hl-mark:hover {
  border-bottom-color: var(--x-h, #b8860b);
  background: color-mix(in srgb, var(--x-h, #b8860b) 10%, transparent);
}
/* 账号后台「跳到原位」短暂高亮 */
.hl-mark.hl-flash {
  background: color-mix(in srgb, var(--x-h, #b8860b) 22%, transparent);
  border-radius: 2px;
  transition: background .4s ease;
}

/* 选区工具条 */
.anno-bar {
  position: absolute; z-index: 9998; display: none;
  transform: translateX(-50%);
  background: var(--ink, #1d1d1b); border-radius: 8px;
  padding: 3px; gap: 2px; box-shadow: 0 4px 18px rgba(0, 0, 0, .26);
  font-family: var(--cn, "Noto Sans SC", system-ui, sans-serif);
}
.anno-bar::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink, #1d1d1b); border-bottom: 0;
}
/* 触屏：工具条在选区下方，箭头翻到条顶朝上 */
.anno-bar.below::after {
  bottom: auto; top: -5px;
  border: 5px solid transparent; border-bottom-color: var(--ink, #1d1d1b); border-top: 0;
}
.anno-bar-btn {
  appearance: none; border: 0; background: transparent; color: #fff;
  font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer;
  font-family: inherit; line-height: 1; white-space: nowrap;
}
.anno-bar-btn:hover { background: rgba(255, 255, 255, .14); }

/* toast */
.anno-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
  z-index: 9999; background: var(--ink, #1d1d1b); color: #fff;
  font-family: var(--cn, "Noto Sans SC", system-ui, sans-serif); font-size: 13.5px;
  padding: 10px 16px; border-radius: 22px; box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 86vw;
}
.anno-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.anno-toast a { color: var(--x-h, #f0c674); font-weight: 600; text-decoration: none; margin-left: 2px; }
.anno-toast a:hover { text-decoration: underline; }

/* 模态（报错表单 / 登录引导）*/
.anno-mask {
  position: fixed; inset: 0; z-index: 10000; background: rgba(20, 20, 18, .42);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  font-family: var(--cn, "Noto Sans SC", system-ui, sans-serif);
}
.anno-panel {
  background: var(--bg-2, #fff); border: 1px solid var(--rule, #e3e0d6); border-radius: 14px;
  width: 440px; max-width: 100%; padding: 22px 22px 18px; box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
}
.anno-panel-title { font-size: 16px; font-weight: 700; color: var(--ink, #1d1d1b); margin-bottom: 10px; }
.anno-panel-sub { font-size: 13px; color: var(--ink-soft, #6b6760); line-height: 1.6; margin-bottom: 16px; }
.anno-quote {
  font-size: 13px; color: var(--ink-soft, #57534c); background: var(--bg-3, #f4f1ea);
  border-left: 3px solid var(--x-h, #b8860b); border-radius: 4px;
  padding: 9px 12px; margin-bottom: 13px; max-height: 120px; overflow: auto; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.anno-textarea {
  width: 100%; box-sizing: border-box; min-height: 92px; resize: vertical;
  border: 1px solid var(--rule, #d8d4c8); border-radius: 8px; padding: 10px 12px;
  font-family: inherit; font-size: 14px; color: var(--ink, #1d1d1b); line-height: 1.6;
}
.anno-textarea:focus { outline: none; border-color: var(--accent, #1d4ed8); }
.anno-textarea.err { border-color: var(--stamp, #c8341f); background: #fdf3f1; }
.anno-count { font-size: 11.5px; color: var(--ink-soft, #8a857c); text-align: right; margin-top: 4px; }
.anno-panel-act { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.anno-btn {
  appearance: none; border: 1px solid var(--rule, #d8d4c8); background: var(--bg-2, #fff);
  color: var(--ink, #1d1d1b); font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 16px; border-radius: 8px; cursor: pointer;
}
.anno-btn:hover { background: var(--bg-3, #f4f1ea); }
.anno-btn[disabled] { opacity: .6; cursor: default; }
.anno-btn-go { background: var(--accent, #1d4ed8); border-color: var(--accent, #1d4ed8); color: #fff; }
.anno-btn-go:hover { background: #163fae; }

/* 收藏整篇按钮（固定右下）*/
.anno-fav {
  position: fixed; right: 18px; bottom: 20px; z-index: 9990;
  appearance: none; border: 1px solid var(--rule, #d8d4c8); background: var(--bg-2, #fff);
  color: var(--ink-soft, #57534c); font-family: var(--cn, "Noto Sans SC", system-ui, sans-serif);
  font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 22px; cursor: pointer;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .12); line-height: 1;
}
.anno-fav:hover { border-color: var(--x-h, #b8860b); color: var(--ink, #1d1d1b); }
.anno-fav.on { color: var(--x-h, #b8860b); border-color: color-mix(in srgb, var(--x-h, #b8860b) 55%, transparent); }

@media (max-width: 560px) {
  .anno-fav { right: 12px; bottom: 14px; padding: 8px 13px; }
  .anno-panel { padding: 18px 16px 14px; border-radius: 12px; }
  .anno-bar-btn { padding: 7px 13px; font-size: 14px; }
}