.text-highlight { border-radius: 2px; padding: 0 0.12em; }

  /* Note decoration */
  .text-highlight.has-note {
    position: relative;
    border-bottom: 1px dashed rgba(0,0,0,0.55);
  }
  .text-highlight.has-note::after {
    content: "";
    position: absolute;
    right: -2px; top: -2px;
    border-width: 0 6px 6px 0;
    border-style: solid;
    border-color: transparent rgba(0,0,0,0.35) transparent transparent;
    width: 0; height: 0;
    pointer-events: none;
  }

  .highlight-toolbar {
    position: absolute; /* switched to fixed on Safari in JS */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.14);
    padding: 8px 10px;
    display: flex; gap: 10px; align-items: center;
    z-index: 2147483647;
    font-family: system-ui, sans-serif;
    font-size: 14px;
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    will-change: transform, top, left;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  /* Safari: remove blue tap flash on toolbar */
  .highlight-toolbar, .highlight-toolbar * { -webkit-tap-highlight-color: transparent; }

  /* Color swatches (click = apply+save+close) */
  .color-btn {
    width: 28px; height: 28px;
    border-radius: 7px; border: 1px solid #c8c8c8;
    cursor: pointer; box-sizing: border-box;
  }
  .color-btn.active { outline: 2px solid #000; outline-offset: 1px; }

  /* Icon buttons (light grey bg as requested) */
  .highlight-toolbar .icon-btn {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #c8c8c8; border-radius: 8px; background: #eee;
    cursor: pointer; padding: 0; line-height: 1;
  }
  .highlight-toolbar .icon-btn:hover { background: #e4e4e4; }
  .highlight-toolbar .icon-btn img { width: 18px; height: 18px; display: block; }
  .highlight-toolbar .icon-btn svg { width: 18px; height: 18px; pointer-events: none; }

  /* Make Close (×) graphic black via currentColor */
  .highlight-toolbar .icon-btn.close { color: #000; }

  /* Safari: increase spacing between color swatches */
  .is-safari .highlight-toolbar .color-btn + .color-btn { margin-left: 6px; }

  /* Note popover */
  .note-popover {
    position: absolute; /* may switch to fixed on Safari */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    padding: 10px;
    z-index: 2147483647;
    width: 300px;
    will-change: transform, top, left;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    overflow: hidden; /* ensure inner content never overflows */
  }
  /* Keep everything inside the popover boxed correctly */
  .note-popover, .note-popover * { box-sizing: border-box; }

  .note-popover header {
    font-weight: 600; font-size: 14px; margin-bottom: 6px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
  .note-popover textarea {
    width: 100%; max-width: 100%; display: block; margin: 0;
    min-height: 110px; resize: vertical;
    padding: 10px; border: 1px solid #ccc; border-radius: 10px;
    font: 16px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* >=16px avoids iOS zoom */
    overflow: auto; -webkit-appearance: none;
    word-wrap: break-word; white-space: pre-wrap;
  }
  .note-popover .row { margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end; }
  .note-popover button {
    border: 1px solid #c8c8c8; background: #fff; border-radius: 10px;
    padding: 8px 12px; cursor: pointer; font: 14px system-ui, sans-serif;
    touch-action: manipulation;
  }
  .note-popover button.primary { background: #0b5cff; color: #fff; border-color: #0b5cff; }
  .note-popover button.delete { background: #eee; border-color: #c8c8c8; color: #222; }
  .note-popover button.delete:hover { background: #e4e4e4; }