/* @component SelectionPopup — 选中文字弹出工具栏
       @state show/hide (opacity + transform)
       @gotcha 必须 position:fixed，不受滚动和overflow影响
       @interaction 选中文字→弹出；点击空白→消失；点击按钮→执行动作
    */
    .selection-popup {
      position: fixed; z-index: 100;
      background: white; border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
      padding: 4px; display: flex; gap: 2px;
      opacity: 0; pointer-events: none;
      transform: translateY(4px);
      transition: opacity 0.15s, transform 0.15s;
    }
    .selection-popup.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .popup-btn {
      display: flex; align-items: center; gap: 5px;
      padding: 7px 10px; border-radius: 7px; border: none;
      background: transparent; cursor: pointer;
      font-family: inherit; font-size: 12px; font-weight: 500;
      color: var(--on-surface-variant);
      transition: all 0.12s; white-space: nowrap;
    }
    .popup-btn:hover { background: var(--hover-bg); color: var(--on-surface); }
    .popup-btn.highlight:hover { background: rgba(255,235,59,0.2); color: #f9a825; }
    .popup-btn.annotate:hover { background: var(--alpha-08); color: var(--primary); }
    .popup-btn.tag:hover { background: rgba(76,175,80,0.08); color: #2e7d32; }
    .popup-btn .btn-icon { font-size: 14px; }

    /* @component AnnotationHighlight — 标注高亮文本
       @state 三种颜色：黄(荧光笔) / 紫(批注) / 绿(知识点)
    */
    mark.ann-hl {
      position: relative;
      border-radius: 3px; padding: 1px 2px;
      cursor: pointer; transition: background 0.15s, border-bottom-color 0.15s, filter 0.15s;
    }
    mark.ann-hl.hl-yellow { background: rgba(255,235,59,0.45); border-bottom: 2px solid rgba(251,192,45,0.55); }
    mark.ann-hl.hl-purple { background: var(--alpha-12); border-bottom: 2px solid var(--alpha-35); }
    mark.ann-hl.hl-green { background: rgba(76,175,80,0.12); border-bottom: 2px solid rgba(76,175,80,0.35); }
    mark.ann-hl:hover { filter: brightness(0.92); }
    mark.ann-hl.active-hl {
      outline: 2px solid var(--primary); outline-offset: 2px;
      border-radius: 4px;
    }

    /* 高亮删除按钮 — 浮在被激活标记文字末端的右上角 */
    .hl-delete-btn {
      position: absolute; top: -10px; right: -4px;
      font-size: 18px; line-height: 1;
      color: var(--error); cursor: pointer;
      font-weight: 700;
      animation: hlDelIn 0.12s ease;
    }
    .hl-delete-btn:hover { color: #c62828; transform: scale(1.2); }
    @keyframes hlDelIn {
      from { opacity: 0; transform: scale(0); }
      to { opacity: 1; transform: scale(1); }
    }

    /* 高亮开关关闭时，只隐藏黄色荧光高亮的背景色（批注/知识点不受影响） */
    .hide-highlights mark.ann-hl.hl-yellow {
      background: transparent !important;
      border-bottom-color: transparent !important;
    }
    /* 批注备忘按钮关闭时，隐藏批注备忘整体（紫色批注 + 绿色知识点）的背景色 */
    .hide-annotations mark.ann-hl.hl-purple,
    .hide-annotations mark.ann-hl.hl-green {
      background: transparent !important;
      border-bottom-color: transparent !important;
    }
    /* 高亮被对应开关隐藏时，选中的高亮段落不再显示 × 删除按钮 */
    .hide-highlights mark.ann-hl.hl-yellow .hl-delete-btn,
    .hide-annotations mark.ann-hl.hl-purple .hl-delete-btn,
    .hide-annotations mark.ann-hl.hl-green .hl-delete-btn {
      display: none;
    }

    /* @component AnnotationSticky — 批注备忘
       @state 正常显示
       @gotcha 使用 position:absolute 在 annotationLayer 中，rAF 同步位置
       @tokens 背景 #fffbeb, 边框 #fde68a
    */
    .ann-sticky {
      position: absolute; pointer-events: auto;
      display: flex; flex-direction: column;
      background: #fffbef; border: 1px solid #f0dc9a;
      border-radius: 8px; box-shadow: 2px 3px 12px rgba(0,0,0,0.07);
      font-family: inherit; font-size: 13px;
      min-width: 200px; max-width: 420px;
      z-index: 16; animation: stickyIn 0.25s ease;
      /* 高度由内容决定，无上限；宽度通过右下角手柄拖拽调整 */
    }
    @keyframes stickyIn {
      from { opacity: 0; transform: scale(0.9) translateX(8px); }
      to { opacity: 1; transform: scale(1) translateX(0); }
    }
    .ann-sticky-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 6px 10px 0; gap: 6px;
      cursor: grab; user-select: none;
    }
    .ann-sticky-header:active { cursor: grabbing; }
    .ann-sticky.dragging { opacity: 0.92; box-shadow: 4px 6px 20px rgba(0,0,0,0.12); transition: none; }
    .ann-sticky-type {
      display: flex; align-items: center; gap: 4px;
      font-size: 11px; color: var(--on-surface-variant);
    }
    .ann-sticky-type .sticky-dot {
      width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    }
    .ann-sticky-close {
      width: 22px; height: 22px; border-radius: 50%; border: none;
      background: transparent; cursor: pointer; display: flex;
      align-items: center; justify-content: center;
      color: var(--on-surface-variant); font-size: 14px;
      transition: all 0.12s; line-height: 1;
    }
    .ann-sticky-close:hover { background: rgba(0,0,0,0.06); color: var(--error); }
    .ann-sticky textarea {
      flex: 1; resize: none; border: none; outline: none;
      background: transparent; padding: 6px 10px 8px;
      font-family: inherit; font-size: 13px; line-height: 1.6;
      color: var(--on-surface); min-height: 60px;
      /* 高度随内容自动增长，宽度通过右下角手柄调整 */
    }
    .ann-sticky textarea::placeholder { color: #c0b878; font-size: 12px; }
    .ann-sticky-footer {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 8px 6px; gap: 4px;
    }
    .sticky-hl-text {
      font-size: 11px; color: #b0a060; flex: 1;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .sticky-delete-btn {
      padding: 2px 8px; border-radius: 4px; border: none;
      background: transparent; cursor: pointer;
      font-family: inherit; font-size: 11px; color: var(--on-surface-variant);
      transition: all 0.12s;
    }
    .sticky-delete-btn:hover { color: var(--error); background: rgba(179,38,30,0.06); }

    /* 便利贴调整大小手柄 — 同时调宽和高 */
    .ann-sticky-resize {
      position: absolute; bottom: 0; right: 0; z-index: 2;
      width: 20px; height: 20px; cursor: nwse-resize;
      background: linear-gradient(135deg, transparent 50%, #d0c8a0 50%);
      border-radius: 0 0 8px 0; opacity: 0.4; transition: opacity 0.2s;
    }
    .ann-sticky-resize:hover { opacity: 1; }
    .ann-sticky.resizing { transition: none; user-select: none; }

    /* @component ConnectorLine — 高亮到便利贴连线
       @gotcha SVG在annotationLayer中绝对定位，rAF同步
    */
    .ann-connector-svg {
      position: absolute; top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none; z-index: 15;
    }
    .ann-connector-svg line {
      stroke: #d0c8a0; stroke-width: 1.5;
      stroke-dasharray: 4 3;
    }