/* Nighty Design: the review part's own look (public/assets/js/designer/review/): comment pins, annotation cards and
   measurements over the canvas, the comment thread, the annotation editor, the Comments list, the minimap, and the
   color picker's contrast check. Everything over the canvas stays readable on dark and light pages: solid fills,
   a white ring or a dark halo, and a soft shadow. Shared primitives (dz-btn, dz-input, dz-seg, ...) are in
   designer.css. */

.designer {
  --dz-note: #8f9dff; /* annotation lines and marks */
  --dz-note-card: var(--dzt-surface-strong, rgba(20, 17, 28, 0.94));
}

/* ---------- the layer over the canvas ---------- */

/* Covers the canvas without taking its pointer: only the notes themselves do. */
.dz-engine-dom > .dz-review-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.dz-review-measures,
.dz-review-notes,
.dz-review-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Notes placed off screen are hidden (their own display rules would show them). */
.dz-review-layer [hidden] {
  display: none !important;
}

.dz-review-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.dz-review-svg path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A dark line under each colored one, so it shows on white pages too. */
.dz-review-svg .dz-review-halo {
  stroke: rgba(8, 7, 11, 0.45);
  stroke-width: 3;
}

.dz-review-svg .dz-measure-line {
  stroke: var(--dz-measure, #ff5ca8);
  stroke-width: 1.25;
}

.dz-review-svg .dz-measure-line.is-selected {
  stroke-width: 2;
}

.dz-review-svg .dz-measure-extension {
  stroke: var(--dz-measure, #ff5ca8);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.85;
}

.dz-review-svg .dz-note-line {
  stroke: var(--dz-note);
  stroke-width: 1.25;
}

.dz-review-svg .dz-note-dot {
  fill: var(--dz-note);
  stroke: rgba(8, 7, 11, 0.5);
  stroke-width: 1;
}

/* ---------- comment pins ---------- */

.dz-pin {
  --pin-color: var(--accent, #ff5ca8);
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 14px 14px 14px 3px;
  background: var(--pin-color);
  box-shadow: 0 0 0 1px rgba(8, 7, 11, 0.25), 0 4px 12px -2px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font: 750 11px/24px var(--font-body);
  text-align: center;
  pointer-events: auto;
  cursor: var(--nc-hand, pointer);
  touch-action: none;
  transform-origin: 0 100%;
  transition: scale var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out);
}

.dz-pin:hover,
.dz-pin.is-open {
  scale: 1.1;
}

.dz-pin.is-open {
  box-shadow: 0 0 0 2px var(--accent, #ff5ca8), 0 6px 16px -2px rgba(0, 0, 0, 0.55);
}

.dz-pin:focus-visible {
  outline: 2px solid var(--accent, #ff5ca8);
  outline-offset: 2px;
}

.dz-pin.is-resolved {
  --pin-color: #4b4659;
  opacity: 0.85;
}

.dz-pin.is-draft .dz-pin-face {
  opacity: 0.9;
}

.dz-pin.is-dragging {
  scale: 1.15;
  cursor: grabbing;
  box-shadow: 0 0 0 1px rgba(8, 7, 11, 0.25), 0 10px 24px -4px rgba(0, 0, 0, 0.6);
}

.dz-pin-face {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

/* A computer's pointer over a pin: who wrote it and how it starts. */
.dz-pin-peek {
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  display: none;
  width: max-content;
  max-width: 240px;
  padding: 6px 9px;
  border: 1px solid var(--glass-border-hover, rgba(255, 255, 255, 0.15));
  border-radius: 9px;
  background: var(--dz-note-card);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.7);
  color: var(--text, #f5f3f9);
  font: 500 11.5px/1.35 var(--font-body);
  text-align: left;
  white-space: normal;
  transform: translateY(-50%);
  pointer-events: none;
}

.dz-pin.is-flip .dz-pin-peek {
  left: auto;
  right: calc(100% + 6px);
}

.dz-pin-peek-name {
  display: block;
  font-weight: 700;
}

.dz-pin-peek-text {
  display: block;
  color: var(--text-2, #bdb7cc);
}

.dz-pin-peek-text:empty {
  display: none;
}

@media (hover: hover) {
  .dz-pin:not(.is-open):not(.is-dragging):hover .dz-pin-peek {
    display: block;
  }
}

/* Fingers get a bigger target than the pin looks. */
@media (pointer: coarse) {
  .dz-pin::before,
  .dz-measure-label::before,
  .dz-note.is-compact::before {
    content: "";
    position: absolute;
    inset: -9px;
  }
}

/* ---------- annotation cards ---------- */

.dz-note {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  gap: 5px;
  width: max-content;
  max-width: 220px;
  padding: 7px 10px 8px;
  border: 1px solid rgba(143, 157, 255, 0.45);
  border-radius: 9px;
  background: var(--dz-note-card);
  box-shadow: 0 0 0 1px rgba(8, 7, 11, 0.3), 0 8px 22px -8px rgba(0, 0, 0, 0.65);
  color: var(--text, #f5f3f9);
  font: 500 11.5px/1.4 var(--font-body);
  pointer-events: auto;
  cursor: var(--nc-hand, pointer);
  touch-action: none;
  user-select: none;
}

.dz-note:hover {
  border-color: var(--dz-note);
}

.dz-note:focus-visible {
  outline: 2px solid var(--dz-note);
  outline-offset: 2px;
}

.dz-note.is-dragging {
  cursor: grabbing;
  box-shadow: 0 0 0 1px rgba(8, 7, 11, 0.3), 0 14px 30px -8px rgba(0, 0, 0, 0.7);
}

.dz-note-text {
  margin: 0;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.dz-note-props {
  display: grid;
  gap: 1px;
  margin: 0;
}

.dz-note-text + .dz-note-props {
  padding-top: 5px;
  border-top: 1px solid rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.08);
}

.dz-note-prop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.dz-note-prop dt {
  color: var(--text-3, #8d879f);
  font-size: 10.5px;
  font-weight: 650;
}

.dz-note-prop dd {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--text, #f5f3f9);
  font: 500 11px/1.4 var(--font-mono);
  text-align: right;
}

.dz-note-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--swatch, transparent);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.25);
}

/* A small layer (zoomed far out): only a mark; hovering or focusing it tells what it says. */
.dz-note.is-compact {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--dz-note);
}

.dz-note-mark {
  display: none;
}

/* ---------- measurements ---------- */

.dz-measure {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.dz-measure-label {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border: 0;
  border-radius: 9px;
  background: var(--dz-measure, #ff5ca8);
  box-shadow: 0 0 0 1px rgba(8, 7, 11, 0.3), 0 3px 8px -2px rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font: 650 10.5px/18px var(--font-body);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.dz-measure-label:focus-visible,
.dz-measure.is-selected .dz-measure-label {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

.dz-measure-label.is-dragging {
  cursor: grabbing;
}

.dz-measure-remove {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(20, 17, 28, 0.94);
  color: #ffffff;
  transform: translate(calc(-50% + 0px), calc(-50% - 22px));
  pointer-events: auto;
  cursor: var(--nc-hand, pointer);
}

.dz-measure.is-selected .dz-measure-remove {
  display: grid;
}

.dz-measure-remove:hover {
  background: var(--dz-danger, #ff5c7a);
}

/* ---------- the comment thread and the annotation editor (popovers next to their pin or card) ---------- */

.dz-pop.is-thread {
  width: 300px;
}

.dz-thread,
.dz-annot {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dz-thread-head {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 8px 6px 12px;
  border-bottom: 1px solid var(--dz-line, rgba(255, 255, 255, 0.07));
}

.dz-thread-heading {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}

.dz-thread-title {
  margin: 0;
  font: 650 12.5px/1.25 var(--font-display);
}

.dz-thread-where {
  overflow: hidden;
  color: var(--text-3, #8d879f);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dz-thread-where[hidden] {
  display: none;
}

.dz-thread-head .dz-btn[hidden] {
  display: none;
}

.dz-thread-head .dz-btn[aria-pressed="true"] {
  color: var(--ok, #3ddc97);
}

.dz-thread-danger:hover {
  color: var(--dz-danger-ink, #ff9db0);
}

.dz-thread-list {
  display: grid;
  gap: 12px;
  max-height: min(340px, 48vh);
  margin: 0;
  padding: 12px;
  overflow: auto;
  list-style: none;
}

.dz-thread-list[hidden] {
  display: none;
}

.dz-thread-message {
  display: flex;
  gap: 9px;
  min-width: 0;
}

.dz-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--avatar, #6247d8);
  color: #ffffff;
  font: 750 10px/1 var(--font-body);
}

.dz-thread-body {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.dz-thread-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 20px;
}

.dz-thread-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.dz-thread-author {
  overflow: hidden;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dz-thread-time,
.dz-thread-edited {
  flex: 0 0 auto;
  color: var(--text-3, #8d879f);
  font-size: 11px;
}

.dz-thread-actions {
  display: flex;
  gap: 0;
  opacity: 0;
  transition: opacity var(--fast) var(--ease-out);
}

.dz-thread-message:hover .dz-thread-actions,
.dz-thread-message:focus-within .dz-thread-actions {
  opacity: 1;
}

.dz-thread-actions .dz-btn.is-icon.is-small {
  width: 22px;
  height: 22px;
  min-width: 22px;
}

.dz-thread-text {
  margin: 0;
  color: var(--text, #f5f3f9);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
}

.dz-thread-editing {
  display: grid;
  gap: 6px;
}

.dz-thread-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.dz-thread-compose {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--dz-line, rgba(255, 255, 255, 0.07));
}

.dz-thread-list[hidden] + .dz-thread-compose {
  border-top: 0;
}

.dz-thread-name[hidden] {
  display: none;
}

.dz-thread-compose-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.dz-thread-input,
.dz-thread-edit {
  min-height: 36px;
  max-height: 140px;
  resize: none;
}

.dz-thread-send {
  flex: 0 0 auto;
}

.dz-thread-send:disabled {
  opacity: 0.35;
}

/* The annotation editor. */
.dz-annot-body {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
}

.dz-annot-text {
  min-height: 64px;
  resize: vertical;
}

.dz-annot-props {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dz-annot-props[hidden] {
  display: none;
}

.dz-annot-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  padding: 0 2px 0 9px;
  border: 1px solid rgba(143, 157, 255, 0.4);
  border-radius: 999px;
  background: rgba(143, 157, 255, 0.12);
  color: var(--text, #f5f3f9);
  font-size: 11.5px;
  font-weight: 650;
}

.dz-annot-chip-remove {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2, #bdb7cc);
  cursor: var(--nc-hand, pointer);
}

.dz-annot-chip-remove:hover {
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.1);
  color: var(--text, #f5f3f9);
}

.dz-annot-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dz-annot-foot .dz-select {
  flex: 1 1 auto;
}

/* ---------- the Comments list (right panel) ---------- */

.dz-comments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
  padding: 10px 8px 8px;
  overflow: auto;
}

.dz-comments-head {
  display: flex;
  padding: 0 4px;
}

.dz-comments-filter {
  flex: 1 1 auto;
}

.dz-comments-list {
  flex: 1 1 auto;
  align-content: start;
}

.dz-comment-row {
  align-items: flex-start;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2, #bdb7cc);
  font: inherit;
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-comment-row:focus-visible {
  outline: 2px solid var(--accent, #ff5ca8);
  outline-offset: -2px;
}

.dz-comment-row-body {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.dz-comment-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.dz-comment-row-name {
  overflow: hidden;
  color: var(--text, #f5f3f9);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dz-comment-row-time,
.dz-comment-row-meta {
  flex: 0 0 auto;
  color: var(--text-3, #8d879f);
  font-size: 11px;
}

.dz-comment-row-text {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-2, #bdb7cc);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.dz-comments-foot {
  display: flex;
  padding: 0 2px;
}

.dz-comments-who {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dz-comments-who span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- the minimap ---------- */

.dz-minimap {
  position: absolute;
  right: calc(var(--dz-free-right, 0px) + 12px);
  bottom: calc(var(--dz-free-bottom, 0px) + 12px);
  width: 200px;
  height: 136px;
  overflow: hidden;
  border: 1px solid var(--glass-border-hover, rgba(255, 255, 255, 0.15));
  border-radius: 12px;
  background: var(--dz-surface-strong, rgba(22, 19, 31, 0.94));
  box-shadow: var(--dz-shadow-float, 0 10px 30px -10px rgba(0, 0, 0, 0.8));
  pointer-events: auto;
  touch-action: none;
  cursor: var(--nc-hand, pointer);
}

.dz-minimap[hidden] {
  display: none;
}

.dz-minimap.is-dragging {
  cursor: grabbing;
}

.dz-minimap:focus-visible {
  outline: 2px solid var(--accent, #ff5ca8);
  outline-offset: 2px;
}

.dz-minimap-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.designer[data-layout="phone"] .dz-minimap {
  width: 148px;
  height: 100px;
}

/* ---------- the color picker's contrast check ---------- */

.dz-cp-contrast .dz-cp-heading-row {
  gap: 8px;
}

.dz-cp-contrast-use {
  width: auto;
  max-width: 150px;
  height: 24px;
  font-size: 11px;
}

.dz-cp-contrast-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dz-cp-contrast-sample {
  --behind: #000000;
  --ink: #ffffff;
  --ink-alpha: 1;
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 26px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--behind);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.14) inset;
  color: transparent;
  font: 750 13px/1 var(--font-body);
}

/* The letters in the color, with its opacity (the text itself stays for the layout). */
.dz-cp-contrast-sample::after {
  content: "Aa";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  opacity: var(--ink-alpha);
}

.dz-cp-contrast-ratio {
  flex: 1 1 auto;
  min-width: 0;
  font: 650 12.5px/1 var(--font-mono);
}

.dz-cp-contrast-levels {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

.dz-cp-level {
  height: 22px;
  padding: 0 8px;
  font-size: 10.5px;
}

button.dz-cp-level.is-fail {
  border-color: var(--dz-danger-line, rgba(255, 92, 122, 0.4));
  background: var(--dz-danger-soft, rgba(255, 92, 122, 0.12));
  color: var(--dz-danger-ink, #ff9db0);
  cursor: var(--nc-hand, pointer);
}

button.dz-cp-level.is-fail:hover {
  border-color: rgba(var(--dzt-danger-rgb, 255, 92, 122), 0.7);
  background: rgba(var(--dzt-danger-rgb, 255, 92, 122), 0.22);
  color: var(--dzt-danger-hover-ink, #ffd0d9);
}

button.dz-cp-level.is-fail:focus-visible {
  outline: 2px solid var(--accent, #ff5ca8);
  outline-offset: 1px;
}

/* ---------- phones and touch ---------- */

.designer[data-layout="phone"] .dz-thread-list {
  max-height: none;
}

.designer[data-layout="phone"] .dz-thread-actions,
.designer[data-layout="phone"] .dz-annot-chip-remove {
  opacity: 1;
}

@media (pointer: coarse) {
  .dz-thread-actions {
    opacity: 1;
  }

  .dz-thread-input,
  .dz-thread-edit,
  .dz-thread-name,
  .dz-annot-text {
    font-size: 16px; /* no zooming into the field on iPhone */
  }

  .dz-cp-level {
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dz-pin,
  .dz-thread-actions {
    transition: none;
  }
}

/* ---------- phones: the review tools are in the top bar (review/phone.js), not the tool bar ---------- */

.designer[data-layout="phone"] .dz-tool-group[data-group="review"] {
  display: none;
}

.designer:not([data-layout="phone"]) .dz-phone-review {
  display: none;
}

.dz-review-menu {
  padding: 4px 8px 8px;
}

.dz-review-menu-row {
  width: 100%;
  min-height: 48px;
  border: 0;
  background: transparent;
  color: var(--text, #f5f3f9);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-review-menu-row > span {
  flex: 1 1 auto;
}

.dz-review-menu-row[aria-pressed="true"] {
  color: var(--accent-ink, #ff8cc4);
}

/* As a bottom sheet (phones) the card's own head says it all: the sheet's title would say it twice. */
.dz-sheet.is-thread .dz-sheet-head {
  display: none;
}