/* === Общий режим правок: drag + комментарии на любой странице === */

[data-review-container].editmode > [data-review-section] {
  position: relative;
}

.sec-bar {
  display: flex; align-items: center; gap: .4rem;
  margin: -.5rem -.5rem .4rem -.5rem;
  padding: .35rem .5rem;
  border-radius: .75rem;
  background: rgba(217,119,43,.08);
  border: 1px dashed rgba(217,119,43,.30);
}
.sec-grab {
  cursor: grab; user-select: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: #D9772B; font-size: 14px; line-height: 1;
}
.sec-grab:active { cursor: grabbing; }
.sec-title-tag {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(245,242,235,.55);
  flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.sec-comment-toggle {
  background: transparent; border: 1px solid rgba(245,242,235,.18);
  color: rgba(245,242,235,.7);
  font-size: 12px; padding: 2px 8px; border-radius: 999px;
  cursor: pointer; transition: all .15s ease;
}
.sec-comment-toggle:hover { border-color: #D9772B; color: #D9772B; }
.sec-comment-toggle.has-text { background: #D9772B; color: #1E1C1A; border-color: #D9772B; }

.sec-comment {
  margin-top: .5rem;
  background: rgba(20,16,12,.4);
  border: 1px solid rgba(217,119,43,.30);
  border-radius: .75rem; padding: .4rem;
}
.sec-comment textarea {
  width: 100%; min-height: 56px;
  background: transparent; border: 0; outline: 0; resize: vertical;
  color: #F5F2EB; font-family: inherit; font-size: 13px; line-height: 1.4;
}

.sortable-ghost  { opacity: .4; }
.sortable-chosen { box-shadow: 0 0 0 2px #D9772B; border-radius: 1rem; }

/* Плавающая кнопка */
.review-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  background: #D9772B; color: #1E1C1A; font-weight: 700;
  padding: 12px 16px; border-radius: 999px; border: 0;
  box-shadow: 0 12px 30px -8px rgba(217,119,43,.55);
  font-size: 13px; letter-spacing: .04em; cursor: pointer;
  transition: transform .15s ease;
}
.review-fab:hover { transform: translateY(-2px); }
.review-fab .badge {
  display: inline-block; background: #1E1C1A; color: #D9772B;
  padding: 1px 6px; border-radius: 999px; font-size: 11px; margin-left: 6px;
}

/* Модалка */
.review-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.review-modal.show { display: flex; }
.review-modal .box {
  max-width: 800px; width: 100%; max-height: 86vh;
  background: #27241F; border: 1px solid rgba(217,119,43,.30);
  border-radius: 20px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.review-modal textarea {
  flex: 1; min-height: 50vh;
  background: rgba(20,16,12,.6); border: 1px solid rgba(245,242,235,.10);
  border-radius: 12px; padding: 14px;
  color: #F5F2EB; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; line-height: 1.55;
}

/* === Точечные правки (pins) на любой элемент === */
[data-review-pin] {
  position: relative;
  outline: 1px dashed transparent;
  outline-offset: 2px;
  transition: outline-color .12s ease;
}
[data-review-pin]:hover {
  outline-color: rgba(217,119,43,.55);
}
.review-pin-dot {
  position: absolute;
  top: -8px; right: -8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(245,242,235,.12);
  color: rgba(245,242,235,.85);
  font-size: 10px;
  display: none;
  align-items: center; justify-content: center;
  cursor: pointer; z-index: 20;
  border: 1px solid rgba(217,119,43,.35);
  user-select: none;
}
[data-review-pin]:hover > .review-pin-dot,
.review-pin-dot.has-text {
  display: flex;
}
.review-pin-dot.has-text {
  background: #D9772B;
  color: #1E1C1A;
  border-color: #D9772B;
  font-weight: 700;
}

/* Popup для pin */
.review-pin-popup {
  position: fixed; z-index: 70;
  width: 280px; max-width: calc(100vw - 24px);
  background: #27241F;
  border: 1px solid rgba(217,119,43,.45);
  border-radius: 14px;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.6);
  padding: 10px;
  display: none;
  flex-direction: column; gap: 8px;
}
.review-pin-popup.show { display: flex; }
.review-pin-popup .pin-target-label {
  font-size: 11px; color: rgba(245,242,235,.55);
  line-height: 1.3; max-height: 32px; overflow: hidden;
}
.review-pin-popup textarea {
  width: 100%; min-height: 70px; resize: vertical;
  background: rgba(20,16,12,.6);
  border: 1px solid rgba(245,242,235,.1);
  border-radius: 10px; padding: 8px;
  color: #F5F2EB; font-family: inherit;
  font-size: 13px; line-height: 1.4;
  outline: none;
}
.review-pin-popup textarea:focus { border-color: #D9772B; }
.review-pin-popup .pin-actions {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: rgba(245,242,235,.55);
}
.review-pin-popup .pin-actions button {
  background: transparent; border: 0; cursor: pointer;
  color: rgba(245,242,235,.65); font-size: 11px;
  text-decoration: underline; padding: 0;
}
.review-pin-popup .pin-actions button:hover { color: #D9772B; }