/* 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);
}
/* 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;
}
@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;
  }
}
/* 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; }
}

/* Page offsets: bar always; sidebar only while the layer is on */
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 {
  font-size: 12px; font-weight: 500; color: var(--qr-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.qr-bar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#qr-layer-toggle, #qr-mode-toggle {
  display: inline-flex; align-items: center; gap: 6px; 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;
}
#qr-layer-toggle.active { background: var(--qr-active-bg); }
#qr-mode-toggle.active, #qr-mode-toggle:hover { background: var(--qr-emphasis-bg); border-color: var(--qr-emphasis-bg); color: var(--qr-emphasis-text); }
.qr-badge { background: var(--qr-accent); color: var(--qr-on-accent); border-radius: 999px; font-size: 11px; padding: 1px 6px; }

/* Public/private badge (author only) */
#qr-public-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 500; cursor: pointer; transition: background 0.15s; user-select: none;
}
.qr-public-badge.public { background: var(--qr-badge-public-bg); color: var(--qr-accent-text); }
.qr-public-badge.public:hover { background: var(--qr-badge-public-bg-hover); }
.qr-public-badge.private { background: var(--qr-neutral-chip-bg); color: var(--qr-text-secondary); }
.qr-public-badge.private:hover { background: var(--qr-neutral-chip-bg-hover); }

/* --- 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-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; overflow-y: auto; padding: 0 16px; }
.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;
}

.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; }
.qr-act:hover { color: var(--qr-text); }

.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); }
.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; }

/* --- 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) --- */
body.qr-mode-active, body.qr-mode-active * { cursor: crosshair !important; }
body.qr-mode-active [id^="qr-"], body.qr-mode-active [id^="qr-"] *,
body.qr-mode-active .qr-pin { cursor: default !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; 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 { width: 100%; box-sizing: border-box; border: 1px solid var(--qr-pin-soft); border-radius: 8px; padding: 10px; font-size: 13px; 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; cursor: pointer; }
.qr-region-draft { z-index: 2147482400; }
.qr-pin-armed { z-index: 2147482600; pointer-events: none; }