MediaWiki:Gadget-GrAnnotations.css: Difference between revisions

Line 1:

/*

* gr_annotations.css — grantha.io inline ~~comments~~ + ~~bookmarks~~

* gr_annotations.css — grantha.io inline Notes + Bookmarks + Feedback (v3)

* ═══════════════════════════════════════════════════════════════

* Standalone file. Include in MediaWiki:Common.css or via

* ResourceModules in extension.json.

*

* Covers:

* 1. Floating action strip (appears right of selection)

* 2. Right panel (collapsible overlay, two tabs: Comments / Bookmarks)

* 3. Comment cards (~~Google Docs style~~)

* 4. Bookmark cards

* 5. Highlighted anchor spans

* 6. Mobile-safe overlay behaviour

* ═══════════════════════════════════════════════════════════════

*/

/* ── Icon base ~~(reuses /images/*.svg already on Hostinger) ────────~~ */

/* ── Icon base ──────────────────────────────────────────────────── */

.gra-icon {

display: inline-block;

Line 25:

Line 13:

flex-shrink: 0;

}

.gra-icon-~~comment~~ { background-image: url('/images/commentary.svg'); }

/* comment.svg → Feedback (flag/report) */

.gra-icon-feedback { background-image: url('/images/commentary.svg'); }

/* notes.svg → Notes */

.gra-icon-note { background-image: url('/images/notes.svg'); }

.gra-icon-bookmark { background-image: url('/images/bookmark.svg'); }

.gra-icon-copy { background-image: url('/images/copy.svg'); }

/* ══════════════════════════════════════════════════════════════════

1. FLOATING ACTION STRIP

1. FLOATING ACTION STRIP (3 buttons)

~~Appears to the right of the content column on text selection.~~

~~Vertically stacked pill — mirrors Google Docs behaviour.~~

══════════════════════════════════════════════════════════════════ */

#gra-fab {

position: fixed; ~~/* fixed so it stays next to selection even on scroll */~~

position: fixed;

z-index: 10200;

display: none;

Line 45:

Line 34:

padding: 6px 5px;

box-shadow: 0 2px 10px rgba(0,0,0,0.14);

~~/* position set by JS via top/left */~~

}

#gra-fab.gra-fab-visible { display: flex; }

Line 63:

Line 51:

}

.gra-fab-btn:hover { background: #f5f5f5; }

.gra-fab-btn:hover .gra-fab-tooltip { opacity: 1; transform: translateX(-50%~~) translateY(0~~); }

.gra-fab-btn:hover .gra-fab-tooltip { opacity: 1; transform: translateX(0) translateY(-50%); }

~~/* Tooltip */~~

.gra-fab-tooltip {

position: absolute;

right: calc(100% + 8px);

top: 50%;

transform: translateX(0) translateY(-50%);

transform: translateX(4px) translateY(-50%);

white-space: nowrap;

background: rgba(30,30,30,0.82);

Line 86:

Line 73:

/* ══════════════════════════════════════════════════════════════════

2. RIGHT PANEL

~~Slides in from the right as an overlay.~~

~~On mobile it covers the full viewport width.~~

══════════════════════════════════════════════════════════════════ */

#gra-panel {

position: fixed;

top: 0;

right: -360px; ~~/* hidden off-screen */~~

right: -360px;

width: 340px;

height: 100vh;

Line 107:

Line 92:

#gra-panel.gra-panel-open { right: 0; }

~~/* Backdrop (mobile + wide screens when panel overlaps content) */~~

#gra-backdrop {

position: fixed;

Line 118:

Line 102:

#gra-backdrop.gra-backdrop-visible { display: block; }

~~/* ── Panel header ── */~~

#gra-panel-head {

display: flex;

Line 138:

Line 121:

#gra-panel-close:hover { background: #f5f5f5; color: #222; }

~~/* ── Tabs ── */~~

#gra-tabs {

display: flex;

Line 165:

Line 147:

.gra-tab .gra-icon { width: 16px; height: 16px; opacity: 0.5; }

.gra-tab:hover { color: #333; }

.gra-tab.gra-tab-active {

.gra-tab.gra-tab-active { color: #1a73e8; border-bottom-color: #1a73e8; }

color: #1a73e8;

.gra-tab.gra-tab-active .gra-icon {

border-bottom-color: #1a73e8;

opacity: 1;

filter: invert(30%) sepia(100%) saturate(500%) hue-rotate(190deg);

}

~~.gra-tab.gra-tab-active .gra-icon { opacity: 1; filter: invert(30%) sepia(100%) saturate(500%) hue-rotate(190deg); }~~

~~/* ── Tab content panes ── */~~

#gra-panel-body {

flex: 1;

Line 181:

Line 162:

/* ══════════════════════════════════════════════════════════════════

3. ~~COMMENT CARDS (Google Docs style)~~

3. FEEDBACK COMPOSER

══════════════════════════════════════════════════════════════════ */

~~/* Inline composer — appears anchored to selection, right side */~~

.gra-composer {

background: #fff;

Line 190:

Line 169:

border-radius: 8px;

box-shadow: 0 4px 16px rgba(0,0,0,0.14);

width: ~~300px~~;

width: 340px;

padding: 12px ~~14px 10px~~;

padding: 14px 16px 12px;

position: fixed;

z-index: 10150;

Line 202:

Line 181:

.gra-composer.gra-composer-visible { display: flex; }

/* Feedback composer header row */

.gra-composer-header {

display: flex;

align-items: center;

gap: 8px;

}

.gra-composer-header strong {

flex: 1;

font-size: 14px;

color: #202124;

}

.gra-btn-x {

background: none;

border: none;

cursor: pointer;

font-size: 16px;

color: #666;

padding: 2px 5px;

border-radius: 4px;

line-height: 1;

}

.gra-btn-x:hover { background: #f5f5f5; color: #222; }

/* Feedback field labels */

.gra-fb-field-label {

font-size: 11px;

font-weight: 600;

color: #5f6368;

text-transform: uppercase;

letter-spacing: 0.4px;

margin-bottom: -6px; /* tighten gap to input below */

}

/* Selected text quote preview */

.gra-fb-quote-label {

font-size: 11px;

color: #9aa0a6;

margin-bottom: -4px;

}

.gra-fb-quote {

font-size: 12px;

color: #5f6368;

font-style: italic;

background: #fafafa;

border-left: 3px solid #fbbc04;

border-radius: 0 4px 4px 0;

padding: 6px 10px;

line-height: 1.45;

max-height: 56px;

overflow: hidden;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

}

/* Issue type dropdown */

.gra-fb-select {

border: 1px solid #e0e0e0;

border-radius: 6px;

padding: 7px 10px;

font-size: 13px;

font-family: inherit;

color: #202124;

background: #fff;

outline: none;

transition: border-color 0.15s;

width: 100%;

box-sizing: border-box;

cursor: pointer;

}

.gra-fb-select:focus { border-color: #1a73e8; }

/* Email input */

.gra-fb-email-input {

min-height: unset !important;

height: 36px;

padding: 6px 10px !important;

}

/* Status message */

.gra-fb-status {

font-size: 12px;

min-height: 16px;

text-align: center;

}

.gra-fb-status.gra-fb-ok { color: #34a853; }

.gra-fb-status.gra-fb-err { color: #ea4335; }

/* ══════════════════════════════════════════════════════════════════

4. NOTE COMPOSER (local only)

══════════════════════════════════════════════════════════════════ */

.gra-composer-user {

display: flex;

Line 219:

Line 289:

font-weight: 600;

flex-shrink: 0;

~~overflow: hidden;~~

}

~~.gra-avatar img { width: 100%; height: 100%; object-fit: cover; }~~

.gra-composer-uname { font-weight: 600; color: #202124; font-size: 13px; }

.gra-composer-~~name~~ { font-weight: 600; color: #202124; font-size: 13px; }

.gra-composer-input {

Line 275:

Line 343:

.gra-btn-submit:disabled { background: #c5d8f8; cursor: default; }

/* ~~Saved comment~~ cards ~~in panel~~ */

/* ── Note cards ── */

.gra-~~comment~~-card {

.gra-note-card {

border: 1px solid #e8eaed;

border-radius: 8px;

Line 286:

Line 354:

transition: box-shadow 0.15s;

}

.gra-~~comment~~-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

.gra-note-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

.gra-~~comment~~-card.gra-card-active {

.gra-note-card.gra-card-active {

border-color: #~~fbbc04~~;

border-color: #34a853;

box-shadow: 0 0 0 2px rgba(~~251~~,~~188~~,4,0.3);

box-shadow: 0 0 0 2px rgba(52,168,83,0.25);

}

.gra-card-header {

Line 298:

Line 366:

}

.gra-card-meta { flex: 1; }

~~.gra-card-author { font-weight: 600; color: #202124; font-size: 12px; }~~

.gra-card-ts { font-size: 11px; color: #80868b; }

.gra-card-ts { font-size: 11px; color: #80868b~~; margin-top: 1px~~; }

.gra-card-quote {

font-size: 12px;

color: #5f6368;

border-left: 3px solid #~~fbbc04~~;

border-left: 3px solid #34a853;

padding-left: 8px;

margin-bottom: 6px;

font-style: italic;

line-height: 1.4;

~~/* clamp to 2 lines */~~

display: -webkit-box;

-webkit-line-clamp: 2;

Line 314:

Line 380:

overflow: hidden;

}

.gra-card-text {

.gra-card-text { font-size: 13px; color: #202124; line-height: 1.5; }

font-size: 13px;

color: #~~202124~~;

.gra-note-del {

line-height: 1.5;

background: none;

border: none;

cursor: pointer;

color: #ccc;

font-size: 15px;

padding: 0 2px;

line-height: 1;

flex-shrink: 0;

margin-left: auto;

}

.gra-note-del:hover { color: #e53935; }

.gra-empty-state {

color: #9aa0a6;

Line 328:

Line 404:

/* ══════════════════════════════════════════════════════════════════

4. BOOKMARK CARDS

5. BOOKMARK CARDS + COMPOSER

══════════════════════════════════════════════════════════════════ */

.gra-bookmark-card {

Line 374:

Line 450:

.gra-bookmark-del:hover { color: #e53935; }

~~/* Bookmark composer (same structure as comment composer) */~~

.gra-bm-composer {

background: #fff;

Line 401:

Line 476:

/* ══════════════════════════════════════════════════════════════════

5. ANCHOR HIGHLIGHTS

6. ANCHOR HIGHLIGHTS

══════════════════════════════════════════════════════════════════ */

.gra-~~comment~~-highlight {

/* Note highlight — green tint */

background: rgba(~~251~~, ~~188~~, 4, 0.35);

.gra-note-highlight {

background: rgba(52, 168, 83, 0.18);

border-radius: 2px;

cursor: pointer;

transition: background 0.15s;

}

.gra-~~comment~~-highlight:hover,

.gra-note-highlight:hover,

.gra-~~comment~~-highlight.gra-hl-active {

.gra-note-highlight.gra-hl-active {

background: rgba(~~251~~, ~~188~~, 4, 0.6);

background: rgba(52, 168, 83, 0.4);

outline: 1.5px solid #~~fbbc04~~;

outline: 1.5px solid #34a853;

}

/* Bookmark highlight — blue underline */

.gra-bookmark-highlight {

background: rgba(26, 115, 232, 0.12);

Line 424:

Line 502:

/* ══════════════════════════════════════════════════════════════════

6. ~~RESPONSIVE~~

7. PERSISTENT TOGGLE BUTTON

══════════════════════════════════════════════════════════════════ */

~~@media (max-width: 768px) {~~

~~#gra-panel {~~

~~width: 100vw;~~

~~right: -100vw;~~

}

~~.gra-composer,~~

~~.gra-bm-composer {~~

~~width: calc(100vw - 32px);~~

~~left: 16px !important;~~

}

/* ══════════════════════════════════════════════════════════════════

PERSISTENT ~~PANEL~~ TOGGLE BUTTON

~~Fixed to bottom-right corner, always visible.~~

~~Shows a red badge with unread comment count.~~

══════════════════════════════════════════════════════════════════ */

#gra-toggle {

position: fixed;

bottom: 80px; ~~/* sits above scroll-to-top (80px) which is above docs (22px) */~~

bottom: 80px;

right: 20px;

width: 48px;

Line 460:

Line 521:

transition: background 0.15s, transform 0.15s;

}

#gra-toggle:hover {

#gra-toggle:hover { background: #a0410e; transform: scale(1.07); }

background: #a0410e;

transform: scale(1.07);

}

#gra-toggle .gra-icon {

width: 22px;

height: 22px;

filter: brightness(0) invert(1); ~~/* white icon */~~

filter: brightness(0) invert(1);

}

#gra-toggle-badge {

Line 484:

Line 542:

text-align: center;

display: none;

~~align-items: center;~~

~~justify-content: center;~~

font-family: system-ui, sans-serif;

pointer-events: none;

}

~~/* Shift toggle left when panel is open so it doesn't overlap */~~

#gra-panel.gra-panel-open ~ #gra-toggle {

right: 356px;

Line 496:

Line 550:

}

/* ~~── Quick-select comment chips ────────────────────────────────── */~~

/* ══════════════════════════════════════════════════════════════════

.~~gra-quick-chips {~~

8. RESPONSIVE

~~display: flex;~~

══════════════════════════════════════════════════════════════════ */

~~flex~~-~~wrap~~: ~~wrap;~~

@media (max-width: 768px) {

~~gap: 6px;~~

#gra-panel { width: 100vw; right: -100vw; }

~~padding: 2px 0 4px;~~

.gra-composer,

}

.gra-bm-composer {

.gra-~~chip~~ {

width: calc(100vw - 32px);

~~background~~: ~~#f1f3f4~~;

left: 16px !important;

~~border~~: ~~1.5px solid #e0e0e0;~~

}

~~border~~-~~radius: 999px;~~

~~color: #444;~~

~~font-size: 12px;~~

~~font-family: inherit;~~

~~padding: 4px 12px~~;

~~cursor: pointer;~~

~~transition: background 0~~.~~12s, border~~-~~color 0.12s~~, ~~color 0.12s;~~

~~white-space: nowrap;~~

}

.gra-~~chip:hover~~ {

~~background~~: ~~#e8f0fe~~;

~~border-color~~: ~~#1a73e8~~;

~~color: #1a73e8;~~

}

~~.gra-chip.gra-chip-active {~~

~~background: #1a73e8;~~

~~border-color: #1a73e8;~~

~~color: #fff;~~

}

@@ Line 1: / Line 1: @@
 /*
-  * gr_annotations.css  —  grantha.io inline comments + bookmarks
+  * gr_annotations.css  —  grantha.io inline Notes + Bookmarks + Feedback  (v3)
- * ═══════════════════════════════════════════════════════════════
- * Standalone file. Include in MediaWiki:Common.css or via
- * ResourceModules in extension.json.
- *
- * Covers:
- *   1. Floating action strip (appears right of selection)
- *   2. Right panel (collapsible overlay, two tabs: Comments / Bookmarks)
-  *   3. Comment cards (Google Docs style)
- *   4. Bookmark cards
- *   5. Highlighted anchor spans
- *   6. Mobile-safe overlay behaviour
- * ═══════════════════════════════════════════════════════════════
   */
-/* ── Icon base (reuses /images/*.svg already on Hostinger) ──────── */
+/* ── Icon base ──────────────────────────────────────────────────── */
 .gra-icon {
    display: inline-block;
@@ Line 25: / Line 13: @@
    flex-shrink: 0;
 }
-.gra-icon-comment  { background-image: url('/images/commentary.svg'); }
+/* comment.svg → Feedback (flag/report)  */
+.gra-icon-feedback { background-image: url('/images/commentary.svg'); }
+/* notes.svg   → Notes                  */
+.gra-icon-note     { background-image: url('/images/notes.svg'); }
 .gra-icon-bookmark { background-image: url('/images/bookmark.svg'); }
 .gra-icon-copy     { background-image: url('/images/copy.svg'); }
 /* ══════════════════════════════════════════════════════════════════
-. FLOATING ACTION STRIP
+. FLOATING ACTION STRIP  (3 buttons)
-   Appears to the right of the content column on text selection.
-   Vertically stacked pill — mirrors Google Docs behaviour.
     ══════════════════════════════════════════════════════════════════ */
 #gra-fab {
-   position: fixed;   /* fixed so it stays next to selection even on scroll */
+   position: fixed;
    z-index: 10200;
    display: none;
@@ Line 45: / Line 34: @@
    padding: 6px 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.14);
-  /* position set by JS via top/left */
 }
 #gra-fab.gra-fab-visible { display: flex; }
@@ Line 63: / Line 51: @@
 }
 .gra-fab-btn:hover { background: #f5f5f5; }
-.gra-fab-btn:hover .gra-fab-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }
+.gra-fab-btn:hover .gra-fab-tooltip { opacity: 1; transform: translateX(0) translateY(-50%); }
-/* Tooltip */
 .gra-fab-tooltip {
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
-   transform: translateX(0) translateY(-50%);
+   transform: translateX(4px) translateY(-50%);
    white-space: nowrap;
    background: rgba(30,30,30,0.82);
@@ Line 86: / Line 73: @@
 /* ══════════════════════════════════════════════════════════════════
 . RIGHT PANEL
-   Slides in from the right as an overlay.
-   On mobile it covers the full viewport width.
     ══════════════════════════════════════════════════════════════════ */
 #gra-panel {
    position: fixed;
    top: 0;
-   right: -360px;           /* hidden off-screen */
+   right: -360px;
    width: 340px;
    height: 100vh;
@@ Line 107: / Line 92: @@
 #gra-panel.gra-panel-open { right: 0; }
-/* Backdrop (mobile + wide screens when panel overlaps content) */
 #gra-backdrop {
    position: fixed;
@@ Line 118: / Line 102: @@
 #gra-backdrop.gra-backdrop-visible { display: block; }
-/* ── Panel header ── */
 #gra-panel-head {
    display: flex;
@@ Line 138: / Line 121: @@
 #gra-panel-close:hover { background: #f5f5f5; color: #222; }
-/* ── Tabs ── */
 #gra-tabs {
    display: flex;
@@ Line 165: / Line 147: @@
 .gra-tab .gra-icon { width: 16px; height: 16px; opacity: 0.5; }
 .gra-tab:hover { color: #333; }
-.gra-tab.gra-tab-active {
+.gra-tab.gra-tab-active { color: #1a73e8; border-bottom-color: #1a73e8; }
-  color: #1a73e8;
+.gra-tab.gra-tab-active .gra-icon {
-  border-bottom-color: #1a73e8;
+  opacity: 1;
+  filter: invert(30%) sepia(100%) saturate(500%) hue-rotate(190deg);
 }
-.gra-tab.gra-tab-active .gra-icon { opacity: 1; filter: invert(30%) sepia(100%) saturate(500%) hue-rotate(190deg); }
-/* ── Tab content panes ── */
 #gra-panel-body {
    flex: 1;
@@ Line 181: / Line 162: @@
 /* ══════════════════════════════════════════════════════════════════
-. COMMENT CARDS  (Google Docs style)
+. FEEDBACK COMPOSER
     ══════════════════════════════════════════════════════════════════ */
-/* Inline composer — appears anchored to selection, right side */
 .gra-composer {
    background: #fff;
@@ Line 190: / Line 169: @@
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
-   width: 300px;
+   width: 340px;
-   padding: 12px 14px 10px;
+   padding: 14px 16px 12px;
    position: fixed;
    z-index: 10150;
@@ Line 202: / Line 181: @@
 .gra-composer.gra-composer-visible { display: flex; }
+/* Feedback composer header row */
+.gra-composer-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.gra-composer-header strong {
+  flex: 1;
+  font-size: 14px;
+  color: #202124;
+}
+.gra-btn-x {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  color: #666;
+  padding: 2px 5px;
+  border-radius: 4px;
+  line-height: 1;
+}
+.gra-btn-x:hover { background: #f5f5f5; color: #222; }
+/* Feedback field labels */
+.gra-fb-field-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #5f6368;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  margin-bottom: -6px;   /* tighten gap to input below */
+}
+/* Selected text quote preview */
+.gra-fb-quote-label {
+  font-size: 11px;
+  color: #9aa0a6;
+  margin-bottom: -4px;
+}
+.gra-fb-quote {
+  font-size: 12px;
+  color: #5f6368;
+  font-style: italic;
+  background: #fafafa;
+  border-left: 3px solid #fbbc04;
+  border-radius: 0 4px 4px 0;
+  padding: 6px 10px;
+  line-height: 1.45;
+  max-height: 56px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+/* Issue type dropdown */
+.gra-fb-select {
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  padding: 7px 10px;
+  font-size: 13px;
+  font-family: inherit;
+  color: #202124;
+  background: #fff;
+  outline: none;
+  transition: border-color 0.15s;
+  width: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.gra-fb-select:focus { border-color: #1a73e8; }
+/* Email input */
+.gra-fb-email-input {
+  min-height: unset !important;
+  height: 36px;
+  padding: 6px 10px !important;
+}
+/* Status message */
+.gra-fb-status {
+  font-size: 12px;
+  min-height: 16px;
+  text-align: center;
+}
+.gra-fb-status.gra-fb-ok  { color: #34a853; }
+.gra-fb-status.gra-fb-err { color: #ea4335; }
+/* ══════════════════════════════════════════════════════════════════
+. NOTE COMPOSER  (local only)
+   ══════════════════════════════════════════════════════════════════ */
 .gra-composer-user {
    display: flex;
@@ Line 219: / Line 289: @@
    font-weight: 600;
    flex-shrink: 0;
-  overflow: hidden;
 }
-.gra-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.gra-composer-uname { font-weight: 600; color: #202124; font-size: 13px; }
-.gra-composer-name { font-weight: 600; color: #202124; font-size: 13px; }
 .gra-composer-input {
@@ Line 275: / Line 343: @@
 .gra-btn-submit:disabled { background: #c5d8f8; cursor: default; }
-/* Saved comment cards in panel */
+/* ── Note cards ── */
-.gra-comment-card {
+.gra-note-card {
    border: 1px solid #e8eaed;
    border-radius: 8px;
@@ Line 286: / Line 354: @@
    transition: box-shadow 0.15s;
 }
-.gra-comment-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
+.gra-note-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
-.gra-comment-card.gra-card-active {
+.gra-note-card.gra-card-active {
-   border-color: #fbbc04;
+   border-color: #34a853;
-   box-shadow: 0 0 0 2px rgba(251,188,4,0.3);
+   box-shadow: 0 0 0 2px rgba(52,168,83,0.25);
 }
 .gra-card-header {
@@ Line 298: / Line 366: @@
 }
 .gra-card-meta { flex: 1; }
-.gra-card-author { font-weight: 600; color: #202124; font-size: 12px; }
+.gra-card-ts { font-size: 11px; color: #80868b; }
-.gra-card-ts { font-size: 11px; color: #80868b; margin-top: 1px; }
 .gra-card-quote {
    font-size: 12px;
    color: #5f6368;
-   border-left: 3px solid #fbbc04;
+   border-left: 3px solid #34a853;
    padding-left: 8px;
    margin-bottom: 6px;
    font-style: italic;
    line-height: 1.4;
-  /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
@@ Line 314: / Line 380: @@
    overflow: hidden;
 }
-.gra-card-text {
+.gra-card-text { font-size: 13px; color: #202124; line-height: 1.5; }
-  font-size: 13px;
-   color: #202124;
+.gra-note-del {
-   line-height: 1.5;
+  background: none;
+  border: none;
+  cursor: pointer;
+   color: #ccc;
+  font-size: 15px;
+  padding: 0 2px;
+   line-height: 1;
+  flex-shrink: 0;
+  margin-left: auto;
 }
+.gra-note-del:hover { color: #e53935; }
 .gra-empty-state {
    color: #9aa0a6;
@@ Line 328: / Line 404: @@
 /* ══════════════════════════════════════════════════════════════════
-. BOOKMARK CARDS
+. BOOKMARK CARDS + COMPOSER
     ══════════════════════════════════════════════════════════════════ */
 .gra-bookmark-card {
@@ Line 374: / Line 450: @@
 .gra-bookmark-del:hover { color: #e53935; }
-/* Bookmark composer (same structure as comment composer) */
 .gra-bm-composer {
    background: #fff;
@@ Line 401: / Line 476: @@
 /* ══════════════════════════════════════════════════════════════════
 . ANCHOR HIGHLIGHTS
     ══════════════════════════════════════════════════════════════════ */
-.gra-comment-highlight {
+/* Note highlight — green tint */
-   background: rgba(251, 188, 4, 0.35);
+.gra-note-highlight {
+   background: rgba(52, 168, 83, 0.18);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.15s;
 }
-.gra-comment-highlight:hover,
+.gra-note-highlight:hover,
-.gra-comment-highlight.gra-hl-active {
+.gra-note-highlight.gra-hl-active {
-   background: rgba(251, 188, 4, 0.6);
+   background: rgba(52, 168, 83, 0.4);
-   outline: 1.5px solid #fbbc04;
+   outline: 1.5px solid #34a853;
 }
+/* Bookmark highlight — blue underline */
 .gra-bookmark-highlight {
    background: rgba(26, 115, 232, 0.12);
@@ Line 424: / Line 502: @@
 /* ══════════════════════════════════════════════════════════════════
-. RESPONSIVE
+. PERSISTENT TOGGLE BUTTON
-   ══════════════════════════════════════════════════════════════════ */
-@media (max-width: 768px) {
-  #gra-panel {
-    width: 100vw;
-    right: -100vw;
-  }
-  .gra-composer,
-  .gra-bm-composer {
-    width: calc(100vw - 32px);
-    left: 16px !important;
-  }
-}
-/* ══════════════════════════════════════════════════════════════════
-   PERSISTENT PANEL TOGGLE BUTTON
-   Fixed to bottom-right corner, always visible.
-   Shows a red badge with unread comment count.
     ══════════════════════════════════════════════════════════════════ */
 #gra-toggle {
    position: fixed;
-   bottom: 80px;  /* sits above scroll-to-top (80px) which is above docs (22px) */
+   bottom: 80px;
    right: 20px;
    width: 48px;
@@ Line 460: / Line 521: @@
    transition: background 0.15s, transform 0.15s;
 }
-#gra-toggle:hover {
+#gra-toggle:hover { background: #a0410e; transform: scale(1.07); }
-  background: #a0410e;
-  transform: scale(1.07);
-}
 #gra-toggle .gra-icon {
    width: 22px;
    height: 22px;
-   filter: brightness(0) invert(1);  /* white icon */
+   filter: brightness(0) invert(1);
 }
 #gra-toggle-badge {
@@ Line 484: / Line 542: @@
    text-align: center;
    display: none;
-  align-items: center;
-  justify-content: center;
    font-family: system-ui, sans-serif;
    pointer-events: none;
 }
-/* Shift toggle left when panel is open so it doesn't overlap */
 #gra-panel.gra-panel-open ~ #gra-toggle {
    right: 356px;
@@ Line 496: / Line 550: @@
 }
-/* ── Quick-select comment chips ────────────────────────────────── */
+/* ══════════════════════════════════════════════════════════════════
-.gra-quick-chips {
+. RESPONSIVE
-  display: flex;
+   ══════════════════════════════════════════════════════════════════ */
-  flex-wrap: wrap;
+@media (max-width: 768px) {
-   gap: 6px;
+   #gra-panel { width: 100vw; right: -100vw; }
-  padding: 2px 0 4px;
+   .gra-composer,
-}
+   .gra-bm-composer {
-.gra-chip {
+    width: calc(100vw - 32px);
-  background: #f1f3f4;
+    left: 16px !important;
-  border: 1.5px solid #e0e0e0;
+   }
-  border-radius: 999px;
-  color: #444;
-  font-size: 12px;
-  font-family: inherit;
-  padding: 4px 12px;
-   cursor: pointer;
-  transition: background 0.12s, border-color 0.12s, color 0.12s;
-   white-space: nowrap;
-}
-.gra-chip:hover {
-  background: #e8f0fe;
-  border-color: #1a73e8;
-   color: #1a73e8;
-}
-.gra-chip.gra-chip-active {
-  background: #1a73e8;
-  border-color: #1a73e8;
-  color: #fff;
 }