/* ============================================================
   Заметки
   ============================================================ */

.search {
  display: flex; align-items: center; gap: 9px;
  background: var(--panel);
  border-radius: 999px;
  padding: 11px 16px;
  box-shadow: var(--shadow-sm);
  color: var(--muted);
}
.search svg { width: 18px; height: 18px; flex-shrink: 0; }
.search input {
  flex: 1;
  border: none; background: none; outline: none;
  font-family: inherit; font-size: 14.5px; color: var(--text);
  -webkit-appearance: none;
}
.search input::placeholder { color: var(--muted); }

.private-banner {
  display: flex; align-items: center; gap: 9px;
  background: var(--pink-tint);
  color: var(--pink-deep);
  border-radius: var(--r-sm);
  padding: 12px 15px;
  font-size: 13px;
  font-weight: 700;
}
.private-banner svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ---------- фотографии в заметке ---------- */

.photo-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-thumb {
  position: relative;
  width: 68px; height: 68px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--panel-soft);
  flex: none;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* крестик поверх угла — на маленьком превью отдельной строки под него нет */
.photo-thumb .photo-del {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; padding: 0;
  border: none; border-radius: 999px;
  background: rgba(47, 42, 46, 0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.photo-thumb .photo-del svg { width: 12px; height: 12px; }
.photo-add {
  width: 68px; height: 68px; flex: none;
  border: 1.5px dashed var(--pink-soft);
  border-radius: var(--r-sm);
  background: var(--panel-soft);
  color: var(--pink-deep);
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.photo-grid.viewer .photo-thumb { width: 96px; height: 96px; }

.photo-full {
  position: fixed; inset: 0; z-index: 90;
  background: var(--scrim);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.photo-full img { max-width: 100%; max-height: 100%; border-radius: var(--r-sm); }

/* ---------- группы (заметки и дела) ---------- */

.group-bar { display: flex; }
.chip-add {
  border: none;
  background: var(--panel);
  color: var(--pink-deep);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.chip-add:active { transform: scale(0.96); }

.group-section + .group-section { margin-top: 14px; }
.group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.group-toggle {
  flex: 1;
  display: flex; align-items: center; gap: 7px;
  border: none; background: none; padding: 0;
  color: var(--text);
  text-align: left;
}
.group-chevron { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; transition: transform 0.18s ease; }
.group-section.collapsed .group-chevron { transform: rotate(-90deg); }
.group-name { font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; }
.group-count { font-size: 12px; color: var(--muted); font-weight: 700; }
.group-actions { display: flex; gap: 4px; flex-shrink: 0; }
.group-actions .icon-btn { color: var(--muted); }
.group-actions .icon-btn[disabled] { opacity: 0.3; pointer-events: none; }
.group-items { display: flex; flex-direction: column; gap: 10px; }
.group-section.collapsed .group-items { display: none; }

.notes-list { display: flex; flex-direction: column; gap: 10px; }
/* обёртка — только позиционирование, как у .todo-item; сама карточка .note-card
   уезжает влево свайпом и открывает .note-actions с удалением под ней */
.note-item { position: relative; border-radius: var(--r-md); overflow: hidden; }
.note-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--panel);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: 14px;
  position: relative;
  z-index: 1;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: pan-y;
}
.note-actions {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 64px;
  display: flex;
}
.note-actions button {
  flex: 1;
  border: none;
  background: var(--panel);
  color: var(--pink-deep);
  display: flex; align-items: center; justify-content: center;
  border-top-right-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
}
.note-actions svg { width: 18px; height: 18px; }
.note-body { flex: 1; min-width: 0; }
.note-title {
  font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.note-preview {
  font-size: 13px; color: var(--muted); font-weight: 500;
  margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.note-meta { font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 5px; }
.note-side { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }
.note-pin, .note-del {
  background: none; border: none; padding: 0;
  color: var(--muted-2); display: flex;
}
.note-pin svg, .note-del svg { width: 18px; height: 18px; }
.note-pin.on { color: var(--pink-deep); }
.note-lock { color: var(--pink); display: flex; }
.note-lock svg { width: 16px; height: 16px; }

/* ручка перетаскивания: touch-action none, иначе жест уедет в скролл страницы */
.note-grip {
  color: var(--muted-2);
  display: flex; flex-shrink: 0;
  padding: 4px 2px;
  touch-action: none;
  cursor: grab;
}
.note-grip svg { width: 18px; height: 18px; }
.note-item.dragging {
  position: relative;
  z-index: 5;
  will-change: transform;
  overflow: visible;
}
.note-item.dragging .note-card {
  box-shadow: var(--shadow-lg);
  cursor: grabbing;
}

.fab {
  position: fixed;
  right: max(18px, calc(50vw - 222px));
  bottom: calc(104px + var(--safe-b));
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--pink-grad);
  color: #fff;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  z-index: 40;
}
.fab svg { width: 24px; height: 24px; }
.fab:active { transform: scale(0.94); }
/* The round "+" hides while any sheet is open */
body:has(.sheet-backdrop.open) .fab { opacity: 0; pointer-events: none; }