/* ============================================================
   WayliLoc — map.css
   Стили страницы /map (живая карта круга). Поверх home.css:
   используем его токены (--surface, --line, --teal, --sos, --violet…).
   ============================================================ */

/* Страница карты живёт «на весь экран» под шапкой. */
html, body { height: 100%; }
/* Body — сам скролл-контейнер (а не корневой вьюпорт), чтобы:
   (1) СКРЫТЬ нативную «палку»-индикатор, которая выскакивала над клавиатурой на
       форме входа (у корневого скроллера iOS её спрятать нельзя, у контейнера — можно);
   (2) overscroll-behavior надёжно гасил «резинку» → липкая шапка не дёргается. */
body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
  scrollbar-width: none;              /* Firefox */
  padding-top: 0;                     /* на карте свой скроллер (body) + sticky-шапка — отступ home.css не нужен */
}
/* map.html оставляем со STICKY-шапкой (свой скроллер — body, лок бургера его не роняет);
   на лендинге/legal шапка fixed (там скроллит html, где overflow-лок ронял sticky). */
.map-topbar { position: sticky; }
body::-webkit-scrollbar { display: none; }  /* WebKit/iOS — без «палки» */
/* На самой карте страница не скроллится вовсе (карта панорамируется сама,
   список людей имеет свой .map-list-скролл). */
body.map-active { overflow: hidden; }
.map-shell {
  position: relative;
  width: 100%;
  /* высота = вьюпорт минус шапка (topbar 64px); svh — корректно в мобильных браузерах */
  height: calc(100svh - 64px);
  min-height: 420px;
}
#map { position: absolute; inset: 0; width: 100%; height: 100%; }
#map:focus { outline: none; }

/* Глобальный индикатор «нет соединения» — сверху, поверх всего. */
.net-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: none; align-items: center; justify-content: center; gap: 8px;
  background: #E12A3B; color: #fff; font-weight: 700; font-size: 13px;
  padding: 8px 14px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.net-banner.show { display: flex; }
.net-banner svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---- Анимированный фон-карта за экранами входа/сброса/подписки (SVG/CSS, без
   Mapbox). Прячется на самой карте. Формы входа — поверх (z-index). ---- */
.auth-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1100px 760px at 28% 18%, rgba(21,156,144,0.12), transparent 62%),
    radial-gradient(900px 700px at 82% 88%, rgba(56,189,248,0.10), transparent 60%),
    var(--bg, #eef2f4);
}
body.map-active .auth-bg { display: none; }
.page-content, #emptyState, #subState, #mapState { position: relative; z-index: 1; } /* формы/карточки — над фоном-анимацией карты */
.auth-bg svg {
  position: absolute; inset: -6%; width: 112%; height: 112%; opacity: .85;
  animation: authDrift 42s ease-in-out infinite alternate;
}
@keyframes authDrift { from { transform: translate(-1.6%, -1%) scale(1.03); } to { transform: translate(1.6%, 1%) scale(1.07); } }
.auth-bg .streets path { fill: none; stroke: var(--line); stroke-width: 2; opacity: .5; }
.auth-bg .route { fill: none; stroke-width: 3.5; stroke-linecap: round; opacity: .55; stroke-dasharray: 10 14; animation: routeDash 3s linear infinite; }
.auth-bg .r1 { stroke: var(--teal); }
.auth-bg .r2 { stroke: #38BDF8; animation-duration: 4.2s; }
@keyframes routeDash { to { stroke-dashoffset: -48; } }
.auth-bg .mover { fill: #fff; stroke-width: 4; }
.auth-bg .m1 { stroke: var(--teal); filter: drop-shadow(0 0 6px rgba(21,156,144,0.6)); }
.auth-bg .m2 { stroke: #38BDF8; filter: drop-shadow(0 0 6px rgba(56,189,248,0.6)); }
.auth-bg .pin path { fill: var(--teal); }
.auth-bg .pin .dot { fill: #fff; }
.auth-bg .pin .halo { fill: var(--teal); transform-box: fill-box; transform-origin: center; animation: pinHalo 2.4s ease-out infinite; }
.auth-bg .p2 path, .auth-bg .p2 .halo { fill: #38BDF8; }
.auth-bg .p3 path, .auth-bg .p3 .halo { fill: #F97316; }
.auth-bg .p2 .halo { animation-delay: .8s; }
.auth-bg .p3 .halo { animation-delay: 1.6s; }
@keyframes pinHalo { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .auth-bg svg, .auth-bg .route, .auth-bg .pin .halo { animation: none; } }

/* Боковая панель со списком. Десктоп — слева поверх карты; мобилка —
   нижняя шторка (см. @media). */
.map-panel {
  position: absolute; z-index: 5;
  top: 14px; left: 14px;
  width: 320px; max-width: calc(100% - 28px);
  /* Высота — ПО КОНТЕНТУ (сколько людей в списке), не на всю карту. Потолок —
     чтоб не вылезти за карту; при переполнении внутренний список скроллится. */
  max-height: calc(100% - 28px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  overflow: hidden;
}
/* liveView/historyView — флекс-колонки, чтобы шапка была фиксированной,
   а список внутри мог сжиматься и скроллиться при потолке панели. */
#liveView, #historyView { display: flex; flex-direction: column; min-height: 0; }
.map-panel-head {
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  flex-shrink: 0;
}
.map-panel-title { font-family: var(--font-brand, inherit); font-weight: 800; font-size: 16px; color: var(--text); }
.map-list { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 8px; -webkit-overflow-scrolling: touch; }

/* Дес­ктоп-панель живого списка: полоска под списком сворачивает его до ОДНОЙ
   строки (текущий человек) — большой круг не выталкивает карту. В свёрнутом виде
   стрелки листают людей по одному (JS показывает/прячет .list-pager и зовёт
   focusPerson на каждый клик — камера подлетает + открывает маркер). В развёрнутом
   виде — обычный полный список, стрелки скрыты. Скрыто по умолчанию и включается
   ТОЛЬКО от min-width:641px — на мобильной шторке (@media max-width:640px выше)
   остаются старые грабер+скролл без изменений. */
.list-pager, .list-collapse { display: none; }
@media (min-width: 641px) {
  .list-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 2px 8px 8px; flex-shrink: 0; }
  .pager-arrow {
    border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
    width: 34px; height: 34px; border-radius: 999px; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .pager-arrow svg { width: 18px; height: 18px; }
  .pager-arrow:disabled { opacity: .35; cursor: default; }
  @media (hover: hover) { .pager-arrow:not(:disabled):hover { border-color: var(--teal); color: var(--teal); } }

  .list-collapse {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
    border: none; border-top: 1px solid var(--line-soft);
    background: var(--surface-2); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700;
    padding: 7px; cursor: pointer; flex-shrink: 0;
  }
  .list-collapse svg { width: 16px; height: 16px; transition: transform .2s; }
  @media (hover: hover) { .list-collapse:hover { color: var(--teal); } }

  /* Свёрнуто — прячем полный список (JS уже рендерит туда только 1 строку), остаются
     шапка/вкладки + стрелки (если людей >1) + полоска (тап разворачивает обратно). */
  .map-panel.collapsed .list-collapse svg { transform: rotate(180deg); }
}

/* Правая часть шапки на карте: управление (зоны/тема) + профиль. Показываем
   ТОЛЬКО на карте (body.map-active); на экранах входа/сброса — обычное меню сайта. */
.map-hdr-right { display: none; align-items: center; gap: 14px; min-width: 0; }
body.map-active .map-hdr-right { display: flex; }
.map-hdr-ctrls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Кнопка управления картой: иконка + текст (понятно, что делает). */
.hdr-ctrl {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 11px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.hdr-ctrl svg { width: 17px; height: 17px; flex-shrink: 0; }
@media (hover: hover) { .hdr-ctrl:hover { border-color: var(--teal); color: var(--teal); } }.hdr-ctrl.on { background: var(--teal); border-color: var(--teal); color: #fff; } /* зоны включены */
.hdr-ctrl:disabled, .hdr-ctrl.locked { opacity: .45; cursor: default; }
@media (hover: hover) { .hdr-ctrl:disabled:hover, .hdr-ctrl.locked:hover { border-color: var(--line); color: var(--muted); } }/* Иконка темы: луна в светлой теме (клик → тёмная), солнце в тёмной. */
.hdr-ctrl .sun { display: none; }
:root[data-theme="dark"] .hdr-ctrl .moon { display: none; }
:root[data-theme="dark"] .hdr-ctrl .sun { display: inline; }

.map-profile { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 300px; }
.me-name-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.me-name-row .me-name { flex: 0 1 auto; min-width: 0; }
.me-ava {
  width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-weight: 800; color: var(--teal); flex-shrink: 0; font-size: 16px;
}
.me-ava img { width: 100%; height: 100%; object-fit: cover; }
.me-info { flex: 1; min-width: 0; }
.me-name { font-weight: 700; color: var(--text); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-email { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.me-plan {
  flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: .4px;
  color: var(--teal); background: rgba(21,156,144,0.14);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  text-transform: uppercase; cursor: default;
}
.me-logout {
  flex-shrink: 0; border: 1px solid var(--line); background: transparent;
  color: var(--muted); cursor: pointer; padding: 8px; border-radius: 9px; display: flex;
}
@media (hover: hover) { .me-logout:hover { color: var(--sos); border-color: var(--sos); } }
/* Шапка карты: логотип крупнее и с отступом от края (не вплотную), профиль — справа. */
.map-topbar .topbar-in { justify-content: space-between; gap: 16px; }
.map-topbar .brand { font-size: 1.3rem; gap: 12px; padding-left: 20px; }
.map-topbar .brand-logo { width: 40px; height: 40px; border-radius: 10px; }
/* На карте меню сайта скрыто (вместо него профиль); вне карты — показано. */
body.map-active .topnav { display: none; }
body.map-active .mobile-menu { display: none !important; }

/* Крупный элемент списка (НЕ кружочек-как-в-приле). */
.person {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent;
  touch-action: manipulation; /* двойной тап открывает маркер — не даём браузеру зумить */
}
@media (hover: hover) { .person:hover { background: var(--surface-2); } }.person.active { border-color: var(--teal); background: var(--surface-2); }
.person-ava {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-2); object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--teal); font-size: 18px; overflow: hidden;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px rgba(21,156,144,0.55); /* обводка-кольцо */
}
.person-ava img { width: 100%; height: 100%; object-fit: cover; }
.person-main { min-width: 0; flex: 1; }
.person-name { font-weight: 700; color: var(--text); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-sos { color: var(--sos); font-weight: 800; }
/* Иконка батарейки рядом с % в списке. */
.person-batt { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.batt-ic { width: 13px; height: 13px; }
.person.sos { border-color: var(--sos); background: rgba(225,42,59,0.07); margin: 6px 0; } /* отступ, чтобы красные SOS-рамки не слипались */
@media (hover: hover) { .person.sos:hover { background: rgba(225,42,59,0.11); } }/* Переключатель режима панели: [Сейчас | История] — вкладки на всю ширину. */
.mode-toggle { display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.mode-btn {
  flex: 1; border: none; background: transparent; color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 10px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.mode-btn.on { background: var(--teal); color: #fff; }

.head-controls { display: flex; align-items: center; }
.map-panel-title { white-space: nowrap; }

/* Единый сегмент-бар: [Зоны] | [Светлая] [Тёмная] — один общий переключатель.
   Зоны — независимый тумблер (виден отдельным сегментом за разделителем),
   Светлая/Тёмная — выбор темы. Активный сегмент — тил (цвет не меняем). */
.seg-toggle {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px;
}
.seg-btn {
  flex-shrink: 0; white-space: nowrap; border: none; background: transparent;
  color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
}
.seg-btn.on { background: var(--teal); color: #fff; }
/* Нет геозон → «Зоны» неактивна: приглушена, не кликается. */
.seg-btn:disabled, .seg-btn.disabled { opacity: .4; cursor: default; background: transparent; color: var(--muted); }
.seg-sep { width: 1px; align-self: stretch; margin: 3px 4px; background: var(--line); flex-shrink: 0; }

/* Маркер человека — форма как в приложении: батарея сверху, аватар с цветным
   кольцом, бейдж времени/LIVE и стрелка-указатель, чьё остриё стоит точно на
   координате (anchor:bottom). Цвет (--mk) = свежесть точки: зелёный < 12 ч,
   серый ≥ 12 ч, красный — SOS (порог как в renderNormalMarkerImage). */
.pin-wrap {
  --mk: #4CAF50;                 /* fresh по умолчанию */
  position: relative; display: flex; flex-direction: column; align-items: center;
  cursor: pointer; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4));
}
.pin-wrap.stale { --mk: #9E9E9E; }
.pin-wrap.sos   { --mk: #EF4444; }
.pin-batt {
  display: inline-flex; align-items: center; gap: 3px; color: #fff;
  font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap;
  padding: 3px 8px; border-radius: 11px; border: 2px solid #fff;
  margin-bottom: 2px; z-index: 3;
}
.pin-batt svg { width: 14px; height: 14px; }
.pin-ava {
  box-sizing: border-box; width: 66px; height: 66px; border-radius: 50%;
  border: 4px solid var(--mk); background: #E0E0E0; color: #37474F;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-weight: 800; font-size: 25px; box-shadow: 0 0 0 2px #fff;
}
.pin-ava img { width: 100%; height: 100%; object-fit: cover; }
.pin-time {
  margin-top: -9px; z-index: 2; background: var(--mk); color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: .2px;
  padding: 4px 10px; border-radius: 11px; border: 2px solid #fff; white-space: nowrap;
}
.pin-tip {
  width: 0; height: 0; margin-top: -1px;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 13px solid var(--mk);
}
/* Ховер — только утолщение кольца. box-sizing:border-box → размер бокса НЕ
   меняется, поэтому наведение на кучку маркеров больше их не «дёргает». */
@media (hover: hover) { .pin-wrap:hover .pin-ava { border-width: 5px; } }/* SOS — пульсация кольца аватара. */
.pin-wrap.sos .pin-ava { animation: pinpulse 1.6s ease-in-out infinite; }
@keyframes pinpulse {
  0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(239,68,68,0.45); }
  50%      { box-shadow: 0 0 0 2px #fff, 0 0 0 10px rgba(239,68,68,0); }
}
/* Маркер сохранённой точки — капля-пин с иконкой категории (как в приле,
   см. map_screen.dart _renderSavedPointMarkerBytes), рисуется canvas'ом в
   map.js (savedPointPinDataUrl). Тут только курсор — цвет/форма/тень уже в PNG. */
.saved-pin { cursor: pointer; display: block; }

/* Мобилка: панель = нижняя шторка. */
@media (max-width: 640px) {
  .map-shell { height: calc(100svh - 64px); }
  /* Даты/время в фильтре — крупный тап-таргет на телефоне (нативный пикер удобен). */
  .hist-daysel, .hist-timerow input[type="time"] { padding: 10px 8px; font-size: 15px; }
  .hist-daterow, .hist-timerow { gap: 6px; }
  .map-panel {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%;
    max-height: 52%; border-radius: 18px 18px 0 0;
    transition: max-height .22s ease;
  }
  /* Живой список на телефоне: ~2 человека, дальше СКРОЛЛ — шторка остаётся
     компактной, карта видна; тапаешь по человеку → камера летит и открывается его попап.
     Высота = 2 строки (~72px) + краешек третьей как намёк на прокрутку. */
  #peopleList { max-height: 180px; }
  /* Грабер: тап сворачивает/разворачивает шторку, чтобы не закрывала низ карты. */
  .panel-grab {
    display: block; width: 42px; height: 5px; border-radius: 999px;
    background: var(--line); margin: 9px auto 3px; cursor: pointer; flex-shrink: 0;
  }
  .map-panel.collapsed { max-height: 32px; }
  /* История на мобилке: шторке даём больше высоты — форма фильтра листается,
     барабан остаётся внизу и виден. Барабан чуть ниже, чтобы влезло. */
  body.hist-on .map-panel:not(.collapsed) { max-height: 84%; }
  body.hist-on .hist-drum-wrap { height: 168px; }
  body.hist-on .hist-drum { padding: 61px 0; }   /* (168−46)/2 */
  /* Шапка на мобилке: у кнопок зон/темы прячем текст (иконки понятны), чтобы влезло. */
  .hdr-ctrl span { display: none; }
  .hdr-ctrl { padding: 8px; }
  .map-hdr-right { gap: 8px; }
  .map-hdr-ctrls { gap: 6px; }
  /* Шапка на мобилке: компактный логотип + профиль без email (аватар+имя+бейдж+выход). */
  .map-topbar .brand { padding-left: 2px; font-size: 1.05rem; gap: 8px; }
  .map-topbar .brand-logo { width: 34px; height: 34px; }
  .map-profile { max-width: 62%; gap: 8px; }
  /* Узкая шапка карты: прячем ВСЮ текст-инфу профиля (имя/email/бейдж тарифа). На
     мобилке она нечитаема и своей шириной выдавливала кнопку «Выход» за край шапки
     (а с overflow-x:clip «Выход» просто срезало). Остаётся аватар + выход — влезают
     всегда, даже на 320px. Тариф на карте очевиден (веб-карта = только для платных). */
  .map-topbar .me-info { display: none; }
  /* Слайдер наклона на мобилке сам притухает через ~2с бездействия (не закрывает карту);
     касание/наклон возвращает 100% (класс .dim снимает/ставит JS — см. wakeTilt). */
  .tilt-slider.dim { opacity: 0.35; }
}

/* ---- Красивая заглушка пустого круга ---- */
.empty-wrap { display: flex; align-items: center; justify-content: center; min-height: calc(100svh - 64px); padding: 24px; }
.empty-card {
  max-width: 460px; text-align: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: 22px; padding: 40px 32px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.10);
}
.empty-icon {
  width: 88px; height: 88px; margin: 0 auto 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--teal-2), var(--teal));
  box-shadow: 0 12px 30px rgba(21,156,144,0.35);
}
.empty-icon svg { width: 42px; height: 42px; color: #fff; }
.empty-card h2 { color: var(--text); margin-bottom: 10px; }
.empty-card p { color: var(--muted); line-height: 1.55; margin-bottom: 24px; }

/* ---- Фильтр истории ---- */
/* Форма фильтра — прокручиваемая (важно на мобилке: барабан внизу фиксирован,
   а вся форма листается). */
.hist-scroll { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }

/* Пресеты периода + режимы карты — одинаковые ряды-сегменты. */
.hist-presets, .hist-modes { display: flex; gap: 6px; padding: 10px 12px 6px; flex-shrink: 0; }
.hist-modes { padding-top: 4px; }
.hist-preset, .hist-mode {
  flex: 1; border: 1px solid var(--line); background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; font-weight: 700; padding: 6px 4px;
  border-radius: 9px; cursor: pointer; white-space: nowrap;
}
.hist-preset.on, .hist-mode.on { background: var(--teal); color: #fff; border-color: var(--teal); }
/* Режимы — иконка + подпись (нарисованный UI, как в приле). */
.hist-mode { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 2px; }
.hist-mode svg { width: 21px; height: 21px; }
.hist-mode span { font-size: 10.5px; line-height: 1; }

/* Фильтр по времени суток. */
.hist-timerow { display: flex; align-items: center; gap: 7px; padding: 8px 12px 4px; font-size: 12.5px; color: var(--text); font-weight: 700; }
.hist-timerow input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; flex-shrink: 0; }
.hist-timerow-lbl { flex-shrink: 0; }
.hist-timerow input[type="time"] {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  border-radius: 8px; padding: 4px 6px; font: inherit; font-size: 12px; min-width: 0; width: 100%;
}
.hist-timerow input[type="time"]:disabled { opacity: .5; }
/* Тёмная тема: нативная иконка часов/календаря тёмная → инвертируем, чтобы была видна. */
:root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.4); }
.hist-dash { color: var(--muted); flex-shrink: 0; }
/* Кастомный диапазон дат. */
.hist-daterow { display: flex; align-items: center; gap: 7px; padding: 8px 12px 4px; font-size: 12.5px; color: var(--text); font-weight: 700; }
.hist-daysel {
  flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  border-radius: 8px; padding: 5px 6px; font: inherit; font-size: 12px; cursor: pointer;
}

/* Формат времени/даты. */
.hist-fmt { display: flex; align-items: center; gap: 8px; padding: 6px 12px 8px; flex-wrap: wrap; }
.hist-fmt-lbl { font-size: 12.5px; font-weight: 700; color: var(--text); }
.seg-mini { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg-mini button {
  border: none; background: transparent; color: var(--muted);
  font: inherit; font-size: 11.5px; font-weight: 700; padding: 5px 10px; cursor: pointer; white-space: nowrap;
}
.seg-mini button.on { background: var(--teal); color: #fff; }

/* Мультивыбор людей — цветные аватары (тап включает/выключает историю юзера).
   Цвет юзера в --uc задаётся инлайн из палитры. */
.hist-users {
  display: flex; gap: 10px; padding: 6px 12px 12px; overflow-x: auto; flex-shrink: 0;
  border-bottom: 1px solid var(--line-soft); scrollbar-width: thin;
}
.hist-user {
  position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  box-sizing: border-box; border: 3.5px solid var(--uc, var(--teal)); /* жирная цветная обводка — всегда */
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-weight: 800; font-size: 16px; color: #fff;
  background: var(--surface-2); opacity: .5; transition: opacity .15s, box-shadow .15s;
}
.hist-user img { width: 100%; height: 100%; object-fit: cover; }
/* Выбранный — на полную + внешнее кольцо того же цвета (ещё заметнее). */
.hist-user.on { opacity: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px var(--uc, var(--teal)); }

/* Свернуть/развернуть настройки фильтра — барабан остаётся. */
.hist-collapse {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  border: none; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700;
  padding: 7px; cursor: pointer; flex-shrink: 0;
}
.hist-collapse svg { width: 16px; height: 16px; transition: transform .2s; }
@media (hover: hover) { .hist-collapse:hover { color: var(--teal); } }.hist-collapsed .hist-scroll { display: none; }                 /* свёрнуто — прячем настройки */
.hist-collapsed .hist-collapse svg { transform: rotate(180deg); } /* шеврон вниз = развернуть */

/* Барабан-скраббер точек: крутишь → центральная точка → камера летит к ней.
   Высота 224, слот 46 → верхний/нижний паддинг 89 (=(224−46)/2), чтобы первый/
   последний слот доходили до центра. Рамка центра — в цвете сфокусированного юзера. */
.hist-drum-wrap { position: relative; flex: 0 0 auto; height: 224px; }
.hist-drum-wrap::before {
  content: ''; position: absolute; left: 10px; right: 10px; top: 50%; height: 46px;
  transform: translateY(-50%); border: 2px solid var(--focus-color, var(--teal)); border-radius: 12px;
  pointer-events: none; z-index: 2; opacity: .7;
}
/* Подсказка «крути ↕» — стрелки у правого края барабана. */
.hist-drum-hint {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  z-index: 3; color: var(--muted); opacity: .5; pointer-events: none;
}
.hist-drum-hint svg { width: 20px; height: 20px; }
/* Разовая анимация при первом входе в фильтр — подпрыгивает и подсвечивается,
   показывая, что барабан крутится (класс вешает/снимает JS, флаг в localStorage). */
.hist-drum-hint.hint-anim { color: var(--teal); opacity: 1; animation: drumHint 1.2s ease-in-out 2; }
@keyframes drumHint {
  0%, 100% { transform: translateY(-50%) scale(1); }
  20%      { transform: translateY(calc(-50% - 10px)) scale(1.2); }
  60%      { transform: translateY(calc(-50% + 10px)) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) { .hist-drum-hint.hint-anim { animation: none; } }
.hist-drum {
  height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; perspective: 900px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 89px 0;
}
.hist-drum::-webkit-scrollbar { display: none; }
.hist-slot {
  scroll-snap-align: center; height: 46px; display: flex; align-items: center; gap: 11px;
  padding: 0 16px; cursor: pointer; transform-origin: center;
}
/* Сфокусированный слот — подсветка цветом юзера (понятно, чья точка). */
.hist-slot.on { background: color-mix(in srgb, var(--uc, var(--teal)) 16%, transparent); border-radius: 12px; }
.hist-slot.on .hist-slot-name { color: var(--uc, var(--teal)); }
.hist-slot-ava {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
  font-size: 13px; color: #fff; box-shadow: 0 0 0 2px var(--uc, var(--teal));
}
.hist-slot-ava img { width: 100%; height: 100%; object-fit: cover; }
.hist-slot-main { min-width: 0; flex: 1; }
.hist-slot-name { font-weight: 600; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Дата/время — крупнее (но без жирного). */
.hist-slot-time { font-size: 15px; color: var(--text); font-weight: 400; letter-spacing: .2px; }
/* Фейд краёв барабана (эффект «цилиндра»). */
.hist-drum-mask {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(var(--surface), transparent 32%, transparent 68%, var(--surface));
}
.hist-empty { padding: 20px 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---- Попап маркера. Фон пузыря Mapbox белый → текст тёмный. ---- */
.mapboxgl-popup-content { border-radius: 14px !important; padding: 14px 16px !important; box-shadow: 0 12px 34px rgba(0,0,0,0.22) !important; }
.pop { min-width: 200px; }
.pop-head { display: flex; align-items: center; gap: 10px; }
.pop-ava {
  width: 38px; height: 38px; border-radius: 50%; background: #E8F5F3; color: #159C90;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
  overflow: hidden; flex-shrink: 0;
}
.pop-ava img { width: 100%; height: 100%; object-fit: cover; }
/* Обводка аватара в попапе — цвет по свежести/SOS, как у маркера на карте. */
.pop-ava.fresh { box-shadow: 0 0 0 2px #22C55E; }
.pop-ava.stale { box-shadow: 0 0 0 2px #94A3B8; }
.pop-ava.sos   { box-shadow: 0 0 0 2px #E12A3B; }
/* Имя — одна строка, длинное обрезаем многоточием (не вылезает за блок). */
.pop-name { font-weight: 800; color: #0D1B2A; font-size: 15px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Кнопка «Слушать» прямо в строке круга (для того, кто транслирует SOS-аудио). */
.person-listen {
  flex-shrink: 0; margin-left: auto; align-self: center;
  display: inline-flex; align-items: center; gap: 4px;
  background: #E12A3B; color: #fff; border: none; border-radius: 999px;
  padding: 6px 12px; font-weight: 800; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.person-listen:active { transform: scale(0.95); }
.pop-coords {
  display: flex; align-items: center; gap: 6px; color: #6C757D; font-size: 12.5px;
  margin-top: 10px; font-variant-numeric: tabular-nums;
}
.pop-coords svg { width: 14px; height: 14px; flex-shrink: 0; color: #159C90; }
.pop-addr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  margin-top: 10px; border: none; background: #159C90; color: #fff; font: inherit; font-size: 13px;
  font-weight: 700; padding: 9px 12px; border-radius: 10px; cursor: pointer;
}
.pop-addr-btn svg { width: 16px; height: 16px; }
@media (hover: hover) { .pop-addr-btn:hover { background: #12B3A5; } }.pop-addr-btn:disabled { opacity: 0.6; cursor: default; }
.pop-addr {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px; font-size: 13px; color: #0D1B2A; line-height: 1.45; max-width: 260px;
  background: #F2F8F7; border: 1px solid rgba(21,156,144,0.2); border-radius: 10px; padding: 9px 11px;
}
.pop-addr span { flex: 1; }
/* Кнопка «История» в попапе человека — заметный вход в историю. */
.pop-hist {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  margin-top: 10px; border: 1px solid #159C90; background: transparent; color: #159C90;
  font: inherit; font-size: 13px; font-weight: 700; padding: 9px 12px; border-radius: 10px; cursor: pointer;
}
.pop-hist svg { width: 16px; height: 16px; }
@media (hover: hover) { .pop-hist:hover { background: rgba(21,156,144,0.10); } }/* Попап точки истории: имя жирным + строка даты/времени. */
.hist-pop { font-size: 13px; line-height: 1.5; color: #1A2533; }
.hist-pop b { color: #0F1B2A; }
/* Кнопка «скопировать» (координаты/адрес). */
.pop-copy {
  flex-shrink: 0; margin-left: auto; border: none; background: transparent;
  color: #159C90; cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; align-items: center;
}
.pop-copy svg { width: 15px; height: 15px; }
@media (hover: hover) { .pop-copy:hover { background: rgba(21,156,144,0.12); } }.pop-copy.ok { color: #fff; background: #34A853; padding: 4px 8px; gap: 5px; }
@media (hover: hover) { .pop-copy.ok:hover { background: #34A853; } }.pop-copy.ok span { font-size: 12px; font-weight: 700; white-space: nowrap; }
/* Крупный крестик закрытия попапа. */
.mapboxgl-popup-close-button { font-size: 24px !important; width: 32px; height: 32px; color: #6C757D; line-height: 1; }
@media (hover: hover) { .mapboxgl-popup-close-button:hover { background: transparent !important; color: #0D1B2A; } }
/* Кнопка наклона 2D/3D — снизу слева (зум-контролы Mapbox — снизу справа). */
/* Вертикальный слайдер угла наклона (заменил кнопку 2D/3D). Тянешь бегунок ↕ — pitch 0…45°.
   Правый верхний угол, ПОД зумом +/− (панель круга слева не мешает). */
.tilt-slider {
  position: absolute; z-index: 5; right: 10px; top: 88px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 12px 11px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  user-select: none; -webkit-user-select: none; touch-action: none;
  transition: opacity .4s ease;   /* плавное авто-затухание на мобилке (класс .dim от JS) */
}
.tilt-val {
  font-size: 12px; font-weight: 800; color: var(--teal);
  font-variant-numeric: tabular-nums; letter-spacing: .2px;
}
.tilt-track {
  position: relative; width: 6px; height: 116px; border-radius: 3px;
  background: var(--line); cursor: pointer;
}
.tilt-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 66%;
  border-radius: 3px; background: var(--teal);
}
.tilt-thumb {
  position: absolute; left: 50%; bottom: 66%;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); border: 3px solid var(--surface);
  box-shadow: 0 3px 9px rgba(0,0,0,0.30);
  transform: translate(-50%, 50%); cursor: grab;
  transition: box-shadow .12s ease;
}
.tilt-thumb::after {  /* мини-грип: две риски, намёк «тянуть» */
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 6px; transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--surface), var(--surface)) top/100% 2px no-repeat,
    linear-gradient(var(--surface), var(--surface)) bottom/100% 2px no-repeat;
  opacity: .9;
}
.tilt-thumb.drag, .tilt-thumb:active { cursor: grabbing; box-shadow: 0 4px 14px rgba(0,0,0,0.40); }
.tilt-slider:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Зум +/− (Mapbox) под тему сайта. На тёмной — тёмный фон и светлые иконки
   (по умолчанию контрол белый и не вписывается в тёмный UI). */
:root[data-theme="dark"] .mapboxgl-ctrl-group {
  background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
:root[data-theme="dark"] .mapboxgl-ctrl-group button + button { border-top: 1px solid var(--line); }
@media (hover: hover) { :root[data-theme="dark"] .mapboxgl-ctrl-group button:hover { background-color: var(--surface-2); } }:root[data-theme="dark"] .mapboxgl-ctrl-group .mapboxgl-ctrl-icon { filter: invert(1) brightness(1.2); }

/* Грабер сворачивания панели — только на малых экранах. */
.panel-grab { display: none; }
.empty-icon-amber { background: linear-gradient(150deg, #ffc24d, var(--amber)); box-shadow: 0 12px 30px rgba(222,132,8,0.35); }
.pop-sos { margin-top: 10px; padding-top: 10px; border-top: 1px solid #EEE; }
.pop-sos-lbl {
  display: inline-block; background: #E12A3B; color: #fff; font-weight: 800;
  font-size: 11px; letter-spacing: .5px; padding: 3px 8px; border-radius: 6px;
}
.pop-listen {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 8px; width: 100%; border: none; background: #E12A3B;
  color: #fff; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 12px;
  border-radius: 8px; cursor: pointer;
}
.listen-ic { width: 15px; height: 15px; flex-shrink: 0; }
/* Идёт трансляция звука: анимированный эквалайзер + пульс кнопки — видно, что нажата и играет. */
.listen-eq { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.listen-eq i { width: 3px; height: 13px; background: currentColor; border-radius: 2px; transform-origin: center; animation: eqBar .85s ease-in-out infinite; }
.listen-eq i:nth-child(2) { animation-delay: .22s; }
.listen-eq i:nth-child(3) { animation-delay: .44s; }
@keyframes eqBar { 0%, 100% { transform: scaleY(.32); } 50% { transform: scaleY(1); } }
.person-listen.on, .pop-listen.on { animation: listenPulse 1.4s ease-in-out infinite; }
@keyframes listenPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(225,42,59,.45); } 60% { box-shadow: 0 0 0 7px rgba(225,42,59,0); } }
@media (hover: hover) { .pop-listen:hover { filter: brightness(1.05); } }.pop-noaudio { margin-top: 8px; font-size: 12.5px; color: #6C757D; line-height: 1.4; max-width: 240px; }

/* ---- Регулятор громкости приёма SOS-аудио (в строке списка того, кого слушаем) ---- */
/* Пока слушаем — строка круга переносится на 2-ю линию: сверху аватар+имя+«Стоп»,
   снизу во всю ширину — регулятор. Адаптивно (десктоп-панель и мобильная шторка). */
.person.listening { flex-wrap: wrap; }
.sos-vol {
  flex-basis: 100%; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  cursor: default;
}
.sv-mute {
  flex-shrink: 0; width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 9px; cursor: pointer;
  background: rgba(225,42,59,0.12); color: var(--sos);
  transition: background .15s ease, transform .1s ease;
}
.sv-mute svg { width: 17px; height: 17px; }
.sv-mute:active { transform: scale(0.94); }
@media (hover: hover) { .sv-mute:hover { background: rgba(225,42,59,0.20); } }
.sv-val {
  flex-shrink: 0; min-width: 42px; text-align: right;
  font-size: 12px; font-weight: 800; color: var(--sos);
  font-variant-numeric: tabular-nums; letter-spacing: .2px;
}
/* Буст (>100%) — усиление сверх натуральной громкости: % янтарным, чтобы отличать. */
.sos-vol.boost .sv-val { color: var(--amber); }
/* Нативный range под тему: залитая часть — SOS-красная (по --pct), остаток — трек;
   бегунок — красный кружок с окантовкой цвета surface (как tilt-thumb на карте). */
.sv-slider {
  flex: 1 1 auto; min-width: 0; height: 22px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.sv-slider:focus-visible { outline: 2px solid var(--sos); outline-offset: 3px; border-radius: 4px; }
.sv-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--sos) var(--pct, 100%), var(--line) var(--pct, 100%));
}
.sv-slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.sv-slider::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--sos); }
.sv-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
  background: var(--sos); border: 3px solid var(--surface);
  box-shadow: 0 2px 6px rgba(0,0,0,0.30);
}
.sv-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--sos); border: 3px solid var(--surface);
  box-shadow: 0 2px 6px rgba(0,0,0,0.30);
}
@media (hover: hover) { .sv-slider:hover::-webkit-slider-thumb { box-shadow: 0 3px 9px rgba(0,0,0,0.40); } }