/* Reviso for Bricks — Builder overlay styles
   -------------------------------------------------------------------------
   Colours pull from the Bricks variable scale we derive in the whitelabel
   module (--builder-gray-*, --builder-color-accent) with dark fallbacks.

   IMPORTANT — stacking / z-index strategy
   ----------------------------------------
   We deliberately avoid `transform` on #reviso-sidebar because any
   transform creates a new CSS stacking context. A transformed element at
   z-index:9000 will paint ABOVE un-transformed toolbar tooltips even when
   the toolbar has a much higher numeric z-index, because stacking contexts
   are compared as a whole. Instead we animate the `right` property so the
   sidebar stays in the normal stacking flow and Bricks toolbar tooltips
   (which live in the toolbar's own higher stacking context) always appear
   on top of the sidebar.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------------------- */
:root {
  --rv-panel-bg:    var(--builder-gray-2, #161a1d);
  --rv-surface:     var(--builder-gray-3, #1e252e);
  --rv-surface-hi:  var(--builder-gray-4, #263040);
  --rv-border:      rgba(255, 255, 255, .08);
  --rv-border-hi:   rgba(255, 255, 255, .15);
  --rv-text:        var(--builder-gray-d, #dde1e5);
  --rv-text-muted:  var(--builder-gray-9, #6e7f91);
  --rv-accent:      #2563eb;
  --rv-accent-text: #ffffff;
  --rv-hover:       rgba(255, 255, 255, .07);
  --rv-danger:      #e05252;
  --rv-success:     #3fbf6e;
  --rv-shadow:      -4px 0 24px rgba(0, 0, 0, .45), -1px 0 6px rgba(0, 0, 0, .2);
  --rv-radius:      6px;
  --rv-sidebar-w:   320px;
  /* z-index: confirmed from Bricks staging CSS —
     #bricks-toolbar is z-index: 3002.
     Sidebar at 3000 sits above Bricks panels but below the toolbar
     so toolbar tooltips always paint on top.
     Comment form at 3500 clears the toolbar (needed when a click
     lands near the top of the canvas). */
  --rv-z-sidebar:   3000;
  --rv-z-form:      3500;
}

/* -------------------------------------------------------------------------
   Defensive normalisation — the overlay renders in the PAGE DOM, so generic
   site CSS (button {…}, input {…}) leaks in. Reset the high-leak properties
   on our controls; component rules re-apply what they need.
   ------------------------------------------------------------------------- */
#reviso-sidebar button,
#reviso-comment-form button,
#reviso-fab-tip button {
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
  box-shadow: none;
  min-height: 0;
  min-width: 0;
  text-decoration: none;
}
#reviso-sidebar input,
#reviso-sidebar textarea,
#reviso-comment-form input,
#reviso-comment-form textarea {
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  min-height: 0;
}

/* -------------------------------------------------------------------------
   Toolbar items — native Bricks <li> feel
   No resting background. No ::before pseudo-element (conflicts with
   data-balloon's own ::before tooltip arrow on the same element).
   ------------------------------------------------------------------------- */
#reviso-tb-sidebar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 10px;
  cursor: pointer;
  color: var(--rv-text-muted);
  transition: color .15s;
  user-select: none;
}

#reviso-tb-sidebar:hover { color: var(--rv-text); }
#reviso-tb-sidebar.reviso-tb-active { color: var(--rv-accent); }

/* Match the native Bricks toolbar icon size (17×17). */
#reviso-tb-sidebar svg { width: 17px; height: 17px; }

/* Keep our button visible AND clickable when Bricks enters preview mode.
   Bricks hides every toolbar <li> except .preview / .new-tab (visibility +
   pointer-events), so we re-enable both, lift it above the toolbar so clicks
   land, and give it the same filled look as the native preview-mode actions. */
#bricks-toolbar.is-previewing li#reviso-tb-sidebar {
  visibility: visible !important;
  pointer-events: all !important;
  z-index: 3003;                 /* above the toolbar (3002) */
  /* Match the native "View on frontend" (.new-tab) button exactly. */
  background-color: var(--builder-bg-2, #1e252e);
  border-radius: var(--builder-border-radius, 4px);
  color: var(--rv-text);
  margin-inline-start: 4px;
}
#bricks-toolbar.is-previewing li#reviso-tb-sidebar:hover {
  /* Keep a solid fill on hover (don't wash it out). */
  background-color: var(--builder-bg-3, #263040);
  color: var(--rv-text);
}
#bricks-toolbar.is-previewing li#reviso-tb-sidebar.reviso-tb-active {
  /* Prefer --rv-accent-text (set by ensureAccentContrast() in builder.js) over
     Bricks' own inverse token — the latter is always white and breaks against
     light primaries like the default yellow. */
  background-color: var(--rv-accent);
  color: var(--rv-accent-text);
}

/* Open-comment count bubble on the toolbar icon.
   Positioned relative to #reviso-tb-sidebar (position:relative) so it
   sits in the top-right corner regardless of icon size. */
.reviso-open-badge {
  position: absolute;
  top: -3px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--rv-accent);
  color: var(--rv-accent-text);
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
}



/* -------------------------------------------------------------------------
   Scope toggle — "This page" / "All pages"
   ------------------------------------------------------------------------- */
.reviso-scope-bar {
  display: flex;
  flex-shrink: 0;
  padding: 8px 10px 4px;
}

.reviso-scope-btn {
  flex: 1;
  padding: 5px 6px;
  text-align: center;
  background: none;
  border: 1px solid var(--rv-border-hi);
  color: var(--rv-text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
  font-family: inherit;
}

.reviso-scope-btn:first-child {
  border-radius: 4px 0 0 4px;
}

.reviso-scope-btn:last-child {
  border-radius: 0 4px 4px 0;
  border-left: none;
}

.reviso-scope-btn:hover {
  background: var(--rv-hover);
  color: var(--rv-text);
}

.reviso-scope-btn.active {
  background: var(--rv-accent);
  color: var(--rv-accent-text);
  border-color: var(--rv-accent);
}

/* Comment count badge on each scope tab */
.reviso-scope-count:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 3px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--rv-surface-hi);
  color: var(--rv-text);
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}
.reviso-scope-btn.active .reviso-scope-count:not(:empty) {
  background: rgba(255,255,255,.25);
  color: var(--rv-accent-text);
}

/* Page label shown on each comment card in all-pages view */
.reviso-page-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--rv-text-muted);
  background: var(--rv-surface-hi);
  border: 1px solid var(--rv-border);
  padding: 1px 6px;
  border-radius: 3px;
  margin-bottom: 5px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* Clickable variant — navigates to that page's builder */
a.reviso-page-tag--nav {
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
a.reviso-page-tag--nav:hover {
  background: var(--rv-accent);
  color: var(--rv-accent-text);
  border-color: var(--rv-accent);
}

/* -------------------------------------------------------------------------
   Sidebar — floating draggable panel.
   Position (left/top) is set by JS from localStorage or a sensible default.
   We use opacity for show/hide rather than transform so that, at z-index 3000,
   the sidebar's stacking context still sits below the Bricks toolbar (3002)
   and toolbar tooltips always paint above us.
   ------------------------------------------------------------------------- */
#reviso-sidebar {
  position: fixed;
  /* left/top set by JS — do not set right/bottom here */
  width: var(--rv-sidebar-w);
  max-height: calc(100vh - 80px);
  background: var(--rv-panel-bg);
  border: 1px solid var(--rv-border-hi);
  border-radius: 10px;
  z-index: var(--rv-z-sidebar);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .55), 0 2px 12px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  font-size: inherit;
  overflow: hidden;
}

#reviso-sidebar.reviso-sidebar--open {
  opacity: 1;
  pointer-events: auto;
}

/* Header — drag handle + title/close */
.reviso-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 44px;
  background: var(--rv-surface);
  border-bottom: 1px solid var(--rv-border);
  border-radius: 10px 10px 0 0;
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
}

.reviso-sidebar-header:active { cursor: grabbing; }
/* Buttons inside the header keep a normal pointer cursor */
.reviso-sidebar-header button { cursor: pointer; }

.reviso-sidebar-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;       /* Bricks panel heading size */
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--rv-text);
}

.reviso-sidebar-title svg { flex-shrink: 0; width: 16px; height: 16px; }

.reviso-sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: var(--rv-text-muted);
  cursor: pointer;
  border-radius: 4px;
  padding: 0;
  transition: background .12s, color .12s;
}

.reviso-sidebar-close:hover {
  background: var(--rv-hover);
  color: var(--rv-text);
}

.reviso-sidebar-close svg { width: 16px; height: 16px; }

/* Filter tabs */
/* Viewport size switcher — preview responsive layouts without leaving comment mode */
.reviso-viewport-bar {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rv-border);
  flex-shrink: 0;
}
.reviso-vp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--rv-border-hi);
  background: transparent;
  color: var(--rv-text-muted);
  cursor: pointer;
  transition: all .12s;
}
.reviso-vp-btn svg { width: 15px; height: 15px; }
.reviso-vp-btn:hover  { border-color: var(--rv-accent); color: var(--rv-accent); }
.reviso-vp-btn.active { background: var(--rv-accent); border-color: var(--rv-accent); color: var(--rv-accent-text); }

/* Comment list */
.reviso-comment-list {
  flex: 1;
  /* Must be the offsetParent for the exit animation. reconcileCardList() pins a
     departing card with position:absolute using offsetTop/offsetLeft; without a
     positioned list those resolve against some distant ancestor and ignore this
     container's scroll, so the card was placed off its own slot — it read as
     "shrank but never went", and the survivors had nothing to slide up into. */
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--rv-surface-hi) transparent;
  /* Anchor for cards that pin themselves (position:absolute) while animating
     out, so survivors can FLIP-slide into the freed space. */
  position: relative;
}

/* ── Graceful card animation (enter / exit / move) — 1.0.8 ────────────────── */
/* New cards fade + settle in; removed cards fade out while the reconciler
   slides survivors (via inline transforms). Resolve/reopen transitions are
   handled by the card's own opacity/border transitions below. */
/* No fill-mode: the card's resting state is fully visible, so a card whose
   animation is throttled (background tab) or delayed can never get stranded
   invisible — worst case is a one-frame flash-in. */
.reviso-card-enter {
  animation: reviso-card-in .3s ease;
}
@keyframes reviso-card-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.reviso-card-exit {
  opacity: 0;
  transform: scale(.97);
  overflow: hidden;
  transition: opacity .26s ease, transform .26s ease;
}
@media (prefers-reduced-motion: reduce) {
  .reviso-card-enter { animation: none !important; }
  .reviso-card-exit  { transition: none !important; }
}

.reviso-comment-list::-webkit-scrollbar       { width: 4px; }
.reviso-comment-list::-webkit-scrollbar-thumb { background: var(--rv-surface-hi); border-radius: 2px; }

.reviso-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--rv-text-muted);
  font-size: 13px;
}


/* -------------------------------------------------------------------------
   Comment card
   ------------------------------------------------------------------------- */
.reviso-comment {
  padding: 12px 14px 12px 13px;
  border-bottom: 1px solid var(--rv-border);
  border-left: 3px solid var(--rv-user, transparent);
  transition: background .1s, opacity .25s ease;
}

.reviso-comment:hover        { background: var(--rv-hover); }
.reviso-comment.is-resolved  { opacity: .5; }

/* BugSmash-style top row: avatar (left) · name/time · number bubble (right) */
.reviso-comment-header,
.reviso-comment-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}

/* Avatar — uses Bricks accent as background */
.reviso-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rv-accent);
  color: var(--rv-accent-text);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.reviso-avatar--sm {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

.reviso-comment-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
}

.reviso-comment-meta strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  color: var(--rv-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reviso-time { font-size: 11px; line-height: 1.25; color: var(--rv-text-muted); }

.reviso-comment-body {
  font-size: 15px;
  color: var(--rv-text);
  opacity: 1;
  margin: 0 0 10px;
  line-height: 1.55;
  word-break: break-word;
}

/* Pin number badge — circular bubble pinned to the right of the top row,
   mirroring the numbered marker on the canvas. */
.reviso-pin-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--rv-accent);
  color: var(--rv-accent-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.is-resolved .reviso-pin-num { background: var(--rv-success); }

/* Orphaned-comment badge — shown when the anchored element no longer exists */
.reviso-orphaned-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: #d97706;
  background: rgba(217, 119, 6, .12);
  border: 1px solid rgba(217, 119, 6, .25);
  padding: 1px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
}

/* "Hidden at this size" badge — the anchored element exists but isn't present
   at the current viewport (comment was left on a different breakpoint). Calm
   blue, not the amber "removed" warning: this is informational + actionable
   (clicking the card switches to the comment's breakpoint). */
.reviso-hidden-vp-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: #2563eb;
  background: rgba(37, 99, 235, .10);
  border: 1px solid rgba(37, 99, 235, .22);
  padding: 1px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
  cursor: pointer;
}

/* Screenshot thumbnail inside a comment card — small by design, click to zoom */
.reviso-shot {
  display: inline-block;
  vertical-align: top;
  margin: 2px 6px 10px 0;
  width: 96px;
  height: 64px;
  border: 1px solid var(--rv-border-hi);
  border-radius: var(--rv-radius);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color .12s, transform .12s;
}

.reviso-shot:hover { border-color: var(--rv-accent); transform: scale(1.03); }

.reviso-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Focus flash when a pin selects its comment */
.reviso-comment.reviso-flash {
  animation: reviso-flash-kf 1.4s ease-out;
}

@keyframes reviso-flash-kf {
  0%, 30% { background: rgba(37, 99, 235, .22); }
  100%    { background: transparent; }
}

/* Screenshot lightbox */
#reviso-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(0, 0, 0, .8);
  cursor: zoom-out;
}

#reviso-lightbox.hidden { display: none; }

.reviso-lightbox-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  max-height: 100%;
}

#reviso-lightbox img {
  max-width: 100%;
  max-height: calc(92vh - 50px);
  border-radius: var(--rv-radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}

.reviso-lightbox-bar {
  display: flex;
  justify-content: center;
  cursor: default;
}

.reviso-lb-media:disabled { opacity: 1; cursor: default; }

/* -------------------------------------------------------------------------
   Resolve / reopen button — icon-only, same size as Bricks icon buttons
   ------------------------------------------------------------------------- */
.reviso-resolve-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: 1px solid var(--rv-border-hi);
  border-radius: 4px;
  color: var(--rv-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all .12s;
}

.reviso-resolve-btn svg { width: 16px; height: 16px; }

.reviso-resolve-btn:hover {
  background: var(--rv-success);
  border-color: var(--rv-success);
  color: #fff;
}

.is-resolved .reviso-resolve-btn:hover {
  background: var(--rv-hover);
  border-color: var(--rv-border-hi);
  color: var(--rv-text-muted);
}

/* -------------------------------------------------------------------------
   Reply thread
   ------------------------------------------------------------------------- */
.reviso-reply-btn {
  background: none;
  border: none;
  color: var(--rv-text-muted);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  padding: 2px 0;
  margin-top: 2px;
  transition: color .12s;
}

.reviso-reply-btn:hover { color: var(--rv-accent); }

.reviso-locate-btn {
  background: none;
  border: none;
  color: var(--rv-text-muted);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  text-decoration: none;
  padding: 2px 8px 2px 0;
  margin-top: 2px;
  transition: color .12s;
}
.reviso-locate-btn:hover { color: var(--rv-accent); }

/* Whole-card click → locate + open thread */
.reviso-comment--clickable { cursor: pointer; }

/* Card footer — row of actions (Reply · Resolve · Delete) */
.reviso-comment-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Reply / view-thread button */
.reviso-reply-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--rv-border-hi);
  border-radius: 4px;
  color: var(--rv-text-muted);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  padding: 3px 9px;
  transition: all .12s;
}
.reviso-reply-open svg { width: 13px; height: 13px; }

/* Explicit Resolve/Reopen text button (footer, next to Reply) — replaced the
   hover-revealed circle icon, which was too hidden to discover. */
.reviso-resolve-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--rv-border-hi);
  border-radius: 4px;
  color: var(--rv-text-muted);
  cursor: pointer;
  padding: 3px 8px;
  transition: all .12s;
}
.reviso-resolve-text svg { width: 16px; height: 16px; }
/* The card tick carries BOTH classes: .reviso-resolve-btn fixes it to a 26px
   square while .reviso-resolve-text adds 3px 8px padding — together they
   flex-shrink the 16px icon down to ~8px. Zero the padding and stop the shrink
   so the tick renders at full 16px. (Text-only resolve buttons keep padding.) */
.reviso-resolve-btn.reviso-resolve-text { padding: 0; }
.reviso-resolve-btn svg, .reviso-resolve-text svg { flex-shrink: 0; }
.reviso-resolve-text.is-resolved {
  color: var(--rv-success);
  border-color: var(--rv-success);
}
.reviso-resolve-text:hover {
  background: var(--rv-teal-bg, rgba(63,191,110,.12));
  border-color: var(--rv-success);
  color: var(--rv-success);
}
.reviso-resolve-text.is-resolved:hover {
  background: var(--rv-hover);
  border-color: var(--rv-border-hi);
  color: var(--rv-text);
}
.reviso-reply-open:hover { border-color: var(--rv-accent); color: var(--rv-accent); }

/* Delete button (mirrors the resolve button, danger on hover) */
.reviso-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: auto;
  background: none;
  border: 1px solid var(--rv-border-hi);
  border-radius: 4px;
  color: var(--rv-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all .12s;
}
.reviso-delete-btn svg { width: 14px; height: 14px; }
.reviso-delete-btn:hover {
  background: var(--rv-danger);
  border-color: var(--rv-danger);
  color: #fff;
}
/* Two-click confirm — "click again to delete" */
.reviso-delete-btn.is-armed {
  background: var(--rv-danger);
  border-color: var(--rv-danger);
  color: #fff;
  animation: reviso-arm-pulse 1s ease-in-out infinite;
}
@keyframes reviso-arm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--rv-danger); }
  50%      { box-shadow: 0 0 0 4px rgba(224, 82, 82, .25); }
}

/* "N replies" indicator (card click opens the thread) */
.reviso-thread-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--rv-text-muted);
  font-size: 12px;
  margin: 2px 0 4px;
}
.reviso-thread-count svg { width: 14px; height: 14px; }

/* Thread detail view */
.reviso-thread { padding: 4px 0; }
.reviso-thread-back {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rv-border);
  color: var(--rv-text-muted);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  padding: 8px 14px;
  transition: color .12s;
}
.reviso-thread-back:hover { color: var(--rv-accent); }
.reviso-thread .reviso-comment { border-bottom: none; }
.reviso-thread-reply { padding: 0 14px 14px; }
/* The reply form is appended as a sibling of .reviso-thread-reply — give it
   matching side spacing so it doesn't run edge-to-edge inside the modal. */
.reviso-thread .reviso-inline-reply { margin: 0 14px 14px; }

.reviso-replies {
  margin: 8px 0 6px 14px;
  border-left: 2px solid var(--rv-border-hi);
  padding-left: 10px;
}

.reviso-reply {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.reviso-reply strong { display: block; color: var(--rv-text); font-size: 12px; margin-bottom: 1px; }
.reviso-reply .reviso-time { display: block; margin-bottom: 2px; }
.reviso-reply p { color: var(--rv-text); opacity: .8; margin: 0; font-size: 13px; line-height: 1.5; word-break: break-word; }

.reviso-inline-reply { margin-top: 8px; }

.reviso-inline-reply textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--rv-surface);
  border: 1px solid var(--rv-border-hi);
  border-radius: var(--rv-radius);
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--rv-text);
  resize: vertical;
  outline: none;
  transition: border-color .15s;
}

.reviso-inline-reply textarea::placeholder { color: var(--rv-text-muted); }

.reviso-inline-reply textarea:focus {
  border-color: var(--rv-accent);
  box-shadow: 0 0 0 2px var(--rv-accent-bg, rgba(37, 99, 235, .18));
}

.reviso-inline-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

/* -------------------------------------------------------------------------
   Shared buttons
   ------------------------------------------------------------------------- */
.reviso-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--rv-radius);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .12s;
  line-height: 1.4;
}

.reviso-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.reviso-btn-primary                { background: var(--rv-accent); color: var(--rv-accent-text); border-color: var(--rv-accent); }
.reviso-btn-primary:hover          { filter: brightness(1.12); }
.reviso-btn-primary:disabled       { opacity: .5; cursor: not-allowed; }
.reviso-btn-ghost                  { background: transparent; color: var(--rv-text-muted); border-color: var(--rv-border-hi); }
.reviso-btn-ghost:hover            { background: var(--rv-hover); color: var(--rv-text); }

/* -------------------------------------------------------------------------
   Comment form popover — z-index 200 so it clears toolbar + tooltips
   ------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Bricks Builder — layout switch between editor mode and Preview Mode

   The Bricks comment toolbar button and the Bricks Preview button are
   independent now: toggling comments doesn't enter Preview, and entering
   Preview doesn't open / close the sidebar. The two states compose:

     - Editor + sidebar open  → docked to left side (Structure-tab slot).
                                Pin layer / FAB / floating comment form
                                are all suppressed (clicks would hit
                                Bricks UI, not the canvas).
     - Preview + sidebar open → floating draggable modal + active pin
                                layer + canvas-click placement.
     - Sidebar closed         → nothing rendered either way.

   The `.reviso-bricks-preview` class is toggled on <body> by builder.js
   observing `#bricks-toolbar.is-previewing`. The docked-layout overrides
   live just below the hide rules.
--------------------------------------------------------------------------- */
/* Overlay UI that only makes sense over a rendered preview — the FAB,
   floating comment form, pin layer, and popovers — is hidden in editor
   mode. The sidebar is the exception: it stays available in both modes
   so the reviewer can read / triage comments while editing. In editor
   mode it docks to the left side (see the docked-layout rules below);
   in preview it floats and is draggable. */
/* The Gutenberg block editor and Elementor editor are both body.wp-admin but
   legitimately run the full floating overlay (FAB + pins + form), so each is
   excluded via the host's body marker (reviso-gutenberg-editor /
   reviso-elementor-editor). Without the Elementor exclusion the whole feedback
   overlay is display:none in the Elementor editor. */
body.wp-admin:not(.reviso-bricks-preview):not(.reviso-gutenberg-editor):not(.reviso-elementor-editor) #reviso-comment-form,
body.wp-admin:not(.reviso-bricks-preview):not(.reviso-gutenberg-editor):not(.reviso-elementor-editor) #reviso-fab,
body.wp-admin:not(.reviso-bricks-preview):not(.reviso-gutenberg-editor):not(.reviso-elementor-editor) #reviso-pin-layer,
body.wp-admin:not(.reviso-bricks-preview):not(.reviso-gutenberg-editor):not(.reviso-elementor-editor) #reviso-pending-pin,
body.wp-admin:not(.reviso-bricks-preview):not(.reviso-gutenberg-editor):not(.reviso-elementor-editor) .reviso-popover {
  display: none !important;
}
/* Bricks builder doesn't add wp-admin to body — instead the URL is
   ?bricks=run. builder.js stamps `reviso-in-editor` on body once it sees
   Bricks's own root element (#bricks-app). A JS-managed class instead of
   `body:has(#bricks-app)` — the :has() form silently failed to match on
   some Bricks/browser combinations, leaving the panel floating. */
/* NB: .reviso-popover must NOT be in this list — the status/assign/device
   pills open popovers that are PANEL UI, not canvas overlay; hiding them
   here made the card dropdowns silently dead in the docked editor. */
body.reviso-in-editor:not(.reviso-bricks-preview) #reviso-comment-form,
body.reviso-in-editor:not(.reviso-bricks-preview) #reviso-fab,
body.reviso-in-editor:not(.reviso-bricks-preview) #reviso-pin-layer,
body.reviso-in-editor:not(.reviso-bricks-preview) #reviso-pending-pin {
  display: none !important;
}

/* Docked sidebar layout — when in the Bricks builder AND NOT in Preview
   Mode, the sidebar sits as a fixed left-edge panel where the Structure
   tab usually lives, rather than as a floating draggable modal. Size +
   vertical offset are driven by CSS vars (set by builder.js from the
   resize handles, persisted to localStorage) so the panel can be made
   shorter and stacked above/below the Structure panel rather than always
   covering the full edge. Defaults reproduce the original full-height dock.
   Toggling Preview Mode swaps this for the floating modal layout, and the
   header dock-toggle lets the user opt out per-browser (.reviso-float). */
body.reviso-in-editor:not(.reviso-bricks-preview) #reviso-sidebar.reviso-sidebar--open:not(.reviso-float) {
  position: fixed !important;
  left: var(--rv-dock-left, 0px) !important;
  top: var(--rv-dock-top, 33px) !important;
  width: var(--rv-dock-w, 340px) !important;
  height: var(--rv-dock-h, calc(100vh - var(--rv-dock-top, 33px))) !important;
  max-height: none !important;
  border-radius: 0 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  box-shadow: 2px 0 24px rgba(0, 0, 0, .35);
}
body.reviso-in-editor:not(.reviso-bricks-preview) #reviso-sidebar.reviso-sidebar--open:not(.reviso-float) .reviso-sidebar-header {
  cursor: default !important;
}

/* Docked (in-editor) panel: compact the header chrome so the comment LIST
   keeps the vertical space — the floating modal's roomy spacing left a short
   dock with a tiny scroll area. Scoped strictly to the docked editor state. */
body.reviso-in-editor:not(.reviso-bricks-preview) #reviso-sidebar.reviso-sidebar--open:not(.reviso-float) .reviso-sidebar-header { padding: 7px 12px; }
body.reviso-in-editor:not(.reviso-bricks-preview) #reviso-sidebar.reviso-sidebar--open:not(.reviso-float) .reviso-scope-btn { padding: 7px 0; font-size: 12px; }
body.reviso-in-editor:not(.reviso-bricks-preview) #reviso-sidebar.reviso-sidebar--open:not(.reviso-float) .reviso-tools-row { padding: 7px 12px 7px; }

/* Resize handles for the docked panel. Hidden by default; builder.js adds
   .reviso-dock-resizable when the panel is docked (editor, not preview).
   The right handle drags width; the bottom handle drags height. */
#reviso-sidebar .reviso-dock-resize { display: none; }
body.reviso-in-editor:not(.reviso-bricks-preview) #reviso-sidebar.reviso-sidebar--open.reviso-dock-resizable:not(.reviso-float) .reviso-dock-resize {
  display: block;
  position: absolute;
  z-index: 5;
}
#reviso-sidebar .reviso-dock-resize-x {
  top: 0; right: -3px; width: 7px; height: 100%;
  cursor: ew-resize;
}
/* Right-aligned column (Structure on the right): the resizable edge faces the
   canvas, i.e. the panel's LEFT edge. */
#reviso-sidebar.reviso-dock-x-inner-left .reviso-dock-resize-x {
  right: auto; left: -3px;
}
#reviso-sidebar .reviso-dock-resize-y {
  left: 0; bottom: -3px; width: 100%; height: 7px;
  cursor: ns-resize;
}
/* Stacked with Structure: the column width is Bricks-owned (use Bricks' own
   panel resizer) — hide our width handle; the height divider remains. */
body.reviso-in-editor #reviso-sidebar.reviso-dock-stacked .reviso-dock-resize-x { display: none !important; }
#reviso-sidebar .reviso-dock-resize:hover { background: var(--rv-accent, #2563eb); opacity: .35; }
#reviso-sidebar.reviso-dock-dragging { user-select: none; }

#reviso-comment-form {
  position: fixed;
  width: 300px;
  /* Hard cap so the textarea's vertical resize can't grow the form
     beyond the viewport. Without this, the resize handle pushed the
     form taller than the screen and the action buttons at the bottom
     fell out of reach — felt like "the draggable modal broke" because
     once it was off-screen the only way back was to dismiss. */
  max-height: calc(100vh - 32px);
  background: var(--rv-surface);
  border: 1px solid var(--rv-border-hi);
  border-radius: var(--rv-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .28);
  z-index: var(--rv-z-form);
  /* Allow vertical resize — overflow must not be hidden so the resize
     handle remains visible at the bottom of the form. */
  overflow: visible;
  display: flex;
  flex-direction: column;
}

#reviso-comment-form.hidden { display: none; }

.reviso-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rv-border);
  border-radius: var(--rv-radius) var(--rv-radius) 0 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rv-text-muted);
  background: var(--rv-panel-bg);
  /* Grab cursor signals drag affordance — wired up by setupFormDrag(). */
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}
.reviso-form-header.is-dragging { cursor: grabbing; }
.reviso-form-header button { cursor: pointer; }

.reviso-form-close {
  background: none;
  border: none;
  color: var(--rv-text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
  transition: color .12s;
}

.reviso-form-close:hover { color: var(--rv-text); }

.reviso-form-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--rv-border);
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 68px;   /* ~3 rows */
  max-height: 400px;
  outline: none;
  color: var(--rv-text);
  background: var(--rv-surface);
  border-radius: 0;
  /* Style the resize handle to match the dark theme */
  scrollbar-width: thin;
  scrollbar-color: var(--rv-surface-hi) transparent;
}

.reviso-form-textarea::placeholder { color: var(--rv-text-muted); }
.reviso-form-textarea:focus        { background: var(--rv-surface-hi); }

.reviso-form-error {
  min-height: 16px;
  font-size: 12px;
  color: var(--rv-danger);
  padding: 4px 12px 0;
  margin: 0;
}

/* Screenshot capture status inside the comment form */
.reviso-form-shot {
  font-size: 11px;
  padding: 2px 12px 0;
  margin: 0;
  color: var(--rv-text-muted);
}
.reviso-form-shot--ok   { color: var(--rv-success); }
.reviso-form-shot--fail { color: var(--rv-text-muted); opacity: .8; }

/* -------------------------------------------------------------------------
   Audience switch — says who will see the comment before it is posted.
   Reuses the admin bar's .rqr-switch classes so it reads as the same control,
   but that stylesheet is scoped to #wpadminbar and never reaches here. This
   file does reach both places the engine renders: the builder panel, and the
   front-end shadow root (it is listed in cfg.cssUrls).
   ------------------------------------------------------------------------- */
.reviso-form-audience {
  display: flex;
  align-items: center;
  padding: 2px 12px 8px;
}
.reviso-form-audience .rqr-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.reviso-form-audience .rqr-switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 18px;
  background: var(--rv-input-bg, rgba(128, 128, 128, .22));
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rv-border-hi, rgba(128, 128, 128, .35));
  transition: background .18s ease;
}
.reviso-form-audience .rqr-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}
.reviso-form-audience .rqr-switch.is-on .rqr-switch-track {
  background: var(--rv-accent);
  box-shadow: none;
}
.reviso-form-audience .rqr-switch.is-on .rqr-switch-thumb {
  transform: translateX(14px);
}
.reviso-form-audience .rqr-switch-text {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--rv-text-sub);
}
.reviso-form-audience .rqr-switch:hover .rqr-switch-text {
  color: var(--rv-text);
}

.reviso-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 10px 10px;
  background: var(--rv-panel-bg);
  border-radius: 0 0 var(--rv-radius) var(--rv-radius);
}

/* -------------------------------------------------------------------------
   Attachments — comment form picker + rendered attachments on cards
   ------------------------------------------------------------------------- */
.reviso-form-attach {
  padding: 6px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reviso-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--rv-border-hi);
  border-radius: var(--rv-radius);
  color: var(--rv-text-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all .12s;
  align-self: flex-start;
}

.reviso-attach-btn:hover { border-color: var(--rv-accent); color: var(--rv-accent); }
.reviso-attach-btn svg   { width: 13px; height: 13px; }

/* File list — wrapping row of pills */
.reviso-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 0;
}

/* Individual file pill with × button */
.reviso-file-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 200px;
  padding: 2px 4px 2px 8px;
  background: var(--rv-surface-hi);
  border: 1px solid var(--rv-border-hi);
  border-radius: 12px;
  font-size: 11px;
  color: var(--rv-text);
  line-height: 1.4;
}

.reviso-file-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.reviso-file-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  color: var(--rv-text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  border-radius: 50%;
  transition: background .1s, color .1s;
}

.reviso-file-remove:hover {
  background: var(--rv-danger);
  color: #fff;
}

.reviso-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 10px;
}

/* Image attachments share the screenshot thumbnail look but tile in a grid */
.reviso-attach-img {
  width: calc(50% - 4px);
  margin: 0;
}

.reviso-attach-img img { max-height: 96px; }

/* Non-image file chip */
.reviso-file {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  background: var(--rv-surface);
  border: 1px solid var(--rv-border-hi);
  border-radius: var(--rv-radius);
}

.reviso-file-link {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  color: var(--rv-text);
  text-decoration: none;
  font-size: 12px;
}

.reviso-file-link svg  { width: 15px; height: 15px; flex-shrink: 0; color: var(--rv-text-muted); }
.reviso-file-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reviso-file-link:hover { color: var(--rv-accent); }

.reviso-file-media {
  flex-shrink: 0;
  padding: 2px 7px;
  background: transparent;
  border: 1px solid var(--rv-border-hi);
  border-radius: 4px;
  color: var(--rv-text-muted);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: all .12s;
}

.reviso-file-media:hover:not(:disabled) { border-color: var(--rv-accent); color: var(--rv-accent); }
.reviso-file-media:disabled { color: var(--rv-success); border-color: var(--rv-success); cursor: default; }

/* Auto-linkified URLs inside comment/reply bodies */
.reviso-comment-body a,
.reviso-reply a { color: var(--rv-accent); text-decoration: underline; word-break: break-all; }

/* -------------------------------------------------------------------------
   AI: summarize bar, summary modal, triage badge
   ------------------------------------------------------------------------- */
#reviso-summary {
  position: fixed;
  inset: 0;
  z-index: 3600;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 4vw;
}
.reviso-summary-inner {
  width: 460px;
  max-width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--rv-panel-bg);
  border: 1px solid var(--rv-border-hi);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  padding: 0 0 12px;
}
.reviso-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rv-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--rv-text);
  position: sticky;
  top: 0;
  background: var(--rv-surface);
}
.reviso-summary-close {
  background: none; border: none; color: var(--rv-text-muted); cursor: pointer; padding: 2px; border-radius: 4px;
}
.reviso-summary-close:hover { color: var(--rv-text); }
.reviso-summary-close svg { width: 16px; height: 16px; }
.reviso-summary-overview { padding: 12px 16px; margin: 0; color: var(--rv-text); font-size: 13px; line-height: 1.5; }
.reviso-summary-themes { padding: 0 16px; display: flex; flex-direction: column; gap: 8px; }
.reviso-theme {
  border: 1px solid var(--rv-border-hi);
  border-left: 3px solid var(--rv-text-muted);
  border-radius: 6px;
  padding: 8px 10px;
}
.reviso-theme--high   { border-left-color: var(--rv-danger); }
.reviso-theme--medium { border-left-color: #d97706; }
.reviso-theme--low    { border-left-color: var(--rv-success); }
.reviso-theme-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.reviso-theme-head strong { color: var(--rv-text); font-size: 13px; }
.reviso-theme-meta { color: var(--rv-text-muted); font-size: 11px; text-transform: capitalize; flex-shrink: 0; }
.reviso-theme p { margin: 4px 0 0; color: var(--rv-text); opacity: .8; font-size: 12px; line-height: 1.45; }

.reviso-triage {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: capitalize;
  padding: 1px 7px;
  border-radius: 10px;
  margin-bottom: 6px;
  background: var(--rv-surface-hi);
  color: var(--rv-text-muted);
  border: 1px solid var(--rv-border-hi);
}
.reviso-triage--high   { color: #fff; background: var(--rv-danger); border-color: var(--rv-danger); }
.reviso-triage--medium { color: #fff; background: #d97706; border-color: #d97706; }
.reviso-triage--low    { color: #fff; background: var(--rv-success); border-color: var(--rv-success); }

/* -------------------------------------------------------------------------
   Review rounds bar
   ------------------------------------------------------------------------- */
.reviso-review-bar:empty { display: none; }
.reviso-review-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rv-border);
  flex-shrink: 0;
}
.reviso-review-select {
  flex: 1;
  min-width: 0;
  background: var(--rv-surface);
  color: var(--rv-text);
  border: 1px solid var(--rv-border-hi);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
/* -------------------------------------------------------------------------
   Pro: status + assignee selects on a comment card
   ------------------------------------------------------------------------- */
.reviso-controls {
  display: flex;
  gap: 6px;
  margin: 0 0 8px;
}

.reviso-controls select {
  flex: 1;
  min-width: 0;
  background: var(--rv-surface);
  color: var(--rv-text);
  border: 1px solid var(--rv-border-hi);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.reviso-controls select:focus {
  outline: none;
  border-color: var(--rv-accent);
}

/* -------------------------------------------------------------------------
   Auto-captured environment context chip
   ------------------------------------------------------------------------- */
.reviso-ctx {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--rv-text-muted);
}

.reviso-ctx > span { white-space: nowrap; }

.reviso-ctx-err {
  color: #d97706;
  font-weight: 600;
  cursor: help;
}

/* ============================================================================
   COMMENTS MODAL — design redesign (light + dark theme)
   ----------------------------------------------------------------------------
   Tokens follow the design bundle. Default is dark; honours OS preference;
   explicit override via `[data-rv-theme]` on the documentElement.
   This block intentionally appears at the end of the file so it overrides
   earlier defaults via the cascade.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Theme tokens ────────────────────────────────────────────────────────── */
/* Dark defaults — anchor on Bricks's own --builder-gray-* / --builder-color-*
   scale so the modal automatically follows the Bricks UI palette + any
   white-label overrides. Fallbacks make the FE (no --builder-* vars) look
   right without any host config. */
:root,
:root[data-rv-theme="dark"] {
  --rv-scene:         var(--builder-gray-1, #161a1d);
  --rv-modal:         var(--builder-gray-2, #1e252e);
  --rv-surface:       var(--builder-gray-3, #263040);
  --rv-surface-hi:    var(--builder-gray-4, #2f3a4d);
  --rv-border:        rgba(255, 255, 255, .08);
  --rv-border-hi:     rgba(255, 255, 255, .15);
  --rv-text:          var(--builder-gray-d, #e8eaf5);
  --rv-text-sub:      var(--builder-gray-b, #aab2bc);
  --rv-text-muted:    var(--builder-gray-9, #6e7f91);
  --rv-accent:        #2563eb;
  --rv-accent-bg:     rgba(37, 99, 235, .18);
  --rv-accent-text:   #ffffff;
  --rv-teal:          #3fbf6e;
  --rv-teal-bg:       rgba(63, 191, 110, .15);
  --rv-danger:        #e05252;
  --rv-danger-bg:     rgba(224, 82, 82, .15);
  --rv-success:       #3fbf6e;

  /* ── Status palette — ONE source of truth ──────────────────────────────
     Every status signal (comment states, page states, counters, pills,
     dropdowns) must come from these four pairs. They previously drifted:
     two different ambers (#f59e0b vs #d97706), three different greens
     (#3fbf6e, #22c55e, admin's #047857), and "Resolved" rendered grey in
     one control while its own count rendered green.
       todo/neutral -> grey   (nothing has happened yet)
       active       -> blue   (in review / current)
       progress     -> amber  (in progress / open, being worked)
       done         -> green  (resolved / approved / reviewed) */
  --rv-status-todo:        var(--rv-text-muted, #6e7f91);
  --rv-status-todo-bg:     rgba(128, 128, 128, .15);
  --rv-status-active:      var(--rv-accent, #2563eb);
  --rv-status-active-bg:   var(--rv-accent-bg, rgba(37, 99, 235, .18));
  --rv-status-progress:    #d97706;
  --rv-status-progress-bg: rgba(217, 119, 6, .16);
  --rv-status-done:        var(--rv-success, #3fbf6e);
  --rv-status-done-bg:     rgba(63, 191, 110, .15);
  --rv-shadow-modal:  0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --rv-shadow-card:   0 1px 4px rgba(0, 0, 0, 0.3);
  --rv-shadow-card-h: 0 6px 24px rgba(0, 0, 0, 0.45);
  --rv-shadow-pop:    0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --rv-font-stack:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* OS-prefers light AND no explicit dark override → light */
@media (prefers-color-scheme: light) {
  :root:not([data-rv-theme="dark"]) {
    --rv-scene:         #edeae5;
    --rv-modal:         #ffffff;
    --rv-surface:       #f8f6f3;
    --rv-surface-hi:    #f0ede8;
    --rv-border:        #e4dfd9;
    --rv-border-hi:     #bfb8b0;
    --rv-text:          #1c1917;
    --rv-text-sub:      #6b6560;
    --rv-text-muted:    #a09890;
    --rv-accent:        #4f46e5;
    --rv-accent-bg:     #eeecfd;
    --rv-teal:          #0d9488;
    --rv-teal-bg:       #ebfdf8;
    --rv-danger:        #dc2626;
    --rv-danger-bg:     rgba(220, 38, 38, 0.08);
    --rv-success:       #0d9488;
    --rv-shadow-modal:  0 24px 64px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    --rv-shadow-card:   0 1px 4px rgba(0, 0, 0, 0.04);
    --rv-shadow-card-h: 0 6px 24px rgba(0, 0, 0, 0.08);
    --rv-shadow-pop:    0 8px 32px rgba(0, 0, 0, 0.12);
  }
}

/* Explicit light override always wins */
:root[data-rv-theme="light"] {
  --rv-scene:         #edeae5;
  --rv-modal:         #ffffff;
  --rv-surface:       #f8f6f3;
  --rv-surface-hi:    #f0ede8;
  --rv-border:        #e4dfd9;
  --rv-border-hi:     #bfb8b0;
  --rv-text:          #1c1917;
  --rv-text-sub:      #6b6560;
  --rv-text-muted:    #a09890;
  --rv-accent:        #4f46e5;
  --rv-accent-bg:     #eeecfd;
  --rv-teal:          #0d9488;
  --rv-teal-bg:       #ebfdf8;
  --rv-danger:        #dc2626;
  --rv-danger-bg:     rgba(220, 38, 38, 0.08);
  --rv-success:       #0d9488;
  --rv-shadow-modal:  0 24px 64px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --rv-shadow-card:   0 1px 4px rgba(0, 0, 0, 0.04);
  --rv-shadow-card-h: 0 6px 24px rgba(0, 0, 0, 0.08);
  --rv-shadow-pop:    0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Bridge tokens to existing rules (older parts of this file still reference these) */
:root {
  --rv-panel-bg:    var(--rv-modal);
  --rv-hover:       var(--rv-surface-hi);
  --rv-radius:      10px;
  --rv-radius-lg:   14px;
  --rv-sidebar-w:   420px;
}

/* ── Modal shell ─────────────────────────────────────────────────────────── */
#reviso-sidebar {
  font-family: var(--rv-font-stack) !important;
  width: var(--rv-sidebar-w);
  max-height: 90vh;
  background: var(--rv-modal);
  border: 1px solid var(--rv-border);
  border-radius: var(--rv-radius-lg);
  box-shadow: var(--rv-shadow-modal);
  color: var(--rv-text);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background .2s, border-color .2s, box-shadow .2s;
}

/* Header */
/* Enforce border-box on the whole overlay. The host page can't be trusted to
   set it globally — notably the Gutenberg block editor (wp-admin) doesn't, so
   without this the fixed-height header + padding double up into an oversized
   bar. */
#reviso-sidebar, #reviso-sidebar *,
#reviso-comment-form, #reviso-comment-form *,
#reviso-mode-pill, #reviso-mode-pill *,
#reviso-fab, #reviso-fab *,
#reviso-popover, #reviso-popover * {
  box-sizing: border-box;
}
#reviso-sidebar .reviso-sidebar-header {
  /* Height comes from .reviso-sidebar-header (44px); keep horizontal padding
     only so the two don't stack into a tall header under content-box. */
  padding: 0 18px;
  border-bottom: 1px solid var(--rv-border);
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}
#reviso-sidebar .reviso-sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rv-text);
  flex: 1;
  min-width: 0;
}
#reviso-sidebar .reviso-sidebar-title svg {
  width: 17px;
  height: 17px;
  color: var(--rv-accent);
  flex-shrink: 0;
}
#reviso-sidebar .reviso-sidebar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#reviso-sidebar .reviso-brand-logo { max-height: 30px; max-width: 180px; }
/* Light/dark logo swap. Lives here (not just review.css) so it works in the
   builder too — the builder loads only builder.css, which is why both logos
   were showing at once. data-rv-theme is set on documentElement and (in the
   front-end shadow) mirrored onto the shadow mount, so it matches in both. */
[data-rv-theme="dark"]  #reviso-sidebar .reviso-brand-logo--light,
[data-rv-theme="light"] #reviso-sidebar .reviso-brand-logo--dark { display: none; }

#reviso-sidebar .reviso-sidebar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
#reviso-sidebar .reviso-theme-toggle,
#reviso-sidebar .reviso-dock-toggle,
#reviso-sidebar .reviso-dockright-toggle,
#reviso-sidebar .reviso-resolved-headbtn,
#reviso-sidebar .reviso-sidebar-min,
#reviso-sidebar .reviso-sidebar-close {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: var(--rv-surface);
  color: var(--rv-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s;
  padding: 0;
}
#reviso-sidebar .reviso-theme-toggle svg,
#reviso-sidebar .reviso-dock-toggle svg,
#reviso-sidebar .reviso-dockright-toggle svg,
#reviso-sidebar .reviso-resolved-headbtn svg,
#reviso-sidebar .reviso-sidebar-min svg,
#reviso-sidebar .reviso-sidebar-close svg { width: 14px; height: 14px; }
#reviso-sidebar .reviso-theme-toggle:hover,
#reviso-sidebar .reviso-dock-toggle:hover,
#reviso-sidebar .reviso-dockright-toggle:hover,
#reviso-sidebar .reviso-resolved-headbtn:hover,
#reviso-sidebar .reviso-sidebar-min:hover,
#reviso-sidebar .reviso-sidebar-close:hover {
  background: var(--rv-surface-hi);
  color: var(--rv-text);
}

/* ── Minimised ────────────────────────────────────────────────────────────
   Collapse to the header bar so the page is fully visible, WITHOUT leaving
   comment mode (see setMinimised in engine.js — state.sidebarOpen stays true,
   so pins and the mode pill keep working). The bar stays draggable and shows
   an open-comment tally so the panel isn't out of sight, out of mind. */
#reviso-sidebar .reviso-min-count { display: none; }
#reviso-sidebar.reviso-sidebar--min {
  width: auto;
  min-width: 200px;
  max-width: min(320px, calc(100vw - 32px));
  max-height: none;
  height: auto;
  resize: none;
}
#reviso-sidebar.reviso-sidebar--min .reviso-scope-bar,
#reviso-sidebar.reviso-sidebar--min .reviso-tools-row,
#reviso-sidebar.reviso-sidebar--min .reviso-sidebar-body,
#reviso-sidebar.reviso-sidebar--min .reviso-sidebar-footer,
#reviso-sidebar.reviso-sidebar--min .reviso-dock-resize,
#reviso-sidebar.reviso-sidebar--min .reviso-ai-headbtn,
#reviso-sidebar.reviso-sidebar--min .reviso-resolved-headbtn,
#reviso-sidebar.reviso-sidebar--min .reviso-dockright-toggle,
#reviso-sidebar.reviso-sidebar--min .reviso-theme-toggle { display: none; }
#reviso-sidebar.reviso-sidebar--min .reviso-sidebar-header { border-bottom: none; }
#reviso-sidebar.reviso-sidebar--min .reviso-brand-logo { max-height: 22px; max-width: 120px; }
#reviso-sidebar.reviso-sidebar--min .reviso-min-count:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--rv-accent);
  color: var(--rv-accent-text, #fff);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
/* Minimised while docked: drop the full-height dock sizing so it reads as a
   bar, not an empty column. */
#reviso-sidebar.reviso-dock-right.reviso-sidebar--min {
  height: auto !important;
  bottom: auto !important;
}
#reviso-sidebar .reviso-dockright-toggle.is-active,
#reviso-sidebar .reviso-resolved-headbtn.is-active {
  background: var(--rv-accent);
  color: var(--rv-accent-text, #fff);
}

/* Styled tooltip (replaces native title everywhere in the engine). Appended to
   the shadow mount and positioned fixed; sits above whatever it describes. */
.reviso-tip {
  position: fixed;
  z-index: 2147483647;
  max-width: 240px;
  background: var(--rv-tip-bg, #0f1319);
  color: var(--rv-tip-text, #e8ebf0);
  font-family: var(--rv-font-stack, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  padding: 6px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .1s ease, transform .1s ease;
}
.reviso-tip.is-in { opacity: 1; transform: translateY(0); }
.reviso-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--rv-tip-arrow, 50%);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--rv-tip-bg, #0f1319);
}
.reviso-tip.reviso-tip--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--rv-tip-bg, #0f1319);
}

/* Dock-to-side: the panel snaps to the right edge at its normal width, full
   height. In the Gutenberg editor it clears the ~61px editor top bar. */
#reviso-sidebar.reviso-dock-right {
  position: fixed !important;
  top: var(--rv-dockright-top, 0) !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
}
#reviso-sidebar.reviso-dock-right .reviso-sidebar-header { cursor: default; }
body.reviso-gutenberg-editor #reviso-sidebar.reviso-dock-right { top: 61px !important; }
/* Dock toggle exists only inside the Bricks editor (builder.js injects it);
   hide it anywhere else builder.js happens to load (preview iframe). */
body:not(.reviso-in-editor) #reviso-sidebar .reviso-dock-toggle { display: none; }
#reviso-sidebar .reviso-dock-toggle.is-active { color: var(--rv-accent); }

/* AI summarize as a header icon (replaced the full-width bar — that cost an
   entire row of vertical space in the docked panel). */
#reviso-sidebar .reviso-ai-headbtn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  /* Neutral, like the other header icon buttons — it was accent-coloured
     (border + icon), which read as a coloured anomaly in the toolbar. */
  border: 1px solid var(--rv-border-hi, var(--rv-border));
  background: transparent;
  color: var(--rv-text-muted, var(--rv-text));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 13px;
  transition: background .12s, color .12s;
}
#reviso-sidebar .reviso-ai-headbtn svg { width: 16px; height: 16px; }
#reviso-sidebar .reviso-ai-headbtn:hover { background: var(--rv-surface-hi); color: var(--rv-text); }

#reviso-sidebar .reviso-scope-count:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--rv-surface);
  color: var(--rv-text-muted);
  min-width: 18px;
  transition: background .15s, color .15s;
}

/* ── Filter row 1: status pills ─────────────────────────────────────────── */

/* ── Tabs (This page / Everything) ───────────────────────────────────────── */
#reviso-sidebar .reviso-scope-bar {
  display: flex;
  padding: 0 18px;
  border-bottom: 1px solid var(--rv-border);
  background: transparent;
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
  gap: 2px;
}
#reviso-sidebar .reviso-scope-btn {
  flex: 1;
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 11px 0;
  color: var(--rv-text-sub);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--rv-font-stack);
  transition: color .15s, border-color .15s;
}
#reviso-sidebar .reviso-scope-btn:hover {
  color: var(--rv-text);
  background: transparent;
  border-color: transparent;
}
#reviso-sidebar .reviso-scope-btn.active {
  color: var(--rv-accent);
  border-bottom-color: var(--rv-accent);
  background: transparent;
}

/* ── Tools row: device dropdown · rounds · New round ────────────────────── */

/* "Resolved" toggle — replaces the old Open/Resolved/Mine/All pill row. */
#reviso-sidebar .reviso-resolved-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 12px;
  color: var(--rv-text-muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  font-family: var(--rv-font-stack);
  height: 28px;
  line-height: 1;
}
#reviso-sidebar .reviso-resolved-toggle input {
  /* `all: unset` first: themes routinely restyle bare input[type=checkbox]
     (appearance, ::before indicators, accent colours) and the overlay lives
     in the page DOM — wipe everything, then rebuild our switch. */
  all: unset;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box;
  display: inline-block;
  width: 28px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 99px !important;
  border: 1px solid var(--rv-border-hi) !important;
  background: var(--rv-surface-hi) !important;
  background-image: none !important;
  position: relative;
  cursor: pointer;
  flex: none;
  transition: background .15s, border-color .15s;
}
/* Themes often inject their checkbox tick via ::before — ours uses ::after. */
#reviso-sidebar .reviso-resolved-toggle input::before { content: none !important; }
#reviso-sidebar .reviso-resolved-toggle input::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rv-text-muted);
  transition: transform .15s, background .15s;
}
#reviso-sidebar .reviso-resolved-toggle input:checked {
  background: var(--rv-accent) !important;
  border-color: var(--rv-accent) !important;
}
#reviso-sidebar .reviso-resolved-toggle input:checked::after {
  transform: translateX(12px);
  background: #fff;
}
#reviso-sidebar .reviso-resolved-toggle:hover { color: var(--rv-text); }

#reviso-sidebar .reviso-tools-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  row-gap: 8px;
  padding: 9px 18px 11px;
  border-bottom: 1px solid var(--rv-border);
  background: transparent;
}
#reviso-sidebar .reviso-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--rv-border);
  background: var(--rv-surface);
  color: var(--rv-text-sub);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: all .12s;
  font-family: var(--rv-font-stack);
}
#reviso-sidebar .reviso-dropdown:hover {
  border-color: var(--rv-border-hi);
  background: var(--rv-surface-hi);
  color: var(--rv-text);
}
#reviso-sidebar .reviso-dropdown-icon { display: inline-flex; }
#reviso-sidebar .reviso-dropdown-icon svg { width: 13px; height: 13px; }
#reviso-sidebar .reviso-dropdown > span { display: inline-flex; align-items: center; }

/* Chronological sort toggle (Oldest / Newest) — sibling of the device pill. */
#reviso-sidebar .reviso-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--rv-border);
  background: var(--rv-surface);
  color: var(--rv-text-sub);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: all .12s;
  font-family: var(--rv-font-stack);
}
#reviso-sidebar .reviso-sort-toggle:hover {
  border-color: var(--rv-border-hi);
  background: var(--rv-surface-hi);
  color: var(--rv-text);
}
#reviso-sidebar .reviso-sort-toggle svg { flex: 0 0 auto; opacity: .85; }
#reviso-sidebar .reviso-dropdown-chev svg { width: 11px; height: 11px; }
#reviso-sidebar [data-rv-select] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  font: inherit;
}
#reviso-sidebar .reviso-review-bar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: none;
  background: transparent;
}
#reviso-sidebar .reviso-review-bar:empty { display: none; }
#reviso-sidebar .reviso-review-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 5px 22px 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--rv-border);
  background: var(--rv-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238b8fb8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 7px center;
  color: var(--rv-text-sub);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--rv-font-stack);
  cursor: pointer;
}#reviso-sidebar .reviso-tools-row .reviso-device-drop { display: inline-flex; }

/* AI bar */
/* ── Comment list ─────────────────────────────────────────────────────── */
#reviso-sidebar .reviso-sidebar-body,
#reviso-sidebar .reviso-comment-list {
  padding: 14px 18px;
  position: relative; /* offsetParent for the card exit animation — see above */
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
}
#reviso-sidebar .reviso-sidebar-body { padding: 0; }
#reviso-sidebar .reviso-sidebar-body > .reviso-comment-list { padding: 14px 18px; }
#reviso-sidebar .reviso-comment-list::-webkit-scrollbar { width: 5px; }
#reviso-sidebar .reviso-comment-list::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.25); border-radius: 99px; }
#reviso-sidebar .reviso-empty {
  padding: 32px 18px;
  text-align: center;
  color: var(--rv-text-muted);
  font-size: 13px;
}

/* ── Comment card ─────────────────────────────────────────────────────── */
#reviso-sidebar .reviso-comment {
  background: var(--rv-modal);
  border: 1px solid var(--rv-border);
  border-left: 3px solid var(--rv-teal);
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow-card);
  padding: 0;
  overflow: visible;
  cursor: default;
  transition: box-shadow .2s, border-left-color .25s ease, opacity .25s ease;
}
#reviso-sidebar .reviso-comment:hover { box-shadow: var(--rv-shadow-card-h); background: var(--rv-modal); }
#reviso-sidebar .reviso-comment.is-resolved { border-left-color: var(--rv-border-hi); opacity: 1; }
#reviso-sidebar .reviso-comment.is-resolved .reviso-comment-body { opacity: 0.7; }
#reviso-sidebar .reviso-comment .reviso-comment-body { transition: opacity .25s ease; }
#reviso-sidebar .reviso-comment.is-in-progress { border-left-color: var(--rv-status-progress); }
#reviso-sidebar .reviso-comment--clickable { cursor: pointer; }

/* Card header */
#reviso-sidebar .reviso-comment-head {
  padding: 13px 14px 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
#reviso-sidebar .reviso-avatar {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  letter-spacing: -0.02em;
}
#reviso-sidebar .reviso-comment-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}
#reviso-sidebar .reviso-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--rv-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#reviso-sidebar .reviso-time {
  font-size: 11px;
  line-height: 1.25;
  color: var(--rv-text-muted);
  white-space: nowrap;
}

/* The head row top-aligns (avatar vs two-line meta), but the right-side
   controls (actions, assign pick, number pill) read better centred against
   the 30px control row. */
#reviso-sidebar .reviso-comment-head .reviso-comment-actions,
#reviso-sidebar .reviso-comment-head .reviso-comment-review-pick,
#reviso-sidebar .reviso-comment-head .reviso-num-pill {
  align-self: center;
}

/* Hover-revealed action group (resolve + trash) */
#reviso-sidebar .reviso-comment-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
#reviso-sidebar .reviso-comment:hover .reviso-comment-actions {
  opacity: 1;
  pointer-events: auto;
}
#reviso-sidebar .reviso-comment-actions button {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--rv-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .12s, color .12s;
}
#reviso-sidebar .reviso-comment-actions button svg { width: 16px; height: 16px; }
#reviso-sidebar .reviso-resolve-btn:hover {
  background: var(--rv-teal-bg);
  color: var(--rv-teal);
}
#reviso-sidebar .reviso-delete-btn:hover {
  background: var(--rv-danger-bg);
  color: var(--rv-danger);
  border: none;
}
/* Layer 2 visibility — "keep internal" toggle + subtle badge */
#reviso-sidebar .reviso-internal-btn:hover {
  background: var(--rv-hover-bg, rgba(148, 163, 184, .16));
  color: var(--rv-text, inherit);
}
#reviso-sidebar .reviso-internal-btn.is-internal {
  opacity: 1;
  color: var(--rv-text, inherit);
}
.reviso-internal-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--rv-text-muted, #94a3b8);
  background: var(--rv-chip-bg, rgba(148, 163, 184, .16));
  border-radius: 5px;
  vertical-align: middle;
}
/* The visibility badge (Logged-in only / Private) sits on the timestamp line.
   On a narrow card that line is wider than the meta column, so a nowrap time
   row spilled the badge rightward UNDER the hover-revealed action icons. Let
   the row wrap the badge below the timestamp instead — it stays inside the
   meta column and never collides with the actions. Scoped to the card head so
   reply timestamps are untouched. */
#reviso-sidebar .reviso-comment-head .reviso-time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
  white-space: normal;
}
#reviso-sidebar .reviso-comment-head .reviso-time-text { white-space: nowrap; }
#reviso-sidebar .reviso-comment-head .reviso-internal-badge { margin-left: 0; }
#reviso-sidebar .reviso-delete-btn.is-armed {
  background: var(--rv-danger);
  color: #fff;
  opacity: 1;
  pointer-events: auto;
  animation: reviso-arm-pulse 1s ease-in-out infinite;
}
/* Busy state while the delete AJAX is in flight — keep the button visible
   (not hover-gated) so the spinner is actually seen. */
#reviso-sidebar .reviso-delete-btn.is-busy {
  opacity: 1;
  pointer-events: none;
}
#reviso-sidebar .reviso-comment .reviso-comment-actions:has(.is-busy) {
  opacity: 1;
  pointer-events: auto;
}

/* Generic inline spinner for async buttons (delete, future uses). Inherits
   currentColor so it adapts to the button's own state colours. */
.reviso-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: reviso-spin .7s linear infinite;
}
@keyframes reviso-spin { to { transform: rotate(360deg); } }
#reviso-sidebar .reviso-edit-btn:hover {
  background: var(--rv-accent);
  color: var(--rv-accent-text);
}

/* Inline comment editor (own comments) */
#reviso-sidebar .reviso-edit-form { margin: 6px 0 2px; padding: 0 14px; }
#reviso-sidebar .reviso-edit-text {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 60px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rv-text);
  background: var(--rv-surface-hi);
  border: 1px solid var(--rv-border-hi);
  border-radius: 7px;
}
#reviso-sidebar .reviso-edit-text:focus { outline: none; border-color: var(--rv-accent); }
#reviso-sidebar .reviso-edit-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }

/* Comment-number badge (header right) — mirrors the canvas pin: same circle,
   same brand colour, same white bold digit, so reviewers can match a pin
   to its card at a glance. Uses --rv-pin-accent (set in JS from the brand
   accent) rather than --rv-accent because Bricks overrides --rv-accent to
   its own primary in the builder — that would diverge from the blue pin. */
#reviso-sidebar .reviso-num-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  /* The comment-number badge is a fixed "pin" indicator, NOT the brand accent,
     so its text must contrast with ITS OWN background. Pairing the accent bg
     with --rv-accent-text broke on light/yellow brands (accent-text resolves
     dark, but the pin stayed blue → dark-on-blue). Default blue + white; a
     brand can override both via --rv-pin-accent / --rv-pin-accent-text. */
  background: var(--rv-pin-accent, #2563eb);
  color: var(--rv-pin-accent-text, #fff);
  font: 700 12px/1 -apple-system, system-ui, sans-serif;
  border: 0;
  padding: 0;
  white-space: nowrap;
}
/* Status badges have fixed green/orange backgrounds that always pair with white. */
#reviso-sidebar .reviso-num-pill.is-resolved { background: var(--rv-status-done); opacity: .55; color: #fff; }
#reviso-sidebar .reviso-num-pill.is-progress { background: var(--rv-status-progress); color: #fff; }

/* "Assign to Review" mini pill — shown next to the number badge only when
   the comment isn't attached to any Review. Click opens the same popover
   the global Reviews dropdown uses. Editors only. */
#reviso-sidebar .reviso-comment-review-pick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  margin-right: 4px;
  border: 1px dashed var(--rv-border-hi);
  border-radius: 99px;
  background: transparent;
  color: var(--rv-text-sub);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--rv-font-stack);
  transition: color .12s, border-color .12s, background .12s;
  flex-shrink: 0;
}
#reviso-sidebar .reviso-comment-review-pick:hover {
  color: var(--rv-text);
  border-color: var(--rv-accent);
  background: var(--rv-surface-hi);
}
#reviso-sidebar .reviso-comment-review-pick svg {
  width: 11px;
  height: 11px;
}

/* Body */
#reviso-sidebar .reviso-comment-body {
  padding: 9px 14px 11px;
  font-size: 14px;
  color: var(--rv-text);
  line-height: 1.6;
  opacity: 1;
  margin: 0;
  word-break: break-word;
}

/* Suggest mode — before/after card + accept/reject */
#reviso-sidebar .reviso-suggestion { margin: 10px 14px 10px; padding: 10px 12px; border: 1px solid var(--rv-border); border-radius: 10px; background: var(--rv-surface-hi); }
#reviso-sidebar .reviso-sg-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rv-accent); margin-bottom: 7px; }
#reviso-sidebar .reviso-sg-row { display: flex; gap: 8px; font-size: 13px; line-height: 1.45; padding: 3px 0; }
#reviso-sidebar .reviso-sg-label { flex: 0 0 46px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--rv-text-muted); padding-top: 2px; }
#reviso-sidebar .reviso-sg-text { flex: 1; word-break: break-word; color: var(--rv-text); }
#reviso-sidebar .reviso-sg-before .reviso-sg-text { color: var(--rv-text-muted); text-decoration: line-through; text-decoration-color: rgba(148,163,184,.5); }
#reviso-sidebar .reviso-sg-after .reviso-sg-text { font-weight: 600; }
#reviso-sidebar .reviso-sg-err { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--rv-danger, #ef4444); }
#reviso-sidebar .reviso-sg-state { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--rv-accent); background: color-mix(in srgb, var(--rv-accent) 14%, transparent); padding: 3px 9px; border-radius: 99px; }
#reviso-sidebar .reviso-sg-actions { display: inline-flex; gap: 6px; margin-left: 2px; }
#reviso-sidebar .reviso-sg-btn { border: 1px solid var(--rv-border); background: var(--rv-surface); color: var(--rv-text); border-radius: 7px; padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--rv-font-stack); }
#reviso-sidebar .reviso-sg-btn:disabled { opacity: .6; cursor: default; }
#reviso-sidebar .reviso-sg-reject:hover { border-color: var(--rv-danger, #ef4444); color: var(--rv-danger, #ef4444); }
#reviso-sidebar .reviso-sg-accept { background: var(--rv-accent); border-color: var(--rv-accent); color: var(--rv-accent-text, #fff); }
#reviso-sidebar .reviso-sg-accept:hover { filter: brightness(1.08); }
/* Success confirmation shown briefly after Accept & apply, before the card
   resolves away. Full opacity (overriding the disabled fade) so it reads clearly. */
#reviso-sidebar .reviso-sg-btn.reviso-sg-applied,
#reviso-sidebar .reviso-sg-btn.reviso-sg-applied:disabled { background: var(--rv-success); border-color: var(--rv-success); color: #fff; opacity: 1; filter: none; }
/* Suggest bar: the "apply my suggestions instantly" toggle, shown only in Suggest mode. */
/* Transient failure toast (revisoToast) */
#reviso-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(8px); z-index: 2147483647; max-width: 92vw; padding: 10px 16px; border-radius: 10px; font-family: var(--rv-font-stack); font-size: 13px; line-height: 1.4; color: #fff; background: #2a2a33; box-shadow: 0 6px 22px rgba(0,0,0,0.32); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
#reviso-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Global "working…" indicator — a slim top bar shown while a mutating server
   action is in flight (150ms threshold, so instant actions don't flash it). */
#reviso-busy { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 2147483646; opacity: 0; pointer-events: none; transition: opacity .15s ease; overflow: hidden; }
#reviso-busy.is-on { opacity: 1; }
#reviso-busy.is-on::before { content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: var(--rv-accent, #2563eb); border-radius: 0 3px 3px 0; animation: reviso-busy-slide 1.05s ease-in-out infinite; }
@keyframes reviso-busy-slide { 0% { left: -40%; } 100% { left: 100%; } }
#reviso-sidebar .reviso-suggest-bar { display: flex; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--rv-border); background: var(--rv-surface-hi); }
#reviso-sidebar .reviso-suggest-bar[hidden] { display: none; }
#reviso-sidebar .reviso-switch { display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--rv-font-stack); color: var(--rv-text); font-size: 12.5px; font-weight: 600; }
#reviso-sidebar .reviso-switch-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--rv-border); transition: background .15s; flex-shrink: 0; }
#reviso-sidebar .reviso-switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
#reviso-sidebar .reviso-switch.is-on .reviso-switch-track { background: var(--rv-accent); }
#reviso-sidebar .reviso-switch.is-on .reviso-switch-knob { transform: translateX(14px); }

/* Screenshot button — clicking opens the lightbox directly. The inline
   thumbnail was distracting; the screenshot now only exists at full-size,
   on demand, which keeps the card compact. */
#reviso-sidebar .reviso-shot-wrap {
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
#reviso-sidebar .reviso-shot-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 99px;
  border: 1px solid var(--rv-border);
  background: var(--rv-surface);
  color: var(--rv-text-sub);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--rv-font-stack);
  transition: color .12s, border-color .12s, background .12s;
}
#reviso-sidebar .reviso-shot-btn:hover {
  border-color: var(--rv-border-hi);
  background: var(--rv-surface-hi);
  color: var(--rv-text);
}
#reviso-sidebar .reviso-shot-btn svg { width: 12px; height: 12px; }
#reviso-sidebar .reviso-shot {
  display: inline-block;
  width: 138px;
  height: 88px;
  border-radius: 7px;
  border: 1px solid var(--rv-border);
  background: var(--rv-surface);
  overflow: hidden;
  cursor: pointer;
  margin: 0;
}
#reviso-sidebar .reviso-shot:hover { border-color: var(--rv-border-hi); transform: none; }
#reviso-sidebar .reviso-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Emoji reactions — one-tap ack chips above the foot. Quiet ghost buttons;
   chips with a count get a subtle fill, the requester's own reactions get
   the accent ring. Static variant (read-only reviews) drops the hover. */
#reviso-sidebar .reviso-reactions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 14px 8px;
}
#reviso-sidebar .reviso-react {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--rv-font-stack);
  font-size: 12px;
  line-height: 1.4;
  color: var(--rv-text-sub);
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
/* Emoji delivered via CSS content so WordPress's twemoji replacement (which
   rewrites emoji TEXT nodes into <img class="emoji"> tags) can't touch them —
   this guarantees native system emoji on every platform. */
#reviso-sidebar .reviso-react-emoji::before {
  font-size: 15px;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
#reviso-sidebar .reviso-react-emoji[data-e="thumbs_up"]::before { content: "\1F44D"; }
#reviso-sidebar .reviso-react-emoji[data-e="heart"]::before     { content: "\2764\FE0F"; }
#reviso-sidebar .reviso-react-emoji[data-e="check"]::before     { content: "\2705"; }
#reviso-sidebar .reviso-react-emoji[data-e="eyes"]::before      { content: "\1F440"; }
#reviso-sidebar .reviso-react:hover { background: var(--rv-surface-hi); transform: scale(1.06); }
#reviso-sidebar .reviso-react.has-count {
  background: var(--rv-surface);
  border-color: var(--rv-border-hi, rgba(255,255,255,.12));
}
#reviso-sidebar .reviso-react.is-mine {
  border-color: var(--rv-accent);
  color: var(--rv-text);
}
#reviso-sidebar .reviso-react.is-static { cursor: default; }
#reviso-sidebar .reviso-react.is-static:hover { background: var(--rv-surface); transform: none; }
#reviso-sidebar .reviso-react-count { font-weight: 600; }
/* Declutter: zero-count chips are a PICKER, not information — fade them out
   until the card is hovered. Chips with reactions stay visible. Touch
   devices (no hover) keep everything visible. Same treatment for the
   "Unassigned" pill: an action, not information. */
@media (hover: hover) {
  /* Zero-count chips collapse their width too, so the chips that DO have
     reactions slide left and sit flush instead of floating mid-row. */
  #reviso-sidebar .reviso-react:not(.has-count) {
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-right: -2px; /* swallow the flex gap while collapsed */
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: max-width .18s ease, padding .18s ease, margin .18s ease, opacity .15s;
  }
  #reviso-sidebar .reviso-comment:hover .reviso-react:not(.has-count),
  #reviso-sidebar .reviso-reactions:focus-within .reviso-react:not(.has-count) {
    max-width: 72px;
    padding-left: 7px;
    padding-right: 7px;
    margin-right: 0;
    opacity: 1;
    pointer-events: auto;
  }
  #reviso-sidebar .reviso-pill--assign.is-unassigned {
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
  }
  #reviso-sidebar .reviso-comment:hover .reviso-pill--assign.is-unassigned {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Reply peek — collapsed-thread preview shown above the foot. Looks like a
   quiet, clickable quote of the most recent reply. Whole row is the button.
   The left accent stripe is tinted with the replying user's colour so the
   reply visually ties to the author; the body radius matches the card's
   own corner radius so it looks like a real chip, not a flag. */
#reviso-sidebar .reviso-reply-peek {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 28px);
  margin: 0 14px 8px;
  padding: 7px 10px;
  border: 0;
  border-left: 3px solid var(--rv-reply-user, var(--rv-accent));
  background: var(--rv-surface);
  border-radius: var(--rv-radius);
  cursor: pointer;
  font-family: var(--rv-font-stack);
  font-size: 12px;
  color: var(--rv-text-sub);
  text-align: left;
  transition: background .12s, border-color .12s;
}
#reviso-sidebar .reviso-reply-peek:hover {
  background: var(--rv-surface-hi);
}
#reviso-sidebar .reviso-reply-peek .reviso-avatar--sm {
  flex-shrink: 0;
}
#reviso-sidebar .reviso-reply-peek-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#reviso-sidebar .reviso-reply-peek-text strong {
  font-weight: 600;
  color: var(--rv-text);
}
#reviso-sidebar .reviso-reply-peek-body { color: var(--rv-text); margin-left: 4px; }
#reviso-sidebar .reviso-reply-peek-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--rv-text-muted);
}
#reviso-sidebar .reviso-reply-peek-more {
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--rv-reply-user, var(--rv-accent));
  color: #fff;
  font-weight: 600;
}
#reviso-sidebar .reviso-comment-pad { padding: 0 14px 8px; }
/* Triage sits ABOVE the header. Provide the card's top padding here so the
   head can drop its own padding-top, and zero out the pill's intrinsic
   margin-bottom so the gap to the author row is controlled by this block. */
#reviso-sidebar .reviso-comment-pad--top { padding: 13px 14px 10px; }
#reviso-sidebar .reviso-comment-pad--top .reviso-triage { margin-bottom: 0; }
#reviso-sidebar .reviso-comment-pad--top + .reviso-comment-head { padding-top: 0; }

/* Top tag row: triage (left) + "Element removed" (right). With one child it
   left-aligns (so a lone "Element removed" sits on the left); with both, the
   orphaned tag pushes to the right, in-line with the triage tag. */
#reviso-sidebar .reviso-comment-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 14px 10px;
}
#reviso-sidebar .reviso-comment-toprow .reviso-triage { margin-bottom: 0; }
#reviso-sidebar .reviso-comment-toprow + .reviso-comment-head { padding-top: 0; }

/* Footer */
#reviso-sidebar .reviso-comment-foot {
  padding: 8px 14px 10px;
  border-top: 1px solid var(--rv-border);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 0;
  background: transparent;
}
#reviso-sidebar .reviso-comment-foot-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Pill controls (status + assignee) — wraps a native <select> for behaviour. */
#reviso-sidebar .reviso-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 99px;
  border: 1px solid var(--rv-border);
  background: var(--rv-surface);
  color: var(--rv-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all .12s;
  font-family: var(--rv-font-stack);
}
#reviso-sidebar .reviso-pill:hover {
  border-color: var(--rv-border-hi);
  background: var(--rv-surface-hi);
}
#reviso-sidebar .reviso-pill.is-static { cursor: default; }
/* Read-only assignee badge on the client review panel — informational, not a
   control, so it neither shows a pointer nor highlights on hover. */
#reviso-sidebar .reviso-pill.is-readonly { cursor: default; }
#reviso-sidebar .reviso-pill.is-readonly:hover {
  border-color: var(--rv-border);
  background: var(--rv-surface);
}
#reviso-sidebar .reviso-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
#reviso-sidebar .reviso-pill-label {
  white-space: nowrap;
  color: var(--rv-text);
}
#reviso-sidebar .reviso-pill-chev svg { width: 11px; height: 11px; color: var(--rv-text-muted); }
#reviso-sidebar .reviso-pill-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#reviso-sidebar .reviso-pill-glyph svg { width: 12px; height: 12px; color: var(--rv-text-muted); }

/* Thread-count + Reply footer buttons. Cards with replies emphasise the
   count so a long thread doesn't slip past the reviewer. */
#reviso-sidebar .reviso-thread-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 99px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--rv-accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--rv-font-stack);
  transition: color .12s, background .12s, border-color .12s;
}
#reviso-sidebar .reviso-comment.has-replies .reviso-thread-toggle {
  background: var(--rv-surface);
  border-color: var(--rv-border);
}
#reviso-sidebar .reviso-thread-toggle svg { width: 13px; height: 13px; }
#reviso-sidebar .reviso-thread-toggle:hover {
  background: var(--rv-surface-hi);
  border-color: var(--rv-border-hi);
}
#reviso-sidebar .reviso-thread-toggle.is-active {
  color: var(--rv-accent);
  background: var(--rv-surface-hi);
  border-color: var(--rv-border-hi);
}
#reviso-sidebar .reviso-reply-open {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--rv-border);
  background: var(--rv-surface);
  color: var(--rv-text-sub);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--rv-font-stack);
  transition: all .12s;
}
#reviso-sidebar .reviso-reply-open:hover {
  background: var(--rv-surface-hi);
  color: var(--rv-text);
  border-color: var(--rv-border-hi);
}
#reviso-sidebar .reviso-reply-open.is-active {
  background: var(--rv-accent-bg);
  border-color: var(--rv-accent);
  color: var(--rv-accent);
}
/* Thread count rides inside the Reply button (replaces the old separate
   "X replies" pill) */
#reviso-sidebar .reviso-reply-count {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--rv-accent-bg);
  color: var(--rv-accent);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}
#reviso-sidebar .reviso-reply-open.is-active .reviso-reply-count {
  background: var(--rv-accent);
  /* Contrast-aware ink (black on a light/yellow accent, white on a dark one)
     instead of hardcoded white, which was unreadable on Bricks' yellow accent. */
  color: var(--rv-accent-text);
}

/* ── Inline thread panel (per-card expand) ──────────────────────────────── */
#reviso-sidebar .reviso-thread-panel {
  border-top: 1px solid var(--rv-border);
  background: var(--rv-surface);
  border-radius: 0 0 calc(var(--rv-radius) - 1px) calc(var(--rv-radius) - 1px);
  padding: 12px 14px;
}
#reviso-sidebar .reviso-replies {
  margin: 0 0 10px 0;
  border-left: none;
  padding-left: 0;
}
#reviso-sidebar .reviso-reply {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
#reviso-sidebar .reviso-reply:last-of-type { margin-bottom: 12px; }
#reviso-sidebar .reviso-reply .reviso-avatar--sm,
#reviso-sidebar .reviso-reply .reviso-avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
  flex-shrink: 0;
}
#reviso-sidebar .reviso-reply strong {
  display: inline;
  color: var(--rv-text);
  font-size: 12px;
  font-weight: 600;
  margin-right: 6px;
}
#reviso-sidebar .reviso-reply .reviso-time {
  display: inline;
  color: var(--rv-text-muted);
  font-size: 11px;
}
#reviso-sidebar .reviso-reply p {
  font-size: 13px;
  color: var(--rv-text);
  line-height: 1.55;
  opacity: 1;
  margin: 2px 0 0;
  word-break: break-word;
}

/* Inline reply textarea (always-visible in expanded thread) */
#reviso-sidebar .reviso-thread-panel .reviso-inline-reply {
  margin: 0;
  padding: 0;
}
#reviso-sidebar .reviso-thread-panel .reviso-inline-reply-text {
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1.5px solid var(--rv-border-hi);
  background: var(--rv-modal);
  color: var(--rv-text);
  font-size: 13px;
  font-family: var(--rv-font-stack);
  resize: none;
  outline: none;
  box-shadow: none;
  transition: box-shadow .15s, border-color .15s;
}
#reviso-sidebar .reviso-thread-panel .reviso-inline-reply-text:focus {
  border-color: var(--rv-accent);
  box-shadow: 0 0 0 3px var(--rv-accent-bg);
}
#reviso-sidebar .reviso-thread-panel .reviso-inline-reply-text::placeholder { color: var(--rv-text-muted); }
#reviso-sidebar .reviso-thread-panel .reviso-inline-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}
#reviso-sidebar .reviso-btn {
  font-family: var(--rv-font-stack);
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background .12s, opacity .12s;
  border: 1px solid var(--rv-border);
  background: transparent;
  color: var(--rv-text);
}
#reviso-sidebar .reviso-btn-ghost {
  background: transparent;
  color: var(--rv-text-sub);
  border: 1px solid var(--rv-border);
}
#reviso-sidebar .reviso-btn-ghost:not(.is-disabled):not(:disabled):hover { background: var(--rv-surface-hi); color: var(--rv-text); }
/* Soft-disabled (aria-disabled) + native :disabled — no hover affordance,
   reduced opacity, not-allowed cursor. Used by the "Mark page as approved"
   button while open comments still exist. */
#reviso-sidebar .reviso-btn-ghost.is-disabled,
#reviso-sidebar .reviso-btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#reviso-sidebar .reviso-btn-primary {
  background: var(--rv-accent);
  color: var(--rv-accent-text);
  border-color: var(--rv-accent);
}
#reviso-sidebar .reviso-btn-primary:hover { opacity: 0.92; }
#reviso-sidebar .reviso-btn-primary:disabled { opacity: 0.45; cursor: default; }
#reviso-sidebar .reviso-btn-full { width: 100%; }

/* Hide legacy elements that the design replaces */
#reviso-sidebar .reviso-controls { display: none; }
#reviso-sidebar .reviso-thread-count { display: none; }
#reviso-sidebar .reviso-viewport-bar { display: none; }
/* Old .reviso-pin-num bubble is replaced by .reviso-num-pill — hide if it appears */
#reviso-sidebar .reviso-comment-head .reviso-pin-num { display: none; }

/* Identity gate (front-end) — match design tokens */
#reviso-sidebar .reviso-identity {
  padding: 18px;
}
#reviso-sidebar .reviso-identity-intro {
  font-size: 13px;
  color: var(--rv-text-sub);
  margin-bottom: 12px;
}
#reviso-sidebar .reviso-identity-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rv-text-muted);
  margin: 10px 0 4px;
}
#reviso-sidebar .reviso-identity-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
  margin-left: 4px;
}
#reviso-sidebar .reviso-identity-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid var(--rv-border);
  background: var(--rv-surface);
  color: var(--rv-text);
  font-size: 13px;
  line-height: 1.5;
  font-family: var(--rv-font-stack);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
#reviso-sidebar .reviso-identity-input:focus {
  border-color: var(--rv-accent);
  box-shadow: 0 0 0 3px var(--rv-accent-bg);
}
#reviso-sidebar .reviso-identity-error {
  font-size: 12px;
  color: var(--rv-danger);
  min-height: 16px;
  margin: 8px 0 0;
}
#reviso-sidebar .reviso-identity-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* Footer (FE approval area) */
#reviso-sidebar .reviso-sidebar-footer {
  padding: 12px 18px 14px;
  border-top: 1px solid var(--rv-border);
  background: transparent;
}

/* The "Powered by Reviso" credit was removed from the comment modal (it
   crowded the panel the reviewer works in). It now lives only on the review
   dashboard — see `.rv-credit` in the Pro landing template. */

/* ── Unread ────────────────────────────────────────────────────────────────
   Per-viewer, deliberately NOT a status colour: it uses the accent so it reads
   as "new to you" rather than competing with open/in-progress/resolved. Quiet
   enough to scan past, obvious enough to find. */
.reviso-unread-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rv-status-active, #2563eb);
  margin-right: 2px;
  align-self: center;
}
#reviso-sidebar .reviso-comment.is-unread .reviso-comment-author,
.reviso-comment.is-unread .reviso-comment-author { font-weight: 700; }
/* No accent edge for unread. The card already carries a status border-left, so
   an inset shadow on the same side reads as a doubled border. The dot beside
   the author, plus the bold name, are enough to find an unread card. */
#reviso-sidebar .reviso-sidebar-footer:empty { display: none; }
#reviso-sidebar .reviso-identity-strip {
  font-size: 12px;
  color: var(--rv-text-muted);
  margin-bottom: 8px;
}
#reviso-sidebar .reviso-identity-strip strong { color: var(--rv-text); }
#reviso-sidebar .reviso-link-btn {
  background: none;
  border: none;
  color: var(--rv-accent);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  margin-left: 4px;
  text-decoration: underline;
}
#reviso-sidebar .reviso-approved-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  background: var(--rv-teal-bg);
  color: var(--rv-teal);
  border: 1px solid var(--rv-teal);
  font-size: 13px;
  font-weight: 600;
}
#reviso-sidebar .reviso-approve-confirm {
  border: 1px solid var(--rv-border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--rv-surface);
}
#reviso-sidebar .reviso-approve-auth {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--rv-text);
  cursor: pointer;
  line-height: 1.4;
}
#reviso-sidebar .reviso-approve-note {
  margin: 8px 0 10px;
  font-size: 11px;
  color: var(--rv-text-muted);
  line-height: 1.4;
}
#reviso-sidebar .reviso-approve-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Comment form popover (drop on canvas-click) ───────────────────────── */
#reviso-comment-form {
  font-family: var(--rv-font-stack);
  background: var(--rv-modal);
  border: 1px solid var(--rv-border);
  border-radius: var(--rv-radius);
  box-shadow: var(--rv-shadow-pop);
  color: var(--rv-text);
}
#reviso-comment-form .reviso-form-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rv-border);
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
}
#reviso-comment-form .reviso-form-header span { flex: 1; color: var(--rv-text); }
#reviso-comment-form .reviso-form-close {
  background: transparent;
  border: none;
  color: var(--rv-text-muted);
  font-size: 16px;
  cursor: pointer;
}
#reviso-comment-form .reviso-form-textarea {
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--rv-text);
  font-size: 13px;
  font-family: var(--rv-font-stack);
  resize: vertical;
  min-height: 80px;
}
#reviso-comment-form .reviso-form-textarea::placeholder { color: var(--rv-text-muted); }
#reviso-comment-form .reviso-form-error { color: var(--rv-danger); padding: 0 12px; font-size: 12px; line-height: 1.4; }
/* Only space it when a message is actually present, so an empty error node
   never leaves a permanent gap above the attach row. */
#reviso-comment-form .reviso-form-error:not(:empty) { padding-top: 2px; padding-bottom: 10px; }
#reviso-comment-form .reviso-form-shot { padding: 0 12px; font-size: 11px; color: var(--rv-text-muted); }
#reviso-comment-form .reviso-form-shot--fail { color: var(--rv-danger); }
#reviso-comment-form .reviso-form-attach,
#reviso-comment-form .reviso-form-actions {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--rv-border);
}
#reviso-comment-form .reviso-attach-btn,
#reviso-comment-form .reviso-annot-btn {
  background: transparent;
  border: 1px solid var(--rv-border);
  color: var(--rv-text-sub);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--rv-font-stack);
}
#reviso-comment-form .reviso-attach-btn:hover,
#reviso-comment-form .reviso-annot-btn:hover { background: var(--rv-surface-hi); color: var(--rv-text); }

/* Lightbox + summary modal scenes */
#reviso-lightbox,
#reviso-summary,
#reviso-annotator { font-family: var(--rv-font-stack); }
#reviso-summary .reviso-summary-inner {
  background: var(--rv-modal);
  color: var(--rv-text);
  border: 1px solid var(--rv-border);
  border-radius: var(--rv-radius-lg);
  box-shadow: var(--rv-shadow-modal);
}
#reviso-summary .reviso-summary-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rv-border);
  display: flex;
  align-items: center;
  font-weight: 600;
}
#reviso-summary .reviso-summary-head span { flex: 1; }
#reviso-summary .reviso-summary-close {
  background: transparent;
  border: none;
  color: var(--rv-text-muted);
  cursor: pointer;
}

/* ── Card left edge: per-user colour (avatar carries the same hue) ───────── */
#reviso-sidebar .reviso-comment {
  border-left-color: var(--rv-user, var(--rv-teal));
}
#reviso-sidebar .reviso-comment.is-resolved {
  border-left-color: var(--rv-user, var(--rv-teal));
  /* opacity on body content already conveys resolved state visually */
}
#reviso-sidebar .reviso-comment.is-in-progress {
  border-left-color: var(--rv-user, var(--rv-status-progress));
}

/* ── Custom popover (status / assignee / device / round) ────────────────── */
.reviso-popover {
  font-family: var(--rv-font-stack);
  background: var(--rv-modal);
  color: var(--rv-text);
  border: 1px solid var(--rv-border);
  border-radius: 10px;
  box-shadow: var(--rv-shadow-pop);
  overflow: hidden;
  min-width: 164px;
  padding: 4px 0;
}
/* Action rows in popovers (e.g. "+ New Review") — visually a command,
   not a filter option. */
.reviso-popover-item--action {
  color: var(--rv-accent) !important;
  font-weight: 600;
  border-top: 1px solid var(--rv-border);
}
.reviso-popover-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: var(--rv-text);
  text-align: left;
  font-family: var(--rv-font-stack);
  transition: background .1s;
}
.reviso-popover-item:hover { background: var(--rv-surface-hi); }
.reviso-popover-item.is-active {
  background: var(--rv-accent-bg);
  color: var(--rv-accent);
  font-weight: 500;
}
.reviso-popover-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.reviso-popover-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.reviso-popover-glyph { display: inline-flex; }
.reviso-popover-glyph svg { width: 14px; height: 14px; color: var(--rv-text-muted); }
.reviso-popover-label { flex: 1; min-width: 0; }
.reviso-popover-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--rv-text-muted);
  padding: 2px 6px;
  border-radius: 99px;
  background: var(--rv-surface);
  min-width: 18px;
  text-align: center;
}
.reviso-popover-item.is-active .reviso-popover-count {
  background: var(--rv-accent);
  color: var(--rv-accent-text, #fff);
}
.reviso-popover-check {
  color: var(--rv-accent);
  font-size: 13px;
  font-weight: 700;
  margin-left: auto;
}

/* Pill triggers: ensure they look like the design buttons (not <label>s) */
#reviso-sidebar button.reviso-pill,
#reviso-sidebar button.reviso-dropdown {
  font: inherit;
  outline: none;
}
/* ── Inline reply: attach button + file pills ──────────────────────────── */
#reviso-sidebar .reviso-inline-reply-files:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 0;
}
#reviso-sidebar .reviso-inline-reply-attach {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--rv-border);
  background: var(--rv-modal);
  color: var(--rv-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all .12s;
}
#reviso-sidebar .reviso-inline-reply-attach svg { width: 13px; height: 13px; }
#reviso-sidebar .reviso-inline-reply-attach:hover {
  background: var(--rv-surface-hi);
  color: var(--rv-text);
  border-color: var(--rv-border-hi);
}
#reviso-sidebar .reviso-inline-reply-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 6px;
}
#reviso-sidebar .reviso-inline-reply-actions .reviso-inline-reply-attach { margin-right: auto; }
.reviso-file-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 99px;
  background: var(--rv-modal);
  border: 1px solid var(--rv-border);
  color: var(--rv-text);
  font-size: 11px;
  font-family: var(--rv-font-stack);
}
.reviso-file-pill .reviso-file-remove {
  background: transparent;
  border: none;
  color: var(--rv-text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 2px;
}
.reviso-file-pill .reviso-file-remove:hover { color: var(--rv-danger); }

/* Sidebar typography baseline — anchors children so the FE host page's
   own font-size scale doesn't inflate the device dropdown label etc. */
#reviso-sidebar { font-size: 13px; line-height: 1.5; }
#reviso-sidebar .reviso-dropdown,
#reviso-sidebar .reviso-dropdown-label,
#reviso-sidebar .reviso-pill,
#reviso-sidebar .reviso-pill-label { font-size: 12px; }

/* Tools row = [device filter] [review switcher] [Resolved toggle]. When a long
   Review name makes the row overflow, ONLY the review switcher must give way and
   ellipsize — the device filter and Resolved toggle keep their size. The review
   container (.reviso-review-bar) shipped flex-shrink:0, which forced the device
   pill ("All devices") to squish instead; override that so the bar (and the name
   inside it) is the one that shrinks. */
#reviso-sidebar .reviso-tools-row { min-width: 0; }
#reviso-sidebar .reviso-tools-row > .reviso-device-drop,
#reviso-sidebar .reviso-tools-row > .reviso-resolved-toggle { flex: 0 0 auto; }
#reviso-sidebar .reviso-review-bar { flex: 0 1 auto; min-width: 0; overflow: hidden; }
#reviso-sidebar .reviso-review-drop,
#reviso-sidebar .reviso-review-label { min-width: 0; max-width: 100%; }
#reviso-sidebar .reviso-review-drop .reviso-dropdown-label,
#reviso-sidebar .reviso-review-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Inside the dropdown button the label absorbs the squeeze; the chevron stays. */
#reviso-sidebar .reviso-review-drop .reviso-dropdown-label { flex: 1 1 auto; }
#reviso-sidebar .reviso-review-drop .reviso-dropdown-chev  { flex: 0 0 auto; }

/* ── Builder approval banner (footer) ──────────────────────────────────── */
#reviso-sidebar .reviso-approval-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}
#reviso-sidebar .reviso-approval-banner-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--rv-teal-bg);
  border: 1px solid var(--rv-teal);
}
#reviso-sidebar .reviso-approval-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rv-teal);
  color: #fff;
  flex-shrink: 0;
}
#reviso-sidebar .reviso-approval-banner-icon svg { width: 12px; height: 12px; }
#reviso-sidebar .reviso-approval-banner-body { flex: 1; min-width: 0; }
#reviso-sidebar .reviso-approval-banner-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--rv-text);
}
#reviso-sidebar .reviso-approval-banner-meta {
  font-size: 11px;
  color: var(--rv-text-muted);
  margin-top: 2px;
  word-break: break-all;
}
#reviso-sidebar .reviso-approval-revert {
  align-self: flex-end;
  padding: 5px 12px;
  font-size: 12px;
}


/* ---------------------------------------------------------------------------
   Cursor-mode pill — floating bottom-centre Browse ⇄ Comment toggle.
   Shown while the comments panel is open. Themed via --rv-* so it adopts the
   host's palette (incl. Elementor's editor accent in light/dark).
--------------------------------------------------------------------------- */
#reviso-mode-pill {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(10px);
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--rv-panel-bg, #1f2124);
  border: 1px solid var(--rv-border, rgba(255,255,255,.12));
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.18);
  font-family: var(--rv-font-stack, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  z-index: 2147483500;
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
#reviso-mode-pill.is-visible {
  display: inline-flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#reviso-mode-pill .reviso-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--rv-text-muted, #9da5ae);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
#reviso-mode-pill .reviso-mode-btn:hover { color: var(--rv-text, #d5d8dc); }
#reviso-mode-pill .reviso-mode-btn svg { width: 16px; height: 16px; }
#reviso-mode-pill .reviso-mode-btn.is-active {
  background: var(--rv-accent, #2563eb);
  color: var(--rv-accent-text, #fff);
}
@media (max-width: 600px) {
  #reviso-mode-pill .reviso-mode-btn span { display: none; }
  #reviso-mode-pill .reviso-mode-btn { padding: 10px; }
}

/* ---------------------------------------------------------------------------
   Gutenberg top-bar "Comments" toggle — injected into the editor header next to
   Preview/Settings; opens the full floating panel. Styled to sit with the
   native header controls. Once present, the floating FAB is hidden.
--------------------------------------------------------------------------- */
#reviso-gb-toggle.reviso-gb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin: 0 4px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
#reviso-gb-toggle.reviso-gb-toggle:hover { background: rgba(127, 127, 127, .12); }
#reviso-gb-toggle.reviso-gb-toggle svg { width: 20px; height: 20px; }
#reviso-gb-toggle.reviso-gb-toggle.is-pressed {
  background: var(--wp-admin-theme-color, #2563eb);
  color: #fff;
}
body.reviso-gb-has-toolbar #reviso-fab { display: none !important; }

/* Visible reason under a disabled "Mark page as approved" (not hover-only). */
.reviso-approve-hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--rv-text-mut, #8a8a9a);
  text-align: center;
}


/* -------------------------------------------------------------------------
   Builder-only: match the editor's own accent.
   This used to live on :root, but this stylesheet also loads on the front end
   (directly, and inside the reviewer shadow root via cfg.cssUrls), so a theme
   that defines --builder-color-accent pushed its palette into Reviso's own UI —
   Reviso blue became the site's builder yellow on live pages. The builder now
   opts in via a class the engine adds when a host reports isBuilder.
   ------------------------------------------------------------------------- */
/* :root.… not a bare class: the theme blocks above are :root[data-rv-theme=…],
   which outranks a lone class, so a bare .reviso-in-builder silently lost and
   the builder went blue. Same specificity + later in the file wins. */
:root.reviso-in-builder {
  --rv-accent:      var(--builder-color-accent, #2563eb);
  --rv-accent-text: var(--builder-color-accent-inverse, #ffffff);
}