/* Quick Review — unified review overlay foundations (bar, layout offsets) */

/* Overlay chrome theme tokens (namespaced --qr-* to avoid colliding with
   prototype CSS variables). Light = the original paper palette. */
:root {
  --qr-bg: #faf9f5;
  --qr-surface: #fff;
  --qr-border: #e8e6e0;
  --qr-border-strong: #d8d6d0;
  --qr-border-soft: #eeece6;
  --qr-text: #3d3d3a;
  --qr-text-muted: #8a8880;
  --qr-active-bg: #eceae4;
  --qr-emphasis-bg: #1a1a18;   /* mode button pressed, toast, count badge, preview card */
  --qr-emphasis-text: #fff;
  --qr-accent: #d97757;        /* count badges */
  --qr-pin: #c96f4a;
  --qr-pin-ring: #fff;
  --qr-pin-soft: #d9a08a;      /* composer input border */
  --qr-pin-tint: rgba(201, 111, 74, 0.06);
  --qr-info: #4a7bc9;          /* hover outline, anchor flash */
  --qr-chip-bg: #e3e9f5;
  --qr-chip-text: #3b5484;
  --qr-flash-bg: #f5e3d7;
  --qr-shadow: rgba(0, 0, 0, 0.18);
  /* Roles beyond the base set: text hierarchy (secondary/faint/body copy),
     an accent-strength text pair for elements on the emphasis surface vs.
     the normal surface (each inverts relative to the other, see dark
     blocks), preview-card chrome, and per-element shadow strengths. Themed
     in all three blocks below. */
  --qr-text-secondary: #7a786f;  /* qr-title, private badge, reaction label, composer excerpt */
  --qr-text-faint: #a5a399;      /* timestamps, thread actions, placeholders, mention email */
  --qr-text-body: #4a4944;       /* comment/reply body copy */
  --qr-accent-text: #b5572f;     /* accent-colored text on the normal surface: badge/mention/link */
  --qr-neutral-chip-bg: rgba(0, 0, 0, 0.05);        /* private badge / guest tag fill */
  --qr-neutral-chip-bg-hover: rgba(0, 0, 0, 0.08);
  --qr-mention-shadow: rgba(0, 0, 0, 0.1);
  --qr-pin-shadow: rgba(0, 0, 0, 0.25);
  --qr-preview-shadow: rgba(0, 0, 0, 0.3);
  --qr-banner-shadow: rgba(0, 0, 0, 0.2);
  --qr-preview-border: #333;             /* #qr-preview sits on --qr-emphasis-bg, which inverts */
  --qr-preview-body-text: #d8d6d0;       /* ditto */
  --qr-preview-accent: #e8a37f;          /* ditto — inverse of --qr-accent-text */
  /* Theme-invariant: brand accent/pin colors and plain white text/fills that
     sit on those colored (non-inverting) surfaces read fine in both themes. */
  --qr-on-accent: #fff;                  /* text on accent/pin/info-colored elements */
  --qr-info-fill: #3a63a8;               /* #qr-mode-banner solid fill under white text — kept
                                             darker than --qr-info (used for outlines/flash, where
                                             lighter reads better) so banner text clears 4.5:1 */
  --qr-accent-hover: #c8663f;            /* send button hover */
  --qr-badge-public-bg: rgba(217, 119, 87, 0.15);
  --qr-badge-public-bg-hover: rgba(217, 119, 87, 0.25);
  --qr-reacted-bg: rgba(217, 119, 87, 0.12);
  --qr-mention-hover-bg: rgba(217, 119, 87, 0.08);
  --qr-cta-bg: #b5572f;        /* Add-comment CTA fill — white text clears 4.5:1, both themes */
  --qr-cta-bg-hover: #a04c28;
  --qr-pg-brand: #db1b5c;      /* Paper Giant wordmark — brand pink on light, soft white on dark */
  --qr-danger: #b3261e;        /* inline error text; lighter on dark */
  --qr-danger-bg: #b3261e;     /* confirm-delete fill — white text clears 4.5:1, both themes */
  --qr-danger-bg-hover: #9c1f18;
}
/* Charcoal dark set. Twin blocks: attribute and media query. Keep in sync. */
html[data-qr-theme="dark"] {
  --qr-bg: #1f1e1b;
  --qr-surface: #2a2926;
  --qr-border: #3a3833;
  --qr-border-strong: #4a4843;
  --qr-border-soft: #33312d;
  --qr-text: #e8e6e0;
  --qr-text-muted: #a09e96;
  --qr-active-bg: #33312d;
  --qr-emphasis-bg: #e8e6e0;
  --qr-emphasis-text: #1a1a18;
  --qr-pin-soft: #8a5a42;
  --qr-pin-tint: rgba(201, 111, 74, 0.12);
  --qr-info: #6b95d8;
  --qr-chip-bg: #2c3548;
  --qr-chip-text: #a8bce0;
  --qr-flash-bg: #4a3526;
  --qr-shadow: rgba(0, 0, 0, 0.5);
  --qr-text-secondary: #b4b2a8;
  --qr-text-faint: #8d8b81;
  --qr-text-body: #d4d2cb;
  --qr-accent-text: #e8a37f;
  --qr-neutral-chip-bg: rgba(255, 255, 255, 0.08);
  --qr-neutral-chip-bg-hover: rgba(255, 255, 255, 0.14);
  --qr-mention-shadow: rgba(0, 0, 0, 0.35);
  --qr-pin-shadow: rgba(0, 0, 0, 0.5);
  --qr-preview-shadow: rgba(0, 0, 0, 0.55);
  --qr-banner-shadow: rgba(0, 0, 0, 0.45);
  --qr-preview-border: #d8d6d0;
  --qr-preview-body-text: #55534a;
  --qr-preview-accent: #b5572f;
  --qr-pg-brand: #e8e6e0;
  --qr-danger: #f2a79f;
}
@media (prefers-color-scheme: dark) {
  /* keep in sync with the html[data-qr-theme="dark"] block above */
  html:not([data-qr-theme="light"]) {
    --qr-bg: #1f1e1b;
    --qr-surface: #2a2926;
    --qr-border: #3a3833;
    --qr-border-strong: #4a4843;
    --qr-border-soft: #33312d;
    --qr-text: #e8e6e0;
    --qr-text-muted: #a09e96;
    --qr-active-bg: #33312d;
    --qr-emphasis-bg: #e8e6e0;
    --qr-emphasis-text: #1a1a18;
    --qr-pin-soft: #8a5a42;
    --qr-pin-tint: rgba(201, 111, 74, 0.12);
    --qr-info: #6b95d8;
    --qr-chip-bg: #2c3548;
    --qr-chip-text: #a8bce0;
    --qr-flash-bg: #4a3526;
    --qr-shadow: rgba(0, 0, 0, 0.5);
    --qr-text-secondary: #b4b2a8;
    --qr-text-faint: #8d8b81;
    --qr-text-body: #d4d2cb;
    --qr-accent-text: #e8a37f;
    --qr-neutral-chip-bg: rgba(255, 255, 255, 0.08);
    --qr-neutral-chip-bg-hover: rgba(255, 255, 255, 0.14);
    --qr-mention-shadow: rgba(0, 0, 0, 0.35);
    --qr-pin-shadow: rgba(0, 0, 0, 0.5);
    --qr-preview-shadow: rgba(0, 0, 0, 0.55);
    --qr-banner-shadow: rgba(0, 0, 0, 0.45);
    --qr-preview-border: #d8d6d0;
    --qr-preview-body-text: #55534a;
    --qr-preview-accent: #b5572f;
    --qr-pg-brand: #e8e6e0;
    --qr-danger: #f2a79f;
  }
}
/* Native controls/scrollbars inside overlay panels only — never the page root. */
#qr-sidebar, #qr-composer { color-scheme: light; }
html[data-qr-theme="dark"] #qr-sidebar,
html[data-qr-theme="dark"] #qr-composer { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  html:not([data-qr-theme="light"]) #qr-sidebar,
  html:not([data-qr-theme="light"]) #qr-composer { color-scheme: dark; }
}

/* The overlay's single container: a child of <html>, generating no box of
   its own (everything inside is fixed or absolutely positioned). */
#quick-review-root { display: contents; }
#qr-spacer { display: none; }

/* Page offsets on wide screens: bar always; sidebar only while the layer is
   on. Narrow screens push nothing (see the max-width: 700px block at the end). */
html.qr-active { margin-top: 56px !important; }
html.qr-layer-on { margin-left: 320px !important; }
html.qr-active, html.qr-layer-on { transition: margin 0.15s ease; }

#qr-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 2147483000;
  display: flex; align-items: center; gap: 12px; padding: 0 16px; box-sizing: border-box;
  background: var(--qr-bg); border-bottom: 1px solid var(--qr-border);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; color: var(--qr-text);
}

#qr-back {
  display: flex; align-items: center; gap: 6px;
  color: var(--qr-text); text-decoration: none; font-weight: 500; font-size: 14px;
  white-space: nowrap;
}
#qr-back .qr-arrow { font-size: 14px; line-height: 1; }

#qr-title {
  flex: 0 1 auto; min-width: 0;
  font-size: 12px; font-weight: 500; color: var(--qr-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Tucks the floating bar away; narrow screens only. */
#qr-bar-min { display: none; }
#qr-team-signin, #qr-visibility-link { color: var(--qr-accent-text); font-size: 12px; text-decoration: none; white-space: nowrap; }
#qr-team-signin:hover, #qr-visibility-link:hover { text-decoration: underline; }

.qr-bar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; }

#qr-pg { display: flex; align-items: center; margin-left: 8px; color: var(--qr-pg-brand); }
#qr-pg svg { height: 13px; width: auto; display: block; }
@media (max-width: 900px) { #qr-pg { display: none; } }
#qr-layer-toggle, #qr-mode-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: 0 0 auto; box-sizing: border-box; width: auto; height: 30px; min-width: 0; min-height: 0;
  margin: 0; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--qr-border-strong); background: var(--qr-surface); color: var(--qr-text); font-size: 13px; cursor: pointer;
  font-family: inherit; line-height: 16px; white-space: nowrap;
}
/* Prototype SVG rules override HTML width/height attributes, so size toolbar
   icons explicitly and keep them from growing or shrinking in the buttons. */
#qr-layer-toggle svg, #qr-mode-toggle svg {
  display: block; width: 14px; height: 14px; flex: 0 0 14px;
}
#qr-layer-toggle.active { background: var(--qr-active-bg); }
/* Add-comment is the bar's CTA: filled by default, emphasis fill while armed
   (label swaps to "Done commenting" and the + rotates into an ×). State
   changes crossfade the fill, rotate the icon, and float the new label in. */
#qr-mode-toggle {
  background: var(--qr-cta-bg); border-color: var(--qr-cta-bg); color: var(--qr-on-accent); font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#qr-mode-toggle:hover { background: var(--qr-cta-bg-hover); border-color: var(--qr-cta-bg-hover); }
#qr-mode-toggle.active { background: var(--qr-emphasis-bg); border-color: var(--qr-emphasis-bg); color: var(--qr-emphasis-text); }
#qr-mode-toggle svg { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
#qr-mode-toggle.active svg { transform: rotate(45deg); }
#qr-mode-toggle span { display: inline-block; }
#qr-mode-toggle span.qr-label-swap { animation: qr-label-in 0.25s ease; }
@keyframes qr-label-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #qr-mode-toggle, #qr-mode-toggle svg { transition: none; }
  #qr-mode-toggle span.qr-label-swap { animation: none; }
}
.qr-badge { background: var(--qr-accent); color: var(--qr-on-accent); border-radius: 999px; font-size: 11px; padding: 1px 6px; }

/* --- Arrival card: guest welcome (or dead-link notice) on invite-link visits --- */
#qr-welcome {
  position: fixed; inset: 0; z-index: 2147483200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.45); padding: 20px; box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.qr-welcome-card {
  background: var(--qr-bg); color: var(--qr-text); border: 1px solid var(--qr-border);
  border-radius: 12px; box-shadow: 0 12px 40px var(--qr-shadow);
  max-width: 420px; width: 100%; max-height: 100%; overflow-y: auto; padding: 28px 24px; box-sizing: border-box;
}
.qr-welcome-card h2 { margin: 0 0 14px; font-size: 18px; line-height: 1.35; font-weight: 600; }
.qr-welcome-msg {
  margin: 0 0 16px; padding: 12px 16px; background: var(--qr-surface);
  border-left: 3px solid var(--qr-pin); border-radius: 0 8px 8px 0;
  font-size: 14px; line-height: 1.6; color: var(--qr-text-body); white-space: pre-wrap;
}
.qr-welcome-note { margin: 0 0 20px; font-size: 13px; line-height: 1.6; color: var(--qr-text-secondary); }
#qr-welcome-dismiss {
  display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--qr-cta-bg); background: var(--qr-cta-bg); color: var(--qr-on-accent);
  font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;
}
#qr-welcome-dismiss:hover { background: var(--qr-cta-bg-hover); border-color: var(--qr-cta-bg-hover); }

/* Visibility label (author only): Public / Team / Private. Read-only here;
   the link beside it opens the prototype's page in Quick to change it. */
#qr-public-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 500; cursor: default;
}
.qr-public-badge.public { background: var(--qr-badge-public-bg); color: var(--qr-accent-text); }
.qr-public-badge.private { background: var(--qr-neutral-chip-bg); color: var(--qr-text-secondary); }

/* --- Docked sidebar --- */
#qr-sidebar {
  position: fixed; top: 56px; left: 0; bottom: 0; width: 320px; z-index: 2147482000;
  display: flex; flex-direction: column; box-sizing: border-box;
  background: var(--qr-bg); border-right: 1px solid var(--qr-border);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; color: var(--qr-text);
}
.qr-sb-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-weight: 600; font-size: 15px; flex-shrink: 0; }
.qr-sb-header-actions { display: flex; align-items: center; gap: 8px; }
#qr-sb-pins-off { display: none; } /* narrow screens only: there the sheet closes without hiding pins */
#qr-sb-close { background: none; border: none; color: var(--qr-text-muted); cursor: pointer; font-size: 18px; padding: 4px; line-height: 1; }
#qr-sb-close:hover { color: var(--qr-text); }

.qr-sb-threads { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px; }
.qr-sb-empty { margin: 8px 0 16px; font-size: 13px; line-height: 1.5; color: var(--qr-text-muted); }
.qr-sb-threads::-webkit-scrollbar { width: 6px; }
.qr-sb-threads::-webkit-scrollbar-thumb { background: var(--qr-border-strong); border-radius: 3px; }

.qr-resolved-section { border-top: 1px solid var(--qr-border-soft); margin-top: 4px; }

/* Threads + replies */
.qr-thread { padding: 12px 0; border-bottom: 1px solid var(--qr-border-soft); }
.qr-thread.resolved { opacity: 0.55; }
.qr-thread-flash { animation: qr-flash 2s ease-out; }
@keyframes qr-flash { 0%, 40% { background: var(--qr-flash-bg); } 100% { background: transparent; } }

.qr-thread-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.qr-author { font-size: 12px; font-weight: 600; color: var(--qr-text); }
.qr-time { font-size: 11px; color: var(--qr-text-faint); }
.qr-resolved-by { font-size: 11px; color: var(--qr-text-muted); font-style: italic; }
.qr-guest-tag {
  font-size: 10px; color: var(--qr-text-muted); background: var(--qr-neutral-chip-bg);
  padding: 1px 6px; border-radius: 4px; margin-left: 2px; font-weight: 400;
}

.qr-chip {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--qr-chip-bg); color: var(--qr-chip-text); border: none; border-radius: 6px;
  padding: 2px 8px; font-size: 12px; cursor: pointer; margin: 4px 0;
}

/* The anchor is hidden, gone, or no longer the thing that was commented on. */
.qr-chip-off { opacity: 0.6; }
.qr-chip-note { display: none; margin-left: 6px; font-size: 11px; color: var(--qr-text-muted); font-style: italic; }
.qr-chip-off + .qr-chip-note { display: inline; }

.qr-body { font-size: 13px; color: var(--qr-text-body); line-height: 1.5; word-break: break-word; }
.qr-body .qr-mention { color: var(--qr-accent-text); font-weight: 500; }

.qr-thread-actions { display: flex; gap: 12px; margin-top: 6px; }
.qr-act { background: none; border: none; color: var(--qr-text-faint); font-size: 11px; cursor: pointer; padding: 0; font-family: inherit; }
.qr-act:hover { color: var(--qr-text); }

/* Inline error beside the control that failed */
.qr-error { flex-basis: 100%; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--qr-danger); }
.qr-error-action {
  margin-left: 4px; padding: 0; background: none; border: none; color: inherit; cursor: pointer;
  font: inherit; font-weight: 600; text-decoration: underline;
}

/* Delete confirmation, in place under the comment */
.qr-confirm {
  margin-top: 6px; padding: 8px 10px; background: var(--qr-surface); border: 1px solid var(--qr-border-strong);
  border-radius: 8px; font-size: 12px; line-height: 1.45; color: var(--qr-text-body);
}
.qr-confirm-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.qr-send-btn.qr-danger { background: var(--qr-danger-bg); align-self: auto; }
.qr-send-btn.qr-danger:hover { background: var(--qr-danger-bg-hover); }

.qr-resolve, .qr-reopen { background: none; border: none; color: var(--qr-text-muted); cursor: pointer; font-size: 12px; }
.qr-resolve:hover, .qr-reopen:hover { color: var(--qr-text); }
.qr-reopen { font-size: 11px; }

.qr-reply { margin: 8px 0 0 16px; padding: 8px 0 0; border-top: 1px dotted var(--qr-border-soft); }

.qr-sb-resolved-toggle { text-align: center; padding: 10px; color: var(--qr-text-muted); cursor: pointer; font-size: 13px; flex-shrink: 0; }
.qr-sb-resolved-toggle:hover { color: var(--qr-text); }

/* Inline edit */
.qr-edit-actions { display: flex; gap: 6px; margin-top: 6px; }
.qr-edit-input { width: 100%; box-sizing: border-box; }

/* Reactions */
.qr-sb-reactions { display: flex; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--qr-border-soft); flex-wrap: wrap; flex-shrink: 0; }
.qr-reaction-btn {
  display: flex; align-items: center; gap: 4px; padding: 4px 10px;
  background: var(--qr-surface); border: 1px solid var(--qr-border-strong); border-radius: 16px;
  color: var(--qr-text-secondary); font-size: 13px; cursor: pointer; transition: all 0.1s; font-family: inherit;
}
.qr-reaction-btn:hover { border-color: var(--qr-accent); color: var(--qr-text); }
.qr-reaction-btn.reacted { background: var(--qr-reacted-bg); border-color: var(--qr-accent); color: var(--qr-accent-text); }
/* Guests and visitors see the counts only (the server takes reactions from team members). */
.qr-reaction-static { cursor: default; }
.qr-reaction-static:hover { border-color: var(--qr-border-strong); color: var(--qr-text-secondary); }
.qr-reaction-btn:disabled { opacity: 0.5; cursor: default; }
.qr-reaction-btn .qr-emoji { font-size: 14px; }
.qr-reaction-btn .qr-count { font-size: 11px; font-weight: 600; }

/* Invite-only gating note */
.qr-sb-invite-note { padding: 12px 16px; font-size: 12px; color: var(--qr-text-muted); border-top: 1px solid var(--qr-border-soft); line-height: 1.5; flex-shrink: 0; }

/* Composer */
.qr-sb-composer { padding: 12px 16px; border-top: 1px solid var(--qr-border-soft); position: relative; flex-shrink: 0; }
.qr-input-row { display: flex; gap: 8px; }
.qr-reply-row { margin-top: 8px; }
.qr-input {
  flex: 1; background: var(--qr-surface); border: 1px solid var(--qr-border-strong); border-radius: 8px;
  padding: 8px 10px; color: var(--qr-text); font-size: 13px; font-family: inherit;
  resize: none; outline: none; min-height: 34px; max-height: 120px; box-sizing: border-box;
}
.qr-input:focus { border-color: var(--qr-accent); }
.qr-input::placeholder { color: var(--qr-text-faint); }

.qr-send-btn {
  background: var(--qr-accent); border: none; color: var(--qr-on-accent); font-size: 12px; font-weight: 600;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; align-self: flex-end;
  white-space: nowrap; font-family: inherit;
}
.qr-send-btn:hover { background: var(--qr-accent-hover); }
.qr-send-btn:disabled { opacity: 0.4; cursor: default; }

/* Mention dropdown */
.qr-mention-dropdown {
  position: absolute; bottom: 100%; left: 16px; right: 16px;
  background: var(--qr-surface); border: 1px solid var(--qr-border-strong); border-radius: 8px;
  max-height: 200px; overflow-y: auto; display: none;
  box-shadow: 0 -4px 16px var(--qr-mention-shadow);
}
.qr-mention-item { display: flex; gap: 8px; align-items: center; padding: 8px 12px; cursor: pointer; font-size: 12px; }
.qr-mention-item:hover, .qr-mention-item.active { background: var(--qr-mention-hover-bg); }
.qr-mention-item-avatar { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; }
.qr-mention-item-name { font-weight: 600; color: var(--qr-text); }
.qr-mention-item-email { color: var(--qr-text-faint); font-size: 11px; margin-left: auto; }

/* App info footer */
.qr-sb-appinfo {
  padding: 10px 16px; border-top: 1px solid var(--qr-border-soft); display: flex;
  align-items: center; justify-content: space-between; font-size: 11px; color: var(--qr-text-muted); flex-shrink: 0;
}
.qr-sb-appinfo a { color: var(--qr-accent-text); text-decoration: none; }
.qr-sb-appinfo a:hover { text-decoration: underline; }
.qr-sb-visibility { display: none; } /* narrow screens: the bar has no room for the author's visibility label */

/* --- Pins layer --- */
#qr-pins { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 2147481000; }
.qr-pin {
  position: absolute; pointer-events: auto; width: 26px; height: 26px; cursor: pointer;
  background: var(--qr-pin); color: var(--qr-on-accent); border: 2px solid var(--qr-pin-ring);
  border-radius: 50% 50% 50% 4px; /* teardrop: square-ish bottom-left tail */
  display: flex; align-items: center; justify-content: center;
  font: 600 12px -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 1px 4px var(--qr-pin-shadow);
}
.qr-pin-count {
  position: absolute; top: -6px; right: -6px; font-style: normal; font-size: 10px;
  background: var(--qr-emphasis-bg); color: var(--qr-emphasis-text); border-radius: 999px; padding: 0 4px;
}
.qr-region-box { position: absolute; border: 2px solid var(--qr-pin); border-radius: 4px; background: var(--qr-pin-tint); }
.qr-anchor-flash { position: absolute; border: 2px solid var(--qr-info); border-radius: 4px; z-index: 2147481500; pointer-events: none; animation: qr-fade 1.6s forwards; }
.qr-toast { position: fixed; top: 68px; left: 50%; transform: translateX(-50%); background: var(--qr-emphasis-bg); color: var(--qr-emphasis-text); padding: 6px 14px; border-radius: 999px; font-size: 13px; z-index: 2147483100; }
@keyframes qr-fade { to { opacity: 0; } }

/* Pin hover preview card */
#qr-preview {
  position: absolute; z-index: 2147481200; max-width: 240px;
  background: var(--qr-emphasis-bg); color: var(--qr-emphasis-text); border: 1px solid var(--qr-preview-border); border-radius: 8px;
  padding: 8px 10px; box-shadow: 0 4px 16px var(--qr-preview-shadow);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12px; line-height: 1.4;
  pointer-events: none; display: none;
}
.qr-preview-author { font-weight: 600; color: var(--qr-emphasis-text); margin-right: 4px; }
.qr-preview-body { color: var(--qr-preview-body-text); }
.qr-preview-more { display: block; color: var(--qr-preview-accent); margin-top: 4px; font-size: 11px; }

/* --- Comment mode (Task 9) --- */
/* The overlay lives outside <body>, so its own controls keep their cursors. */
body.qr-mode-active, body.qr-mode-active * { cursor: crosshair !important; }
#qr-mode-banner {
  position: fixed; top: 68px; left: 50%; transform: translateX(-50%);
  background: var(--qr-info-fill); color: var(--qr-on-accent); padding: 8px 18px; border-radius: 999px;
  font: 500 13px -apple-system, BlinkMacSystemFont, sans-serif;
  z-index: 2147483100; box-shadow: 0 2px 8px var(--qr-banner-shadow); pointer-events: none;
}
#qr-hover-outline { position: absolute; border: 2px solid var(--qr-info); border-radius: 3px; pointer-events: none; display: none; z-index: 2147480900; }
#qr-composer {
  position: absolute; width: 300px; max-width: calc(100vw - 16px); box-sizing: border-box;
  background: var(--qr-surface); border-radius: 12px;
  box-shadow: 0 4px 24px var(--qr-shadow); padding: 14px; z-index: 2147482500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.qr-composer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--qr-text); }
#qr-composer-close { background: none; border: none; color: var(--qr-text-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0; }
#qr-composer-close:hover { color: var(--qr-text); }
.qr-composer-excerpt { font-size: 12px; color: var(--qr-text-secondary); font-style: italic; margin-bottom: 8px; line-height: 1.4; }
#qr-composer-input { display: block; width: 100%; box-sizing: border-box; border: 1px solid var(--qr-pin-soft); border-radius: 8px; padding: 10px; font-size: 13px; font-family: inherit; resize: vertical; }
.qr-composer-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
#qr-composer-submit { background: var(--qr-pin); color: var(--qr-on-accent); border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-family: inherit; cursor: pointer; }
#qr-composer-submit:disabled { opacity: 0.4; cursor: default; }
/* The box being drawn never sits between the pointer and the page: a drag
   across text still selects it (and a selection wins over an area). */
.qr-region-draft { z-index: 2147482400; pointer-events: none; }
.qr-pin-armed { z-index: 2147482600; pointer-events: none; }

/* --- Touch: 16px text in every field (smaller text makes iOS Safari zoom the
   page on focus) and controls big enough for a finger (40px or more). --- */
@media (pointer: coarse), (max-width: 700px) {
  .qr-input, #qr-composer-input { font-size: 16px; }
  .qr-input { min-height: 40px; }
  .qr-thread-actions { gap: 4px; margin: 2px 0 0 -8px; }
  .qr-act { min-height: 40px; min-width: 40px; padding: 0 8px; font-size: 13px; }
  .qr-resolve, .qr-reopen { min-height: 40px; min-width: 40px; margin: -10px -8px -10px auto; font-size: 14px; }
  .qr-reopen { font-size: 13px; }
  .qr-chip { min-height: 32px; padding: 4px 10px; font-size: 13px; }
  .qr-send-btn { min-height: 40px; font-size: 14px; }
  .qr-reaction-btn { min-height: 40px; min-width: 44px; justify-content: center; }
  .qr-mention-item { min-height: 44px; box-sizing: border-box; font-size: 14px; }
  .qr-sb-resolved-toggle { padding: 12px; }
  .qr-edit-actions, .qr-confirm-actions { gap: 4px; }
  #qr-sb-close { min-width: 40px; min-height: 40px; font-size: 22px; }
  #qr-composer-close { min-width: 40px; min-height: 40px; margin: -10px -10px -10px 0; font-size: 22px; }
  #qr-composer-submit { min-height: 40px; font-size: 14px; }
  #qr-welcome-dismiss { min-height: 44px; }
  .qr-sb-appinfo { font-size: 12px; }
  .qr-sb-appinfo a { padding: 8px 0; }
  /* The pin keeps its size; its touch area grows to 44px. */
  .qr-pin::after { content: ''; position: absolute; inset: -11px; }
}

/* --- Phones and narrow windows (keep in step with NARROW in quick-review.js).
   Nothing pushes the prototype: the bar floats at the bottom edge and can be
   tucked away, the comment list is a bottom sheet, and the composer docks
   above the on-screen keyboard (--qr-kb / --qr-vvh come from visualViewport). --- */
@media (max-width: 700px) {
  html.qr-active { margin-top: 0 !important; }
  html.qr-layer-on { margin-left: 0 !important; }

  #qr-bar {
    top: auto; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    height: 52px; padding: 0 5px; gap: 6px;
    border: 1px solid var(--qr-border-strong); border-radius: 26px;
    box-shadow: 0 4px 20px var(--qr-shadow);
  }
  /* Room to scroll the end of the page clear of the floating bar (not for a
     prototype that fits the window exactly; see syncSpacer). */
  #qr-spacer { display: block; height: calc(68px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
  .qr-page-fits #qr-spacer { display: none; }
  /* "← Quick" and the author's visibility label move into the sheet's footer. */
  #qr-back, #qr-pg, #qr-public-badge, #qr-visibility-link { display: none !important; }
  #qr-bar-min {
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    flex: 0 0 40px; width: 40px; height: 40px; margin: 0; padding: 0;
    border: none; border-radius: 50%; background: none; color: var(--qr-text-muted); cursor: pointer;
  }
  #qr-bar-min svg { display: block; width: 16px; height: 16px; flex: 0 0 16px; }
  #qr-bar-min .qr-min-show, #qr-min-count { display: none; }
  #qr-title { flex: 1 1 0; font-size: 13px; color: var(--qr-text); }
  .qr-bar-right { gap: 6px; }
  #qr-team-signin { font-size: 13px; line-height: 40px; padding: 0 4px; }
  #qr-layer-toggle, #qr-mode-toggle { height: 40px; }
  #qr-layer-toggle { min-width: 40px; padding: 0 11px; }
  #qr-layer-label { display: none; } /* icon and count only; the button carries an aria-label */
  #qr-mode-toggle { padding: 0 14px; font-size: 14px; }

  /* Tucked away: one round button, so nothing of the prototype stays covered. */
  #qr-bar.qr-bar-tucked { right: auto; width: 52px; }
  #qr-bar.qr-bar-tucked > :not(#qr-bar-min) { display: none !important; }
  .qr-bar-tucked #qr-bar-min { color: var(--qr-text); }
  .qr-bar-tucked #qr-bar-min .qr-min-hide { display: none; }
  .qr-bar-tucked #qr-bar-min .qr-min-show { display: block; }
  .qr-bar-tucked #qr-min-count { display: inline-block; position: absolute; top: -3px; right: -5px; }

  /* Comment list: a bottom sheet over the page, above the bar and the keyboard. */
  #qr-sidebar {
    top: auto; left: 0; right: 0; bottom: var(--qr-kb, 0px); width: auto;
    height: min(72vh, 560px); height: min(72dvh, 560px);
    max-height: calc(100vh - 8px); max-height: calc(var(--qr-vvh, 100dvh) - 8px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-right: none; border-top: 1px solid var(--qr-border-strong); border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px var(--qr-shadow); z-index: 2147483050;
  }
  .qr-sb-header { padding: 8px 8px 4px 16px; }
  #qr-sb-pins-off { display: inline-block; }
  .qr-sb-visibility { display: inline; }
  .qr-sb-view { display: none; }
  /* Keyboard up: the list and the box being typed in get the room. */
  .qr-kb-open .qr-sb-reactions, .qr-kb-open .qr-sb-appinfo, .qr-kb-open .qr-sb-resolved-toggle { display: none !important; }

  /* Composer: docked to the bottom edge, whatever inline position it had. */
  #qr-composer {
    position: fixed; top: auto !important; left: 8px !important; right: 8px;
    bottom: calc(var(--qr-kb, 0px) + 8px + env(safe-area-inset-bottom, 0px));
    width: auto; max-width: none; z-index: 2147483060;
    border: 1px solid var(--qr-border-strong);
  }

  #qr-mode-banner, .qr-toast { top: calc(12px + env(safe-area-inset-top, 0px)); max-width: calc(100vw - 32px); white-space: nowrap; }
}