/* ── 高亮标记基础样式 ────────────────────────────────────────── */
.bk-highlight { cursor: pointer; border-radius: 2px; transition: opacity .2s; color: inherit !important; text-underline-offset: 3px; position: relative; }
.bk-highlight:hover { opacity: .8; }

/* 下划线：用 text-decoration，颜色由 data-color 驱动 */
.bk-highlight[data-underline="true"] {
  text-decoration: underline;
  text-decoration-color: var(--brand, #3D8A5A);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* 暗色模式下划线颜色 */
[data-theme="dark"] .bk-highlight[data-underline="true"] {
  text-decoration-color: var(--brand, #5EAE7E);
}

/* 有颜色高亮时，下划线跟随高亮色系 */
.bk-highlight[data-underline="true"][data-color="yellow"]  { text-decoration-color: #a88530; }
.bk-highlight[data-underline="true"][data-color="green"]   { text-decoration-color: #3f7a50; }
.bk-highlight[data-underline="true"][data-color="blue"]    { text-decoration-color: #3a6d85; }
.bk-highlight[data-underline="true"][data-color="pink"]    { text-decoration-color: #994a4c; }

/* 批注波浪线：用 ::after 伪元素画 SVG，不占用 text-decoration，可与其他标记共存 */
.bk-highlight[data-note="true"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='3' viewBox='0 0 8 3'%3E%3Cpath d='M0 1.5 Q2 0 4 1.5 Q6 3 8 1.5' fill='none' stroke='%233D8A5A' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 8px 3px;
  pointer-events: none;
}
[data-theme="dark"] .bk-highlight[data-note="true"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='3' viewBox='0 0 8 3'%3E%3Cpath d='M0 1.5 Q2 0 4 1.5 Q6 3 8 1.5' fill='none' stroke='%235EAE7E' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* 暗色模式高亮背景 */
[data-theme="dark"] .bk-highlight { color: inherit !important; }
[data-theme="dark"] .bk-highlight[data-color="yellow"] { background: rgba(212, 168, 67, 0.5) !important; }
[data-theme="dark"] .bk-highlight[data-color="green"]  { background: rgba(94, 158, 111, 0.5) !important; }
[data-theme="dark"] .bk-highlight[data-color="blue"]   { background: rgba(90, 139, 168, 0.5) !important; }
[data-theme="dark"] .bk-highlight[data-color="pink"]   { background: rgba(196, 120, 122, 0.5) !important; }

/* 下划线+批注共存：波浪线下移避开 text-decoration underline */
.bk-highlight[data-underline="true"][data-note="true"]::after {
  bottom: -3px;
}

/* ── 选区菜单（文本选中后弹出的颜色选择浮窗） ──────────────────── */
.hl-menu { display: none; flex-direction: column; gap: 5px; padding: 8px; background: var(--card-bg, #FFFFFF); border-radius: 16px; box-shadow: none; border: 1px solid var(--border, #E5E2DD); z-index: 9999; min-width: min(220px, calc(100vw - 24px)); max-width: min(340px, calc(100vw - 24px)); -webkit-user-select: none; user-select: none; transition: opacity .15s ease; }
.hl-menu-row { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; width: 100%; }
.hl-sel-row { gap: 6px; flex-wrap: nowrap; }
.hl-sel-sep { width: 1px; height: 24px; background: var(--border, #E5E2DD); flex-shrink: 0; margin: 0 2px; }
.hl-sel-note-btn { min-height: 34px; padding: 4px 10px; font-size: var(--text-sm); flex-shrink: 0; white-space: nowrap; }
.hl-menu-btn { flex: 1; min-width: 0; min-height: 34px; padding: 5px 10px; background: var(--surface-alt, #EDEAE4); border: 1px solid var(--border, #E5E2DD); border-radius: 8px; font-size: var(--text-sm); font-weight: 600; color: var(--text, #1A1918); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.hl-menu-btn:active { transform: scale(.95); background: var(--muted, #ccc); }
.hl-menu-btn-danger { color: var(--danger-text, #c62828); border-color: var(--danger-border, #fed7d7); }
.hl-menu-btn-danger:active { background: var(--danger-bg, #fff5f5); }

/* ── 注解菜单：预览气泡 + 工具栏 ─────────────────── */
.hl-ann-menu { gap: 0; padding: 0; min-width: min(260px, calc(100vw - 24px)); max-width: min(360px, calc(100vw - 24px)); overflow: hidden; }
.hl-ann-note-bubble { display: none; border-bottom: 1px solid var(--border, #E5E2DD); padding: 14px 16px 10px; width: 100%; box-sizing: border-box; }
.hl-ann-note-body { font-size: var(--text-base); color: var(--text, #1A1918); line-height: 1.75; word-break: break-word; max-height: 7em; overflow: hidden; display: -webkit-box; line-clamp: 4; -webkit-line-clamp: 4; -webkit-box-orient: vertical; white-space: pre-wrap; -webkit-user-select: text; user-select: text; }
.hl-ann-note-expand { display: block; text-align: center; padding: 6px 0 0; font-size: var(--text-xs); color: var(--brand, #3D8A5A); background: none; border: none; cursor: pointer; width: 100%; line-height: 1.4; min-height: 28px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; opacity: .8; }
.hl-ann-note-expand:active { opacity: 1; }
.hl-ann-toolbar { display: flex; gap: 0; align-items: stretch; width: 100%; padding: 4px 6px; box-sizing: border-box; }
.hl-ann-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; min-width: 0; min-height: 44px; padding: 4px 2px; background: transparent; border: none; border-radius: 8px; font-size: var(--text-xs); color: var(--text, #1A1918); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background .12s; }
.hl-ann-tool:active { background: var(--muted, #ccc); }
.hl-ann-tool-icon { font-size: 1.4em; line-height: 1; }
.hl-ann-tool-label { font-size: var(--text-lg); font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.hl-ann-tool-danger { color: var(--danger-text, #c62828); }
.hl-ann-tool-danger:active { background: var(--danger-bg, #fff5f5); }
.hl-ann-tool-sep { width: 1px; align-self: center; height: 24px; background: var(--border, #E5E2DD); flex-shrink: 0; margin: 0 2px; }

/* ── 颜色面板（注解菜单中的可折叠面板） ──────────────────────── */
.hl-color-panel { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.hl-color-panel.open { max-height: 60px; }
.hl-color-panel .hl-menu-row { padding-top: 4px; }
.hl-color-dot { width: 28px; height: 28px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,.15); transition: transform .15s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.hl-color-dot:active { transform: scale(.9); }
.hl-color-dot.selected { border-color: var(--text, #1A1918); transform: scale(1.15); box-shadow: 0 0 0 1px var(--text, #1A1918); }

/* ── 下划线按钮 ────────────────────────────────────────────── */
.hl-underline-btn { min-width: 36px; min-height: 30px; padding: 4px 8px 2px; background: var(--surface-alt, #EDEAE4); color: var(--text, #1A1918); border: 1px solid var(--border, #E5E2DD); border-bottom: 2px solid var(--brand, #3D8A5A); border-radius: 6px; font-size: var(--text-sm); font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.hl-underline-btn.active { background: var(--brand, #3D8A5A); color: #fff; border-color: var(--brand, #3D8A5A); border-bottom-color: rgba(255,255,255,.5); }

/* ── 笔记模态框 ──────────────────────────────────────────────── */
.hl-modal-mask { display: none; position: fixed; inset: 0; background: rgba(26,25,23,0.4); z-index: 10100; align-items: center; justify-content: center; padding: 16px; touch-action: none; overscroll-behavior: none; }
.hl-modal-card { background: var(--card-bg, #FFFFFF); border-radius: 16px; padding: 18px; width: 100%; max-width: 420px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.hl-modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--text, #1A1918); }
.hl-note-textarea { width: 100%; box-sizing: border-box; resize: vertical; overflow-y: auto; border: 1px solid var(--border, #E5E2DD); border-radius: 8px; padding: 10px; font-size: var(--text-base); color: var(--text, #1A1918); background: var(--surface-alt, #EDEAE4); font-family: inherit; line-height: 1.6; min-height: 100px; max-height: 60vh; }
.hl-note-textarea:focus { outline: none; border-color: var(--brand, #3D8A5A); box-shadow: 0 0 0 2px var(--interactive-soft-border, rgba(var(--brand-rgb, 61,138,90),.16)); }
.hl-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.hl-modal-btn { min-height: 34px; padding: 5px 16px; border-radius: 8px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; border: 1px solid var(--border, #E5E2DD); flex-shrink: 0; white-space: nowrap; }
.hl-modal-cancel { background: var(--surface-alt, #EDEAE4); color: var(--text, #1A1918); }
.hl-modal-save { background: var(--brand, #3D8A5A); color: #fff; border-color: var(--brand, #3D8A5A); }
.hl-modal-save:active { opacity: .85; }

/* ── 划线笔记图标与展开视图（bk-hl-note-* 前缀） ─────────────── */
.bk-hl-note-icon { font-size: var(--text-xs); cursor: pointer; vertical-align: super; line-height: 1; margin-left: 1px; -webkit-user-select: none; user-select: none; }
.bk-hl-note-expanded-card { background: var(--card-bg, #FFFFFF); border-radius: 16px; width: 100%; max-width: 520px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.bk-hl-note-expanded-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid var(--border, #E5E2DD); flex-shrink: 0; }
.bk-hl-note-expanded-title { font-size: var(--text-md); font-weight: 600; color: var(--brand, #3D8A5A); flex: 1; }
.bk-hl-note-expanded-edit { padding: 4px 12px; border-radius: 8px; font-size: var(--text-sm); font-weight: 600; color: var(--brand, #3D8A5A); background: var(--surface-alt, #EDEAE4); border: 1px solid var(--border, #E5E2DD); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; flex-shrink: 0; margin-left: 8px; }
.bk-hl-note-expanded-edit:active { background: var(--muted, #ccc); }
.bk-hl-note-expanded-body { overflow-y: auto; padding: 16px; font-size: var(--text-md); color: var(--text, #1A1918); line-height: 1.85; white-space: pre-wrap; word-break: break-word; flex: 1; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; -webkit-user-select: text; user-select: text; }