/* Стикеры-мысли на рабочем столе — часть #desktop, не отдельный экран, поэтому здесь нет
   правил для [hidden]: секция всегда либо целиком внутри видимого #desktop, либо не в DOM. */
#notes-board {
  margin-top: 28px;
  padding: 18px clamp(16px, 3vw, 24px) 22px;
  border-radius: 18px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(8px);
}

.notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.notes-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.notes-hint { margin: 0; font-size: 12.5px; color: var(--ink-mute); }

/* Ограниченная область для абсолютно позиционированных карточек — без pan/zoom, координаты
   заметки (x/y из БД) — это пиксели относительно левого верхнего угла именно этого контейнера. */
.notes-canvas {
  position: relative;
  min-height: 420px;
  margin-top: 16px;
  border-radius: 12px;
  border: 1px dashed var(--glass-line);
  overflow: hidden;
}

/* width/height всегда переопределены инлайн через CSSOM в notes-board.js (note.width/height из
   БД, границы 140-420 / 100-360 — см. db/migrations/004_note_size.sql) — значения ниже лишь
   запасной вариант на случай, если скрипт по какой-то причине не выставит их раньше отрисовки. */
.note {
  position: absolute;
  width: 200px;
  min-height: 100px;
  padding: 12px 14px 10px;
  border-radius: 4px 14px 14px 14px;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; gap: 10px;
  color: #1B2233;
  /* Перетаскивание и ресайз — жестами указателя, не скроллом/зумом области под пальцем на
     тачскрине. */
  touch-action: none;
  transition: box-shadow .15s ease, transform .15s ease;
}
.note.is-own { cursor: grab; }
.note.is-own.is-dragging { cursor: grabbing; box-shadow: 0 16px 28px -10px rgba(0, 0, 0, .7); }
/* Подсветка при наведении — не только у своих: чужую заметку тоже можно комментировать, поэтому
   отклик на курсор уместен у любой. Заметно сильнее, чем первая версия (-2px/умеренная тень) —
   ту было почти не видно рядом с более резкой тенью .is-dragging. Во время реального
   перетаскивания карточка и так уже сдвинута инлайновыми left/top каждый кадр — свой transform
   тут не нужен, is-dragging его подавляет. */
.note:hover {
  box-shadow: 0 22px 36px -12px rgba(0, 0, 0, .8), 0 0 0 2px rgba(255, 255, 255, .5);
  transform: translateY(-6px) scale(1.03);
}
.note.is-dragging:hover { transform: none; box-shadow: 0 16px 28px -10px rgba(0, 0, 0, .7); }

/* Черновик создаётся двойным кликом по пустому месту доски (см. notes-board.js) — не своя
   заметка в смысле авторства (у него ещё нет id/author), но визуально уже редактируется, поэтому
   курсор текстовый, а не grab, и подсвечен пунктирным контуром, пока не сохранён/не отменён. */
.note.is-draft { cursor: text; outline: 2px dashed rgba(255, 255, 255, .55); outline-offset: 2px; }

.note-text { margin: 0; font-size: 13.5px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; flex: 1; }

.note-edit {
  flex: 1; width: 100%; margin: 0; padding: 0;
  font: inherit; color: inherit; line-height: 1.4;
  background: transparent; border: 0; outline: none; resize: none;
  overflow-wrap: anywhere;
}

.note-footer { display: flex; align-items: center; gap: 8px; }
.note-author { font-size: 11px; opacity: .68; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Кластер из трёх иконок — не часть .note-footer (та строка теперь только для имени автора):
   прибит к правому нижнему углу самой карточки тем же приёмом, что и .note-resize (position:
   absolute на .note, которая уже position: relative через position: absolute всего элемента —
   .note сама абсолютно спозиционирована на канвасе, так что дочерний absolute считает от её же
   границ). bottom: 20px, а не 4px — ручка ресайза (.note-resize) занимает буквальный угол 14×14px
   при right/bottom: 2px, ряд иконок сидит сразу над ней, не перекрывая. */
.note-actions {
  position: absolute; right: 4px; bottom: 20px;
  display: flex; align-items: center; gap: 4px;
}

/* Заметка "активируется" одним кликом (см. setActive/clearActive и makeDraggable.endDrag в
   notes-board.js) — редактирование/цвет/удаление своей заметки видны только у активной карточки,
   не всегда. Это НЕ атрибут [hidden] (тот капкан описан у .note-color-popover/.note-delete-popover
   ниже и в base.css) — это обычный класс .is-active на родителе .note, поэтому конфликта с
   [hidden]{display:none} тут нет: .note.is-active .note-*-wrap (специфичность двух классов)
   перебивает .note-*-wrap { display: none } (специфичность одного) независимо от порядка правил
   в файле. */
.note-edit-wrap,
.note-color-wrap,
.note-delete-wrap {
  display: none;
}
.note.is-active .note-edit-wrap,
.note.is-active .note-color-wrap,
.note.is-active .note-delete-wrap {
  display: block;
}

/* Пока идёт редактирование текста заметки (startEditingNoteText) — цвет и удаление скрыты, чтобы
   не мешали под курсором рядом с textarea; кнопка редактирования остаётся (переключать её саму
   пока незачем — редактор закрывается через Escape/blur, а не повторным кликом по "✎"). */
.note.is-editing-text .note-color-wrap,
.note.is-editing-text .note-delete-wrap {
  display: none;
}

.note-edit-wrap { position: relative; flex-shrink: 0; }
.note-edit-toggle {
  display: block; flex-shrink: 0; width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .12); color: #1B2233;
  font-size: 11px; line-height: 1; cursor: pointer;
}
.note-edit-toggle:hover { background: rgba(0, 0, 0, .22); }

.note-delete-wrap { position: relative; flex-shrink: 0; }

.note-delete {
  display: block; flex-shrink: 0; width: 20px; height: 20px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .12); color: #1B2233;
  font-size: 14px; line-height: 1; cursor: pointer;
}
.note-delete:hover { background: rgba(0, 0, 0, .22); }

/* Попап подтверждения удаления (см. renderDeleteControl в notes-board.js) — тот же приём
   позиционирования и та же ловушка с [hidden], что у .note-color-popover выше: author-правило
   .note-delete-popover ниже задаёт display, значит нужен свой [hidden]-оверрайд. */
.note-delete-popover {
  position: absolute; bottom: calc(100% + 6px); right: 0;
  width: max-content; max-width: 180px;
  padding: 10px; border-radius: 10px;
  background: #1B2233; color: #fff;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .6);
  z-index: 5;
}
.note-delete-popover[hidden] { display: none; }
.note-delete-popover p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.35; }
.note-delete-actions { display: flex; justify-content: flex-end; gap: 6px; }
.note-delete-actions button {
  padding: 4px 10px; border: 0; border-radius: 7px;
  font-size: 12px; cursor: pointer;
}
.note-delete-actions .secondary { background: rgba(255, 255, 255, .12); color: #fff; }
.note-delete-actions .secondary:hover { background: rgba(255, 255, 255, .2); }
.note-delete-confirm { background: #E05B5B; color: #fff; }
.note-delete-confirm:hover { background: #C94848; }

/* Ручка ресайза — только у своих карточек (см. isOwn в renderCard), правый нижний угол,
   визуально диагональные штрихи намекают на "потяни отсюда". pointerdown на ней не должен
   запускать makeDraggable (см. проверку event.target.closest('.note-resize') там). */
.note-resize {
  position: absolute; right: 2px; bottom: 2px;
  width: 14px; height: 14px;
  cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, .35) 50%);
  border-radius: 0 0 4px 0;
}

.note-yellow { background: #FFE9A8; }
.note-lime   { background: #D9F04A; }
.note-sky    { background: #A8DCEF; }
.note-peach  { background: #FFC7AD; }
.note-lilac  { background: #D8C8FF; }
.note-rose   { background: #F4B8CB; }

/* Ряд точек-кнопок выбора цвета — только на черновике (см. createDraft в notes-board.js), не
   отдельная форма, как было раньше: компактно, под текстовым полем самой карточки. Цвет каждой
   точки переиспользует .note-{color} (те же классы, что и у самой карточки) — единственный
   источник истины для оттенков остаётся здесь, а не дублируется вторым набором hex-значений. */
.note-color-picker { display: flex; gap: 6px; flex-shrink: 0; }
.note-color-dot {
  width: 16px; height: 16px; padding: 0; flex-shrink: 0;
  border-radius: 50%; border: 2px solid transparent;
  cursor: pointer;
}
.note-color-dot.is-selected { border-color: rgba(27, 34, 51, .55); }

/* Кружок-переключатель цвета у уже сохранённой заметки (см. renderColorControl в notes-board.js) —
   рядом с "×", открывает попап с теми же точками. wrap — position:relative, чтобы попап (position:
   absolute) не уезжал по всей карточке. */
.note-color-wrap { position: relative; flex-shrink: 0; }
/* Кнопка без текстового глифа (в отличие от .note-edit-toggle/.note-delete) — браузерный дефолт
   display: inline-block у <button> выключает её по базовой линии окружающего текста, а у пустой
   кнопки без своего текста базовая линия считается иначе, чем у соседних кнопок с "✎"/"×" —
   визуально кружок съезжал по высоте. display: block убирает inline-выключку целиком, тот же
   приём ниже у .note-edit-toggle/.note-delete. */
.note-color-toggle {
  display: block; width: 20px; height: 20px; padding: 0;
  border-radius: 50%; border: 2px solid rgba(0, 0, 0, .18);
  cursor: pointer;
}
.note-color-toggle:hover { border-color: rgba(0, 0, 0, .4); }

.note-color-popover {
  position: absolute; bottom: calc(100% + 6px); right: 0;
  padding: 6px; border-radius: 10px;
  background: #1B2233; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .6);
  z-index: 5;
}
/* .note-color-picker уже задаёт display:flex (для всегда видимого пикера на черновике) — это
   author-правило перебивает браузерный дефолт [hidden]{display:none} (тот же капкан, что описан
   у #desktop[hidden] и соседей в base.css), поэтому попап без этой строки был бы виден всегда,
   независимо от атрибута hidden. */
.note-color-popover[hidden] { display: none; }

/* Стек комментариев — визуально под карточкой (top: 100%), но DOM-потомок .note: следует за
   drag/resize бесплатно (см. комментарий у renderCommentStack в notes-board.js), потому что
   makeDraggable/makeResizable/positionCard меряют только offsetWidth/offsetHeight самой карточки,
   а абсолютно позиционированный ребёнок в них не участвует. padding-top даёт зазор от низа
   карточки — margin-top на самом .comment-stack тут бы не сработал (top: 100% уже фиксирует
   позицию относительно родителя). */
.comment-stack {
  position: absolute; top: 100%; left: 0; width: 100%;
  padding-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
  /* Не даём drag/resize-жестам по самой заметке цепляться за клики здесь (см. проверку
     .closest('.comment-stack') в makeDraggable), а курсор — обычный, не grab/grabbing родителя. */
  cursor: default; touch-action: auto;
}

/* Сворачивание — только когда есть хоть один комментарий (см. ensureToggle в renderCommentStack).
   Прячем .comment, не .comment-add: "+ комментарий" остаётся доступной даже свёрнутым списком. */
.comment-stack.is-collapsed .comment { display: none; }

.comment-toggle {
  align-self: flex-start;
  display: flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none;
  font-size: 11px; color: var(--ink-mute, rgba(27, 34, 51, .6));
  cursor: pointer;
}
.comment-toggle:hover { color: #1B2233; }
.comment-toggle .arrow { display: inline-block; font-size: 9px; }

.comment {
  padding: 7px 9px 6px;
  border-radius: 4px 10px 10px 10px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(27, 34, 51, .08);
  box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .4);
  color: #1B2233;
}
.comment-text { margin: 0 0 4px; font-size: 12px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.comment-author { font-size: 10.5px; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Рядом с удалением, слева от него (см. порядок append в renderCommentEntry) — тот же лёгкий
   круглый стиль, что у comment-delete, но без деструктивного оттенка. */
.comment-edit-toggle {
  display: block; flex-shrink: 0; width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .1); color: #1B2233;
  font-size: 10px; line-height: 1; cursor: pointer;
}
.comment-edit-toggle:hover { background: rgba(0, 0, 0, .2); }

.comment-delete {
  display: block; flex-shrink: 0; width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .1); color: #1B2233;
  font-size: 12px; line-height: 1; cursor: pointer;
}
.comment-delete:hover { background: rgba(0, 0, 0, .2); }

.comment-edit {
  width: 100%; margin: 0; padding: 0;
  font: inherit; font-size: 12px; color: inherit; line-height: 1.35;
  background: transparent; border: 0; outline: none; resize: none;
  overflow-wrap: anywhere;
}

.comment-add {
  align-self: flex-start;
  padding: 0; border: 0; background: none;
  font-size: 11px; color: var(--ink-mute, rgba(27, 34, 51, .6));
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.comment-add:hover { color: #1B2233; }