/* Стили перенесённого приложения SLA ("Замечания", исходник ~/sla-app).
   ВСЕ селекторы автоматически заскоуплены под #tab-notes: у SLA и
   budget-app совпадают 11 имён классов (.app, .card, .active, .hidden,
   .ok/.bad/.warn/.good, .red/.green, .js) — без скоупа они ломали бы
   обе стороны. Правки вносить здесь, оригинал sla-app не трогаем. */
#tab-notes *{ box-sizing: border-box; margin: 0; padding: 0; }

/* Было html,body — внутри вкладки фон и высоту страницы не навязываем,
   их задаёт сам budget-app; оставляем только цвет текста SLA-блока. */
#tab-notes{ color: #1a1a2e; }

#tab-notes .app{
  max-width: 780px;
  margin: 0 auto;
  padding: 0;          /* отступы даёт вкладка budget-app */
  min-height: 0;       /* было 100vh — внутри вкладки не нужно */
}

/* Дашборд УРК — таблицы с несколькими колонками ("Разбивка"), в узкой
   780px-колонке крайние столбцы обрезались/уезжали в горизонтальный скролл
   при том, что по бокам полно свободного места (десктоп/маркетплейс
   Bitrix24). Расширяем контейнер только пока открыт дашборд (класс "wide"
   переключается в app.js по вкладкам) — список замечаний не трогаем. */
#tab-notes .app.wide{ max-width: 1180px; }

#tab-notes .header{ text-align: center; margin-bottom: 10px; }
#tab-notes .header h1{ font-size: 22px; font-weight: 900; letter-spacing: -0.4px; }
#tab-notes .header h1 span{ color: #ef4444; }

#tab-notes .status-chip{ text-align: center; font-size: 12.5px; font-weight: 700; color: #64748b; margin-bottom: 14px; }

#tab-notes .card{
  background: white;
  border-radius: 22px;
  padding: 18px 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  margin-bottom: 14px;
}
#tab-notes .hidden{ display: none !important; }

#tab-notes .field-label{
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #94a3b8;
  margin-bottom: 6px;
}

/* combo (переиспользуем паттерн из obzvon-app) */
#tab-notes .combo{ position: relative; }
#tab-notes .combo-btn{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid #e2e8f0; border-radius: 12px;
  font-size: 14px; font-weight: 700; font-family: inherit; color: #1a1a2e;
  background: #fafbfc; cursor: pointer; text-align: left;
}
#tab-notes .combo-btn:hover{ background: #f4f6f8; }
#tab-notes .combo.open .combo-btn{ border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.12); background: white; }
#tab-notes .combo-caret{ color: #94a3b8; font-size: 13px; }
#tab-notes .combo-dropdown{
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: white; border: 1px solid #e2e8f0; border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18); z-index: 30;
  display: flex; flex-direction: column; max-height: 320px; overflow: hidden;
}
#tab-notes .combo-dropdown.hidden{ display: none; }
#tab-notes .combo-search{ margin: 10px 10px 6px; padding: 9px 12px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 13.5px; font-family: inherit; background: #fafbfc; }
#tab-notes .combo-search:focus{ outline: none; border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.12); background: white; }
#tab-notes .combo-list{ overflow-y: auto; flex: 1 1 auto; padding: 4px 6px 8px; }
#tab-notes .combo-item{ padding: 9px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: #1a1a2e; cursor: pointer; }
#tab-notes .combo-item:hover{ background: #fef2f2; }
#tab-notes .combo-item.selected{ background: #fee2e2; color: #b91c1c; font-weight: 800; }
#tab-notes .combo-empty{ padding: 14px 10px; color: #94a3b8; font-size: 13px; text-align: center; }

/* summary */
#tab-notes .summary-body{ display: flex; flex-wrap: wrap; gap: 10px; }
#tab-notes .stat{ flex: 1 1 110px; background: #f8fafc; border: 1.5px solid #eef1f4; border-radius: 14px; padding: 12px 14px; }
#tab-notes .stat .stat-num{ font-size: 20px; font-weight: 900; line-height: 1; }
#tab-notes .stat .stat-label{ font-size: 11px; font-weight: 700; color: #94a3b8; margin-top: 4px; }
#tab-notes .stat.red .stat-num{ color: #ef4444; }
#tab-notes .stat.orange .stat-num{ color: #f97316; }
#tab-notes .stat.green .stat-num{ color: #1a9c5b; }
#tab-notes .stat.gray .stat-num{ color: #64748b; }

/* filters */
#tab-notes .plan-search{ width: 100%; padding: 12px 16px; border: 1.5px solid #e2e8f0; border-radius: 14px; font-size: 14px; font-family: inherit; background: #fafbfc; margin-bottom: 12px; }
#tab-notes .plan-search:focus{ outline: none; border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.12); background: white; }
#tab-notes .icon-legend{ display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 2px; font-size: 13px; color: #64748b; font-weight: 700; }
#tab-notes .icon-legend-item{ display: inline-flex; align-items: center; gap: 5px; }
#tab-notes .icon-legend-item .chip-icon{ display: inline-flex; color: #64748b; }
#tab-notes .icon-legend-item .chip-icon svg{ width: 16px; height: 16px; }
#tab-notes .icon-legend-item-green, #tab-notes .icon-legend-item-green .chip-icon{ color: #16a34a; }

#tab-notes .chip-row{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#tab-notes .plan-filter-chip{
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; min-height: 36px;
  border: 1.5px solid #e2e8f0; background: white; border-radius: 20px;
  font-size: 12.5px; font-weight: 800; color: #64748b; cursor: pointer;
}
#tab-notes .plan-filter-chip:has(input:checked){ background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
#tab-notes .chip-btn{ padding: 8px 14px; border: 1.5px solid #e2e8f0; background: #f8fafc; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #475569; cursor: pointer; }
#tab-notes .chip-btn:hover{ background: #eef2f7; }
#tab-notes .chip-btn:disabled{ opacity: 0.55; cursor: default; }

@media (max-width: 520px) {
  /* На узком экране "⚠️ Только просроченные" одна занимала всю ширину ряда,
     и "Обновить" переносился на отдельную строку ниже — прижимаем обе
     кнопки в один ряд, ужимая паддинг/шрифт под доступную ширину. */
  #tab-notes .chip-row{ flex-wrap: nowrap; }
  #tab-notes .plan-filter-chip{ flex: 1 1 auto; min-width: 0; padding: 8px 8px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #tab-notes .chip-btn{ flex: 0 0 auto; padding: 8px 10px; font-size: 11.5px; }
}
#tab-notes .dash-refresh-row{ display: flex; justify-content: flex-end; margin-bottom: 10px; }

#tab-notes .level-chip{ border: 1.5px solid #e2e8f0; background: white; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 800; cursor: pointer; color: #64748b; }
#tab-notes .level-chip.active{ color: white; border-color: transparent; }
#tab-notes .level-chip[data-level="Критический"].active{ background: #ef4444; }
#tab-notes .level-chip[data-level="Высокий"].active{ background: #f97316; }
#tab-notes .level-chip[data-level="Средний"].active, #tab-notes .level-chip[data-level="Средний (по умолчанию)"].active{ background: #eab308; }
#tab-notes .level-chip[data-level="Плановый"].active{ background: #8b5cf6; }
#tab-notes .level-chip[data-level="Низкий"].active{ background: #64748b; }

/* list */
#tab-notes .list-card{ padding: 0; overflow: hidden; }
#tab-notes .list-card-head{ display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1.5px solid #f1f5f9; font-size: 13px; font-weight: 700; color: #475569; }
#tab-notes .sel-count{ color: #94a3b8; font-weight: 600; }
#tab-notes .sel-count b{ color: #1a1a2e; font-weight: 800; }

/* Положительные отзывы — нет сроков/штрафов, зеленоватый фон отличает их от
   обычных замечаний с первого взгляда, без чтения текста. */
#tab-notes .positive-list-card{ background: #f0fdf4; border: 1.5px solid #bbf7d0; margin-bottom: 12px; }
#tab-notes .positive-list-card .list-card-head{ border-bottom-color: #bbf7d0; color: #15803d; }
#tab-notes .positive-item{ background: #fff; margin: 10px; border: 1px solid #dcfce7; border-radius: 12px; padding: 12px 14px; }
#tab-notes .positive-item:last-child{ margin-bottom: 10px; }
#tab-notes .positive-item-addr{
  display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800;
  color: #15803d; text-transform: uppercase; letter-spacing: 0.02em;
}
#tab-notes .positive-item-addr .chip-icon{ color: #86efac; }
#tab-notes .positive-item-types{ margin-top: 4px; font-weight: 700; font-size: 13px; color: #1a1a2e; }
/* Прокручивается страница, а не список: свой скролл внутри блока на телефоне
   ловится пальцем случайно и путает (заказчик 17.09.2026). */
#tab-notes .list{ max-height: none; overflow: visible; }
#tab-notes .empty-msg{ padding: 24px 18px; color: #94a3b8; font-size: 13.5px; text-align: center; }

/* Каждая группа (сделка/адрес) — единый блок с рамкой: заголовок-адрес
   визуально "держит" свои карточки типов внутри себя, а не читается как
   подпись к предыдущей группе. Между блоками — толстый серый разрыв. */
#tab-notes .item-group{ border: 1px solid #e7e9ee; border-radius: 12px; margin: 10px 10px 14px; overflow: hidden; }
#tab-notes .item-group:first-child{ margin-top: 10px; }
#tab-notes .item-group .item:last-child{ border-bottom: none; }

#tab-notes .group-header{
  padding: 9px 14px; background: #eef2f7; border-bottom: 1px solid #e2e6ee;
}
#tab-notes .group-header-addr{
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 800; color: #475569;
  text-transform: uppercase; letter-spacing: 0.02em;
}
#tab-notes .group-header-icon{ flex: 0 0 auto; display: flex; color: #94a3b8; }
/* Комментарий/фото — общие на всю сделку системные поля, раньше дублировались
   на каждой карточке типа; теперь один раз здесь, под адресом. */
#tab-notes .group-header-comment{ margin-top: 6px; font-size: 12px; color: #475569; text-transform: none; letter-spacing: normal; font-weight: 600; line-height: 1.4; }
#tab-notes .group-header-add-comment{ margin-top: 6px; text-transform: none; letter-spacing: normal; }
/* Кнопка «Сдать» в заголовке группы: появляется, когда по всем отмеченным
   типам этого адреса есть и реакция, и фото (см. groupHeader в sla.js). */
#tab-notes .group-submit-btn{
  display: block; width: 100%; margin-top: 10px; border: none; border-radius: 8px;
  padding: 10px; font-size: 12.5px; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  text-transform: none; letter-spacing: normal;
}
#tab-notes .group-submit-btn:hover{ filter: brightness(1.05); }
#tab-notes .group-submit-btn:disabled{ opacity: 0.6; cursor: default; }
/* Вместо «Сдать», пока закрыто не всё: чего именно не хватает. */
#tab-notes .group-submit-hint{
  margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #fff7ed;
  color: #9a3412; font-size: 12px; font-weight: 600; line-height: 1.4;
  text-transform: none; letter-spacing: normal;
}
#tab-notes .group-submit-hint b{ font-weight: 800; }
#tab-notes .group-header-photos{ margin-top: 8px; }

#tab-notes .item{
  display: block; padding: 14px 18px; border-bottom: 1px solid #f5f6f8;
  text-decoration: none; color: inherit; cursor: pointer;
}
#tab-notes .item:hover{ background: #fafbfc; }
#tab-notes .item-top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
#tab-notes .item-title{ font-weight: 700; font-size: 13.5px; line-height: 1.35; }
#tab-notes .item-company{ color: #64748b; font-size: 12px; font-weight: 600; margin-top: 2px; }

#tab-notes .level-badge{
  flex-shrink: 0; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; color: white;
  box-shadow: 0 2px 6px -1px var(--badge-shadow, rgba(0,0,0,0.15));
}
#tab-notes .level-badge.crit{ background: #ef4444; --badge-shadow: rgba(239,68,68,0.4); }
#tab-notes .level-badge.high{ background: #f97316; --badge-shadow: rgba(249,115,22,0.4); }
#tab-notes .level-badge.mid{ background: #eab308; color: #1a1a2e; --badge-shadow: rgba(234,179,8,0.4); }
#tab-notes .level-badge.plan{ background: #8b5cf6; --badge-shadow: rgba(139,92,246,0.4); }
#tab-notes .level-badge.low{ background: #64748b; --badge-shadow: rgba(100,116,139,0.35); }

#tab-notes .item-body{ display: flex; align-items: stretch; gap: 12px; margin-top: 9px; }
#tab-notes .item-body .deadlines{ flex: 1 1 auto; margin-top: 0; }

#tab-notes .item-buttons{ flex: 0 0 auto; display: flex; flex-direction: column; gap: 7px; }

#tab-notes .photo-btn-big{
  flex: 0 0 auto;
  width: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: none; border-radius: 14px; cursor: pointer;
  background: linear-gradient(150deg, #34d071, #16a34a);
  color: white; font-size: 10px; font-weight: 800; letter-spacing: 0.1px;
  box-shadow: 0 4px 12px -2px rgba(22,163,74,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
  padding: 9px 4px;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}
#tab-notes .photo-btn-big:hover{ filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 14px -2px rgba(22,163,74,0.5), inset 0 1px 0 rgba(255,255,255,0.25); }
#tab-notes .photo-btn-big:active{ transform: scale(0.96); }
/* На всю ширину строки, а не квадратная кнопка как "Фото"/"Реакция" в
   замечаниях — тут кнопка одна и главная, ей можно занять всё место.
   .photo-btn-big.positive-react-btn — оба класса, специфичность выше базовых
   правил .photo-btn-big выше, порядок в файле уже не важен. */
#tab-notes .photo-btn-big.positive-react-btn{ width: 100%; flex: 1 1 auto; flex-direction: row; padding: 12px 18px; gap: 8px; font-size: 13.5px; }
#tab-notes .photo-btn-big.positive-react-btn .photo-btn-big-icon svg{ width: 18px; height: 18px; }
#tab-notes .photo-btn-big:disabled{ opacity: 0.55; cursor: default; filter: none; transform: none; box-shadow: none; }
#tab-notes .photo-btn-big-icon{ display: flex; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15)); }

#tab-notes .react-btn-big{
  background: linear-gradient(150deg, #4f8cf7, #2563eb);
  box-shadow: 0 4px 12px -2px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}
#tab-notes .react-btn-big:hover{ box-shadow: 0 6px 14px -2px rgba(37,99,235,0.5), inset 0 1px 0 rgba(255,255,255,0.25); }
#tab-notes .react-btn-big:disabled{
  background: linear-gradient(150deg, #a3aebd, #64748b);
  box-shadow: none;
}

@media (max-width: 520px) {
  /* На телефоне кнопки растягивались на всю высоту карточки (align-items:
     stretch у .item-body) — прижимаем их к верху и кладём в ряд, чтобы под
     ними не оставалось пустого места и карточка была компактнее. */
  #tab-notes .item-buttons{ flex-direction: row; align-self: flex-start; gap: 6px; }
  #tab-notes .photo-btn-big{ width: 50px; padding: 7px 4px; font-size: 9px; }
  #tab-notes .photo-btn-big-icon svg{ width: 16px; height: 16px; }
}

#tab-notes .deadlines{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 9px; }

#tab-notes .item-comment{
  margin-top: 9px; padding: 8px 10px; background: #f8fafc; border-radius: 8px;
  font-size: 12px; color: #475569; white-space: pre-wrap; line-height: 1.4;
}

#tab-notes .add-comment-control{ margin-top: 6px; }
#tab-notes .add-comment-toggle{
  border: none; background: none; color: #2563eb; font-size: 12px; font-weight: 700;
  padding: 2px 0; cursor: pointer;
}
#tab-notes .add-comment-toggle:hover{ text-decoration: underline; }
#tab-notes .add-comment-toggle.hidden, #tab-notes .add-comment-input-row.hidden{ display: none; }
#tab-notes .add-comment-input{
  width: 100%; box-sizing: border-box; border: 1.5px solid #dbe0e8; border-radius: 8px;
  padding: 7px 9px; font-size: 12.5px; color: #1a1a2e; background: #fff;
}
#tab-notes .add-comment-input:focus{ border-color: #2563eb; outline: none; }

/* Своя камера — живое превью + мультисъёмка без ухода в системную камеру ОС. */
/* ВАЖНО: правила трёх оверлеев ниже — .camera-*, .modal-* и .lightbox* — БЕЗ
   префикса #tab-notes намеренно. sla.js добавляет их в document.body
   (см. document.body.appendChild), то есть вне #tab-notes, и с префиксом ни
   одно из них не применялось: окно "+ Комментарий" выводилось неоформленным
   блоком в конец страницы, под навбаром (поймано 02.09.2026). Плюс сам
   #tab-notes скрывается атрибутом hidden при переходе на другую вкладку —
   оверлей внутри него пропал бы вместе с ним. Имена классов проверены на
   уникальность: в style.css и index.html их нет. */
.camera-modal{
  position: fixed; inset: 0; background: #000; z-index: 1100;
  display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.camera-modal.show{ opacity: 1; pointer-events: auto; }
.camera-video{ flex: 1 1 auto; width: 100%; height: 100%; object-fit: cover; background: #000; transition: filter 0.1s ease; }
.camera-video.flash{ filter: brightness(2.2); }
.camera-topbar{ position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 14px; }
.camera-close, .camera-switch{
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,0.45); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center;
}
.camera-strip{
  position: absolute; bottom: 96px; left: 0; right: 0; display: flex; gap: 8px;
  padding: 0 14px; overflow-x: auto;
}
.camera-thumb{ position: relative; width: 52px; height: 52px; flex-shrink: 0; border-radius: 8px; overflow: hidden; border: 2px solid #fff; }
.camera-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.camera-thumb-del{
  position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%;
  background: #dc2626; color: #fff; border: none; font-size: 11px; line-height: 1; cursor: pointer;
}
.camera-bottombar{
  position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 26px; background: linear-gradient(transparent, rgba(0,0,0,0.6));
}
.camera-shutter{
  width: 66px; height: 66px; border-radius: 50%; background: #fff; border: 4px solid rgba(255,255,255,0.4);
  cursor: pointer; flex: 0 0 auto; margin: 0 auto;
}
.camera-shutter:active{ background: #e2e8f0; }
.camera-gallery-btn, .camera-done{
  border: none; border-radius: 999px; padding: 9px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: rgba(255,255,255,0.15); color: #fff; flex: 0 0 auto; white-space: nowrap;
}
.camera-done{ background: #16a34a; }
.camera-done:disabled{ background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); cursor: default; }

/* Поп-ап "Комментарий" по клику на "+ Комментарий" — один оверлей на всё
   приложение, тот же принцип, что и .lightbox. */
.modal-overlay{
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.modal-overlay.show{ opacity: 1; pointer-events: auto; }
.modal-box{
  background: #fff; border-radius: 14px; padding: 18px; width: 100%; max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-title{ font-weight: 800; font-size: 14px; color: #1a1a2e; margin-bottom: 10px; }
.modal-textarea{
  width: 100%; box-sizing: border-box; border: 1.5px solid #dbe0e8; border-radius: 8px;
  padding: 9px 11px; font-size: 13px; color: #1a1a2e; background: #fff; resize: vertical;
  font-family: inherit;
}
.modal-textarea:focus{ border-color: #2563eb; outline: none; }
.modal-actions{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.modal-btn{ border: none; border-radius: 8px; padding: 9px 16px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.modal-btn-cancel{ background: #f1f5f9; color: #475569; }
.modal-btn-cancel:hover{ background: #e2e8f0; }
.modal-btn-save{ background: #2563eb; color: #fff; }
.modal-btn-save:hover{ background: #1d4ed8; }
.modal-btn-save:disabled{ opacity: 0.6; cursor: default; }

#tab-notes .photo-gallery{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
#tab-notes .photo-thumb-wrap{ position: relative; width: 56px; height: 56px; flex-shrink: 0; }
#tab-notes .photo-thumb{
  display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
  border: 1.5px solid #e2e8f0;
}
#tab-notes .photo-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
#tab-notes .photo-del{
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  border-radius: 50%; border: none; background: #ef4444; color: white;
  font-size: 13px; line-height: 1; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
/* Полноэкранный предпросмотр фото по клику — как Quick Look на Mac. */
.lightbox{
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.88); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
  /* Иначе пинч двумя пальцами по фону вокруг фото (не точно по <img>)
     подхватывает системный зум страницы вместо нашего JS-обработчика. */
  touch-action: none;
}
.lightbox.show{ opacity: 1; pointer-events: auto; }
.lightbox img{
  max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  cursor: zoom-in; touch-action: none; transform-origin: center center;
}
.lightbox img.zoomed{ cursor: zoom-out; }
.lightbox-nav{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-nav:hover{ background: rgba(255,255,255,0.22); }
.lightbox-prev{ left: 16px; }
.lightbox-next{ right: 16px; }
.lightbox-counter{
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 700;
  background: rgba(0,0,0,0.35); padding: 4px 10px; border-radius: 999px;
}
.lightbox-close{
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: #dc2626; color: #fff; font-size: 20px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px -2px rgba(220,38,38,0.6);
}
.lightbox-close:hover{ background: #b91c1c; }

#tab-notes .photo-del:hover{ background: #b91c1c; }
#tab-notes .photo-del:disabled{ opacity: 0.5; cursor: wait; }

#tab-notes .item-actions{ margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
#tab-notes .photo-btn{
  border: 1.5px solid #e2e8f0; background: #f8fafc; color: #475569;
  font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: 10px; cursor: pointer;
}
#tab-notes .photo-btn:hover{ background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
#tab-notes .photo-btn:disabled{ opacity: 0.6; cursor: wait; }
#tab-notes .photo-btn.danger{ background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
#tab-notes .photo-btn.danger:hover{ background: #fecaca; }
#tab-notes .deadline-chip{ font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #f1f5f9; color: #475569; }
#tab-notes .deadline-chip.overdue{ background: #fee2e2; color: #b91c1c; }
#tab-notes .deadline-chip.ok{ background: #dcf5e6; color: #1a9c5b; }
#tab-notes .deadline-chip.pending{ background: #f1f5f9; color: #64748b; }
#tab-notes .deadline-chip.closed{ background: #eef2f7; color: #64748b; }
#tab-notes .deadline-chip .date-done{ color: #0f172a; }
#tab-notes .deadline-chip .chip-date{ text-decoration: underline; text-underline-offset: 2px; }
#tab-notes .deadline-chip .chip-icon{
  display: inline-flex; vertical-align: middle; margin-right: 1px; position: relative; top: -1px;
}
/* Иконки рисовались в разных внутренних размерах (камера — под большие
   кнопки 19px, реакция/пин — под 13px) — в маленьком чипе это давало
   разнобой по высоте. Приводим все иконки чипов к одному размеру. */
#tab-notes .deadline-chip .chip-icon svg{ width: 15px; height: 15px; }

#tab-notes .toast{
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(10px);
  padding: 12px 22px; border-radius: 12px; font-weight: 800; font-size: 14px; color: white;
  background: #1a1a2e; z-index: 9999; opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none;
}
#tab-notes .toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* --- Дашборд УРК --- */
#tab-notes .view-tabs{ display: flex; gap: 8px; margin-bottom: 4px; }
#tab-notes .view-tab{
  flex: 1 1 auto; border: 1.5px solid #e2e8f0; background: #fff; color: #64748b;
  font-size: 13px; font-weight: 700; padding: 10px; border-radius: 12px; cursor: pointer;
  transition: all 0.15s ease;
}
#tab-notes .view-tab:hover{ border-color: #cbd5e1; }
#tab-notes .view-tab.active{ background: #1a1a2e; border-color: #1a1a2e; color: white; }

#tab-notes .dashboard{ display: flex; flex-direction: column; gap: 14px; }

#tab-notes .compliance-hero{
  border-radius: 16px; padding: 20px 18px; text-align: center; color: white;
  box-shadow: 0 6px 18px -4px rgba(15,23,42,0.18);
}
#tab-notes .compliance-hero.good{ background: linear-gradient(135deg, #22c55e, #15803d); }
#tab-notes .compliance-hero.mid{ background: linear-gradient(135deg, #f59e0b, #b45309); }
#tab-notes .compliance-hero.bad{ background: linear-gradient(135deg, #ef4444, #b91c1c); }
#tab-notes .compliance-hero.neutral{ background: linear-gradient(135deg, #94a3b8, #64748b); }
#tab-notes .compliance-value{ font-size: 40px; font-weight: 900; line-height: 1; }
#tab-notes .compliance-label{ font-size: 12px; font-weight: 700; margin-top: 6px; opacity: 0.92; }

#tab-notes .kpi-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
#tab-notes .kpi-card{
  background: #fff; border-radius: 14px; padding: 14px 16px; border: 1px solid #eef0f4;
  box-shadow: 0 2px 8px -2px rgba(15,23,42,0.06);
}
#tab-notes .kpi-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
#tab-notes .kpi-card .kpi-value{ font-size: 24px; font-weight: 800; color: #1a1a2e; line-height: 1.1; }
#tab-notes .kpi-icon{ font-size: 18px; opacity: 0.55; line-height: 1; }
#tab-notes .kpi-card .kpi-label{ font-size: 11.5px; color: #64748b; font-weight: 700; margin-top: 4px; }
#tab-notes .kpi-card.warn .kpi-value{ color: #dc2626; }
#tab-notes .kpi-card.ok .kpi-value{ color: #16a34a; }
#tab-notes .kpi-card.money .kpi-value{ color: #b45309; }

#tab-notes .dash-card{ background: #fff; border-radius: 14px; padding: 16px; border: 1px solid #eef0f4; }
#tab-notes .dash-card-title{ font-size: 13.5px; font-weight: 800; color: #1a1a2e; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }

#tab-notes .dash-row{
  display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f5f6f8;
}
#tab-notes .dash-row:last-child{ border-bottom: none; }
#tab-notes .dash-row-name{ flex: 1 1 auto; min-width: 0; }
#tab-notes .dash-row-name .name{ font-weight: 700; font-size: 12.5px; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-notes .dash-row-name .sub{ font-size: 11px; color: #94a3b8; margin-top: 1px; }
#tab-notes .dash-bar-wrap{ flex: 0 0 90px; height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
#tab-notes .dash-bar{ height: 100%; background: linear-gradient(90deg, #f97316, #ef4444); border-radius: 999px; }
#tab-notes .dash-row-stats{ flex: 0 0 auto; text-align: right; font-size: 11.5px; font-weight: 700; color: #475569; white-space: nowrap; }
#tab-notes .dash-row-stats .overdue-num{ color: #dc2626; }
#tab-notes .dash-row-stats .overdue-pct{ color: #94a3b8; font-weight: 600; }

#tab-notes .urgent-row{
  display: block; padding: 10px 0; border-bottom: 1px solid #f5f6f8; text-decoration: none; color: inherit;
}
#tab-notes .urgent-row:last-child{ border-bottom: none; }
#tab-notes .urgent-row:hover{ background: #fafbfc; }
#tab-notes .urgent-top{ display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
#tab-notes .urgent-title{ font-weight: 700; font-size: 12.5px; color: #1a1a2e; }
#tab-notes .urgent-sub{ font-size: 11px; color: #94a3b8; margin-top: 1px; }

#tab-notes .dash-empty{ text-align: center; color: #94a3b8; font-size: 12.5px; padding: 16px 0; }

/* Таблицы дашборда ("По типам"/"По партнёрам") — только здесь, у списка
   замечаний своя карточная вёрстка. Бордеры пошире, чтобы строки/столбцы
   визуально не сливались при большом числе колонок. */
#tab-notes .dash-table-wrap{ overflow-x: auto; border: 2.5px solid #cbd5e1; border-radius: 10px; }
#tab-notes .dash-table{ width: 100%; border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
#tab-notes .dash-table th, #tab-notes .dash-table td{ padding: 10px 16px; border-bottom: 1.5px solid #e2e6ee; border-right: 1.5px solid #eef0f4; text-align: left; }
#tab-notes .dash-table th:first-child, #tab-notes .dash-table td:first-child{ border-left: none; }
#tab-notes .dash-table th:last-child, #tab-notes .dash-table td:last-child{ border-right: none; }
#tab-notes .dash-table tr:last-child td{ border-bottom: none; }
#tab-notes .dash-table thead th{ background: #f8fafc; color: #64748b; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 2.5px solid #cbd5e1; }
#tab-notes .dash-table tbody tr:hover{ background: #f8fafc; }
#tab-notes .dash-table tbody td:first-child{ font-weight: 700; color: #1a1a2e; }
#tab-notes .dash-table .overdue-num{ color: #dc2626; font-weight: 700; }
#tab-notes .dash-table .overdue-pct{ color: #94a3b8; }
#tab-notes .kpi-cell-value{ font-size: 16px; font-weight: 800; }
#tab-notes .kpi-cell-value.warn{ color: #dc2626; }
#tab-notes .kpi-cell-value.ok{ color: #16a34a; }
/* Строка-разделитель секции ("Тип замечания"/"Партнёр") внутри общей таблицы. */
#tab-notes .dash-table .section-row td{ background: #eef2f7; font-weight: 800; color: #475569; text-transform: uppercase; font-size: 11px; letter-spacing: 0.02em; border-right: none; }
/* Строки отсортированы по остроте проблемы (худшие сверху) — плюс подсветка
   фона, чтобы самое горящее было видно сразу, не вчитываясь в проценты. */
#tab-notes .dash-table tr.risk-crit td{ background: #fef2f2; }
#tab-notes .dash-table tr.risk-warn td{ background: #fffbeb; }
#tab-notes .dash-table tr.total-row td{ background: #f8fafc; font-weight: 800; border-top: 2px solid #cbd5e1; }
#tab-notes .dash-table .empty-row td{ color: #94a3b8; text-align: center; font-style: italic; border-right: none; }
#tab-notes .dash-table-link{ color: #2563eb; font-weight: 700; text-decoration: none; }
#tab-notes .dash-table-link:hover{ text-decoration: underline; }

/* Мини-полоска прогресса под "N / M (X%)" в разбивке — быстрее считывается
   взглядом, чем голое число, особенно когда строк много. */
#tab-notes .overdue-cell{ display: flex; flex-direction: column; gap: 4px; }
#tab-notes .overdue-bar-wrap{ width: 100%; max-width: 120px; height: 4px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
#tab-notes .overdue-bar-fill{ height: 100%; border-radius: 999px; }
#tab-notes .overdue-bar-fill.ok{ background: #16a34a; }
#tab-notes .overdue-bar-fill.warn{ background: #f59e0b; }
#tab-notes .overdue-bar-fill.crit{ background: #dc2626; }

/* Авто-инсайты — "умный" разбор цифр в человеческие выводы, не просто таблица. */
#tab-notes .insights-list{ display: flex; flex-direction: column; gap: 8px; }
#tab-notes .insight-row{
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px;
  border-radius: 10px; font-size: 12.5px; line-height: 1.45; font-weight: 600;
  border-left: 3px solid transparent;
}
#tab-notes .insight-icon{ flex: 0 0 auto; font-size: 15px; line-height: 1.4; }
#tab-notes .insight-text{ color: #334155; }
#tab-notes .insight-crit{ background: #fef2f2; border-left-color: #dc2626; }
#tab-notes .insight-warn{ background: #fffbeb; border-left-color: #f59e0b; }
#tab-notes .insight-info{ background: #eff6ff; border-left-color: #2563eb; }
#tab-notes .insight-ok{ background: #f0fdf4; border-left-color: #16a34a; }

/* Статус "Обновлено 10:45:01" переехал в подзаголовок шапки приложения
   (см. setMainTabTitle в app.js) — отдельная строка под шапкой не нужна. */
#tab-notes .status-chip{ display: none; }

/* Фото жалобы лежит в поле «Файл» внутри Битрикса и открывается только тем,
   кто вошёл в Битрикс. Партнёру вместо битой картинки — честная подпись. */
.photo-thumb.photo-thumb-locked{
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:8px;font-size:10.5px;font-weight:700;line-height:1.3;
  color:#6B7280;background:#F1F3F0;border:1px dashed #D6D9D4;text-decoration:none
}
.photo-thumb.photo-thumb-locked img{display:none}

/* Ролик, приложенный к жалобе, играет прямо в карточке: миниатюра под него
   расширяется, потому что в квадрат 92×92 плеер не помещается. */
.photo-thumb:has(.photo-video){width:auto;max-width:100%;height:auto;background:#000}
.photo-video{display:block;width:100%;max-width:320px;max-height:220px;border-radius:10px;background:#000}

/* Выбор источника фото ("Снять сейчас" / "Галерея") по кнопке "Прикрепить
   фото". Лист снизу, как системный: на телефоне до него ближе, чем до центра
   экрана. */
.photo-source{
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 1150;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.photo-source.show{ opacity: 1; pointer-events: auto; }
.photo-source-sheet{
  width: 100%; max-width: 420px; background: #fff; border-radius: 16px 16px 0 0;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px;
  transform: translateY(12px); transition: transform 0.15s ease;
}
.photo-source.show .photo-source-sheet{ transform: none; }
.photo-source-title{
  font-size: 12px; font-weight: 800; color: #64748b; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 2px 4px 4px;
}
.photo-source-btn{
  border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 12px;
  padding: 14px 16px; font: inherit; font-size: 15px; font-weight: 700;
  color: #0f172a; text-align: left; cursor: pointer;
}
.photo-source-btn:active{ background: #eef2f7; }
.photo-source-cancel{
  border: none; background: none; padding: 10px; font: inherit; font-size: 14px;
  font-weight: 700; color: #64748b; cursor: pointer;
}

/* ===========================================================================
   Десктоп для «Замечаний». Список был зажат в 780px по центру и прокручивался
   внутри себя (вложенный скролл — на мыши неудобно: колесо цепляет то
   страницу, то список). На большом экране раскрываем на две колонки и отдаём
   прокрутку самой странице (заказчик 15.09.2026).
   =========================================================================== */
@media (min-width:1024px){
  #tab-notes .app{max-width:1440px}
  /* Свой скролл больше не нужен — страница и так прокручивается. */
  #tab-notes .list{max-height:none;overflow:visible}
  /* Переключатель «Список / Дашборд» — по содержимому: во всю ширину две
     кнопки выглядели как две огромные вкладки. */
  #tab-notes .view-tabs{width:fit-content}
  #tab-notes .view-tab{min-width:180px}
  /* Фильтр «Партнёр (админ-режим)» — выпадающий список во всю ширину монитора
     выглядел как ошибка вёрстки. */
  #tab-notes .admin-card{max-width:560px}
  /* «Фото» и «Реакция» — обычные кнопки. Квадрат 58x58 сделан под палец, на
     мыши он просто торчит сбоку карточки. */
  #tab-notes .item-buttons{flex-direction:row;align-items:flex-start;gap:8px}
  #tab-notes .photo-btn-big{
    width:auto;flex-direction:row;gap:6px;padding:8px 14px;border-radius:10px;font-size:12px;
  }
  #tab-notes .photo-btn-big-icon svg{width:15px;height:15px}
  #tab-notes .summary-body{gap:12px}
  #tab-notes .stat{flex:1 1 150px}
  /* Фильтры и поиск в одну строку: по вертикали они занимали пол-экрана. */
  #tab-notes .filters-card{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
  #tab-notes .filters-card .plan-search{flex:1 1 320px;margin-bottom:0}
  #tab-notes .filters-card .chip-row{flex:0 0 auto}
  /* Легенда значков — отдельной строкой под поиском: в один ряд с фильтрами
     она их выдавливала. */
  #tab-notes .filters-card .icon-legend{flex:1 1 100%;order:3;margin:0 2px}
}

@media (min-width:1280px){
  /* Две колонки групп-адресов. Группы разной высоты, поэтому grid с
     выравниванием по верху, а не columns: колоночная вёрстка рвёт группу
     между колонками. */
  #tab-notes .list{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 14px;align-items:start;
  }
  #tab-notes .item-group{margin:10px 0 14px}
  #tab-notes .positive-list-card .list{display:block}
}

/* ===== Создание замечания (вкладка «Создать») =====
   Форма живёт внутри #tab-notes, поэтому все правила заскоуплены — иначе
   поля разъедутся по стилям SLA-списка. */
#tab-notes .create-note{display:flex;flex-direction:column;gap:14px;padding:4px 0 90px}
#tab-notes .create-note.hidden{display:none}
#tab-notes .create-note .field{display:flex;flex-direction:column;gap:6px;
  font-size:12px;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:.3px}
#tab-notes .create-note textarea,
#tab-notes .create-note input[type="file"]{
  border:1px solid #E5E7EB;background:#fff;border-radius:12px;padding:11px 13px;
  font:inherit;font-size:15px;color:#121413;text-transform:none;letter-spacing:0;font-weight:400;
}
#tab-notes .create-note .pick{
  border:1px solid #E5E7EB;background:#fff;border-radius:12px;padding:12px 13px;font:inherit;
  font-size:15px;color:#121413;display:flex;justify-content:space-between;gap:10px;cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:400;text-align:left;
}
#tab-notes .create-note .bar{display:flex;flex-wrap:wrap;gap:6px}
#tab-notes .create-note .chip{
  border:1px solid #E5E7EB;background:#fff;border-radius:999px;padding:7px 13px;font:inherit;
  font-size:13px;font-weight:600;color:#6B7280;cursor:pointer;text-transform:none;letter-spacing:0;
}
#tab-notes .create-note .chip.on{background:#121413;color:#fff;border-color:#121413}
#tab-notes .create-note .sw-line{display:flex;align-items:center;gap:10px;font-size:14px;color:#121413}
#tab-notes .create-note .sw-line input{width:20px;height:20px}
#tab-notes .create-note .thumbs{display:flex;gap:6px;flex-wrap:wrap}
#tab-notes .create-note .thumbs img{width:62px;height:62px;object-fit:cover;border-radius:10px;border:1px solid #E5E7EB}
/* Кнопки формы — островом внизу экрана, на месте навбара (он на время
   создания скрыт). Внутри прокрутки они терялись. */
#tab-notes .create-note__acts{
  position:fixed;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;
  display:flex;gap:8px;background:#fff;border:1px solid #E5E7EB;border-radius:22px;padding:8px;
  box-shadow:0 10px 30px rgba(20,23,26,.16);
}
#tab-notes .create-note__acts .btn-primary{flex:1;min-height:46px;border-radius:16px}
#tab-notes .create-note__acts .note-cancel{border-radius:16px}
#tab-notes .create-note__status{font-size:13px;color:#6B7280;min-height:18px}

/* Два уровня в списке: адрес объекта, внутри — сделки-замечания. */
/* Группа отступает от краёв белой карточки так же, как вложенные .item-group:
   раньше она шла в притык, и её рамка упиралась в край карточки — на скруглении
   это читалось как обводка, вылезающая за фон. */
#tab-notes .addr-group{margin:10px 10px 14px}
#tab-notes .addr-group .item-group{margin-left:0;margin-right:0}
#tab-notes .addr-group-head{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:11px 13px;
  font:inherit;font-size:13px;font-weight:800;color:#121413;cursor:pointer;
}
#tab-notes .addr-group-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#tab-notes .addr-group-title{display:flex;align-items:center;gap:6px;overflow-wrap:anywhere}
#tab-notes .addr-group-partner{font-size:12px;font-weight:600;color:#6B7280}
#tab-notes .addr-group-counts{display:flex;align-items:center;gap:8px;font-size:12px;
  font-weight:700;color:#6B7280;flex:none}
#tab-notes .addr-group-counts b{background:#EEF0EE;border-radius:999px;padding:1px 8px;color:#121413}
#tab-notes .addr-group-caret{transition:transform .2s;display:inline-block}
#tab-notes .addr-group.is-folded .addr-group-caret{transform:rotate(-90deg)}
#tab-notes .addr-group-body{padding-top:8px}
#tab-notes .addr-group.is-folded .addr-group-body{display:none}
#tab-notes .group-chat-btn{
  border:1px solid #E5E7EB;background:#fff;border-radius:999px;padding:6px 12px;
  font:inherit;font-size:12.5px;font-weight:700;color:#121413;cursor:pointer;align-self:flex-start;
}
#tab-notes .group-chat-btn:disabled{opacity:.6}

/* Всё содержимое замечания — текст, фото и типы со сроками — раскрывается
   нажатием на адрес. В свёрнутом виде виден только заголовок группы. */

/* Переключатель режимов «Замечаний» — сегментами, как «Производственные /
   Административные» в «Запросе»: активный сегмент белой пилюлей. */
#tab-notes .form-type-tabs{
  display:flex;gap:4px;background:#EEF0EE;border-radius:999px;padding:4px;margin:0 0 14px;
}
#tab-notes .form-type-tabs.hidden{display:none}
#tab-notes .form-type-tabs .tab{
  flex:1;min-width:0;border:0;background:none;border-radius:999px;padding:9px 10px;
  font:inherit;font-size:13px;font-weight:700;color:#6B7280;cursor:pointer;
  text-transform:none;letter-spacing:0;line-height:1.2;
}
#tab-notes .form-type-tabs .tab.active{background:#fff;color:#121413;box-shadow:0 1px 3px rgba(20,23,26,.12)}

/* Поиск переехал в шапку портала, подсказки-иконки убраны — на телефоне они
   занимали экран, а пользовались ими редко. */
/* Весь блок фильтров уехал в шапку — сам блок больше не показываем, но
   элементы оставляем в разметке: на них завязана логика списка. */
#tab-notes .filters-card{display:none}

/* Режимы «Замечаний» больше не переключаются вкладками: список всегда, а
   создание — круглым «+» над навбаром (заказчик 17.09.2026). */
#tab-notes .form-type-tabs{display:none !important}
.notes-fab{
  position:fixed;right:16px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:60;
  width:52px;height:52px;border-radius:50%;border:0;background:#121413;color:#fff;
  font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(20,23,26,.28);
}
.notes-fab.hidden{display:none}
#tab-notes .note-cancel{
  border:1px solid #E5E7EB;background:#fff;border-radius:14px;padding:0 18px;min-height:46px;
  font:inherit;font-size:14px;font-weight:700;color:#121413;cursor:pointer;
}
#tab-notes .create-note__acts{display:flex;gap:8px}
#tab-notes .create-note__acts .btn-primary{flex:1}

/* Форма создания: ничего не должно выезжать вбок, и запас снизу под остров. */
#tab-notes .app{overflow-x:hidden}
#tab-notes .create-note{max-width:100%;overflow-x:hidden;padding-bottom:96px}
#tab-notes .create-note .field em{font-style:normal;font-weight:600;color:#9AA0A6;text-transform:none}
#tab-notes .create-note .pick,
#tab-notes .create-note input,
#tab-notes .create-note textarea{max-width:100%;min-width:0}
/* Пока заполняют заявку, нижнее меню уезжает — его место занимают кнопки. */
body.notes-creating .main-tabs{display:none}

/* Форма заявки — на белой карточке, а не «на воздухе»: без фона поля висели
   прямо на сером и читались как обрывки списка. */
#tab-notes .create-note{
  background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:16px 14px 110px;
  box-shadow:0 1px 2px rgba(20,23,26,.04);
}
#tab-notes .addr-group-fine{color:#B91C1C;font-weight:800}

/* Сколько партнёр сделал по адресу с прошлого захода аккаунта: реакции, фото,
   комментарии. Гаснет, как только адрес раскрыли. */
#tab-notes .addr-new{
  position:absolute;top:-7px;right:-4px;background:#7EC850;color:#fff;border-radius:999px;
  min-width:20px;padding:0 6px;line-height:20px;font-size:11.5px;font-weight:800;
  box-shadow:0 0 0 2px #fff;
}
#tab-notes .addr-group-head{position:relative;overflow:visible}

/* Раскрытый адрес и его замечания — одна карточка (заказчик 24.09.2026:
   «соедини типы с адресом, чтобы было понятно, что они к нему относятся»).
   Раньше белая шапка адреса и серые блоки под ней стояли порознь, и на
   длинном списке было не понять, где кончается один адрес и начинается
   другой. Теперь общая рамка, шапка отделена тонкой линией, а слева от
   вложенных замечаний идёт линия-связка — как ветка в переписке. */
#tab-notes .addr-group:not(.is-folded){
  background:#fff;border:1px solid #E5E7EB;border-radius:14px;
}
#tab-notes .addr-group:not(.is-folded) .addr-group-head{
  border:none;border-bottom:1px solid #EEF0EE;border-radius:14px 14px 0 0;
}
#tab-notes .addr-group:not(.is-folded) .addr-group-body{
  position:relative;padding:4px 8px 8px 20px;
}
#tab-notes .addr-group:not(.is-folded) .addr-group-body::before{
  content:"";position:absolute;left:9px;top:0;bottom:18px;width:2px;
  border-radius:2px;background:#CFE8BF;
}
#tab-notes .addr-group-body > .item-group{margin:8px 0 0;position:relative}
#tab-notes .addr-group-body > .item-group:first-child{margin-top:8px}

/* «Нужно фото» у своих — под сроками пункта, как в виджете сделки.
   Снятая галочка подсвечена: это исключение из правила. */
#tab-notes .photo-toggle{display:inline-flex;align-items:center;gap:7px;margin:8px 0 2px;
  font-size:12.5px;font-weight:600;color:#4B5563;cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent}
#tab-notes .photo-toggle input{margin:0;width:17px;height:17px;accent-color:#16A34A;cursor:pointer}
#tab-notes .photo-toggle.off{color:#B45309}
#tab-notes .photo-toggle input:disabled{cursor:default;opacity:.6}

/* Автор комментария по пункту. */
#tab-notes .item-comment-author{font-weight:800;color:#121413}