/* Эхо города — дизайн-токены (согласовано 2026-08-01)
   Тёмная: градиент синий→фиолетовый + grain, акцент #B7A6FF
   Светлая: монохром + акцент #0E9EB0 */
:root {
  --star: #FFB800;
  --danger: #FF5C5C;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
:root, [data-theme="dark"] {
  --accent: #B7A6FF;
  --accent-ink: #1B1437;
  --bg: #0B1026;
  --bg-grad: radial-gradient(120% 90% at 20% 0%, #14245C 0%, #1A1B4B 45%, #2A1B5E 75%, #3B2170 100%);
  --bg-sheet: #181C33;
  --bg-card: #1F2340;
  --text: #F0EFFC;
  --text-sec: #9B94C4;
  --border: #2E3460;
}
[data-theme="light"] {
  --accent: #0E9EB0;
  --accent-ink: #FFFFFF;
  --bg: #F5F5F6;
  --bg-grad: linear-gradient(160deg, #FAFAFB 0%, #EFEFF1 100%);
  --bg-sheet: #FFFFFF;
  --bg-card: #F1F1F3;
  --text: #111114;
  --text-sec: #6E6E75;
  --border: #E1E1E5;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  background-image: var(--grain), var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);
  height: 100dvh;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

#screen-map { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; }

#map { position: fixed; inset: 0; }

.me-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 4px solid var(--accent);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Точка «я» — человечек, синий: не путать с бирюзовыми метками эхов */
.me-person {
  width: 34px; height: 34px; border-radius: 50%;
  background: #4285F4; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 8px rgba(66,133,244,.18), 0 2px 10px rgba(0,0,0,.3);
}
.me-person svg { width: 20px; height: 20px; }

/* Кнопка «вернуться ко мне» — над зум-контролами */
.locate-btn {
  display: none;
  position: fixed; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 200px);
  width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--bg-sheet); color: var(--accent);
  align-items: center; justify-content: center; cursor: pointer; z-index: 20;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.locate-btn.show { display: flex; }
.locate-btn.away { color: var(--danger); }

/* Кластер меток */
.cluster-marker {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 16px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.3);
  cursor: pointer; transform-origin: center;
}
.echo-marker.spider {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent), 0 2px 10px rgba(0,0,0,.3);
}
.echo-marker { transform-origin: center; }

.geo-status {
  position: fixed; top: calc(env(safe-area-inset-top) + 16px); left: 50%; transform: translateX(-50%);
  background: var(--bg-sheet); border: 1px solid var(--border); color: var(--text-sec);
  font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 20px; white-space: nowrap;
}
.geo-status.ok { color: var(--accent); }
.geo-status.warn { color: var(--text-sec); max-width: 86vw; white-space: normal; text-align: center; }
.geo-status.err { color: var(--danger); }

/* атрибуция карты — мелкая, полупрозрачная, не мешает */
.maplibregl-ctrl-attrib {
  background: color-mix(in srgb, var(--bg-sheet) 70%, transparent) !important;
  font-size: 10px !important;
  margin-top: calc(env(safe-area-inset-top) + 4px);
}
.maplibregl-ctrl-attrib a { color: var(--text-sec) !important; }

/* ── Запись эха ── */
.rec-fab {
  position: fixed; bottom: calc(env(safe-area-inset-bottom) + 28px); left: 50%; transform: translateX(-50%);
  width: 68px; height: 68px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
  z-index: 20;
}
.rec-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: none; align-items: flex-end; z-index: 30;
}
.rec-overlay.open { display: flex; }
.rec-box {
  position: relative;
  width: 100%; background: var(--bg-sheet); border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--border);
  padding: 24px 20px calc(env(safe-area-inset-bottom) + 24px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.overlay-close { position: absolute; top: 14px; right: 14px; }
.rec-title { font-size: 18px; font-weight: 700; }
.rec-time { font-size: 52px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rec-stop {
  width: 76px; height: 76px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--danger); display: flex; align-items: center; justify-content: center;
}
.rec-stop i { width: 26px; height: 26px; border-radius: 6px; background: #fff; }
.rec-hint { font-size: 13px; color: var(--text-sec); }
.rec-done { display: none; width: 100%; flex-direction: column; gap: 10px; }
.rec-done.open { display: flex; }
.rec-done audio { width: 100%; }
.rec-done input {
  width: 100%; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 15px;
}
.btn-save {
  width: 100%; min-height: 52px; border-radius: 16px; border: none; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 700;
}
.btn-cancel { background: none; border: none; color: var(--text-sec); font-size: 14px; cursor: pointer; padding: 8px; }

/* OAuth-кнопки регистрации (Яндекс ID / VK ID) */
.reg-oauth { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.reg-oauth[hidden] { display: none; }
.reg-oauth-btns { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.reg-oauth-btn {
  width: 100%; min-height: 48px; border-radius: 14px; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700;
}
.reg-oauth-yandex { background: #FC0; color: #000; }
.reg-oauth-vk { background: #0077FF; color: #fff; }
.reg-oauth-div {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-size: 12px; color: var(--text-sec);
}
.reg-oauth-div::before, .reg-oauth-div::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* Чипы самомаркировки */
.chips-label { font-size: 13px; font-weight: 700; color: var(--text-sec); align-self: flex-start; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.chip {
  padding: 10px 16px; min-height: 44px; border-radius: 22px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text); font-size: 14px; font-weight: 600;
}
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ── Маркер эха ── */
.echo-marker {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  cursor: pointer;
  position: relative;
}
.echo-marker::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-ink);
}

.splash { text-align: center; }
.splash h1 { font-size: 28px; font-weight: 800; letter-spacing: .5px; }
.splash p { color: var(--text-sec); font-size: 14px; margin-top: 8px; }

.theme-fab {
  position: fixed; top: calc(env(safe-area-inset-top) + 16px); right: 16px;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--bg-sheet); border: 1px solid var(--border);
  color: var(--text); font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ── Превью эха (bottom sheet) ── */
.echo-sheet {
  position: fixed; inset: 0; z-index: 25;
  display: flex; align-items: flex-end;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background .25s;
}
.echo-sheet.open { background: rgba(0,0,0,.35); pointer-events: auto; }
.es-card {
  width: 100%; background: var(--bg-sheet); border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--border);
  padding: 16px 16px calc(env(safe-area-inset-bottom) + 16px);
  display: flex; flex-direction: column; gap: 10px;
  transform: translateY(100%); transition: transform .28s ease-out;
  max-height: 65vh; /* фолбэк для браузеров без dvh */
  max-height: 65dvh;
  overflow-y: auto;
}
.echo-sheet.open .es-card { transform: translateY(0); }
.es-head { display: flex; align-items: flex-start; gap: 12px; }
.es-head-text { flex: 1; min-width: 0; }
.es-name { font-size: 19px; font-weight: 800; word-break: break-word; }
.es-meta { font-size: 13px; color: var(--text-sec); margin-top: 3px; }
.es-close {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text-sec); font-size: 15px; cursor: pointer;
}
.es-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-sec); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.es-avatar svg { width: 30px; height: 30px; }
.es-avatar img { width: 100%; height: 100%; object-fit: cover; }
.es-stats { font-size: 14px; color: var(--text-sec); white-space: pre-line; }
.es-dist { font-size: 15px; font-weight: 700; color: var(--text-sec); }
.es-dist.here { color: var(--accent); }
.es-play { font-size: 17px; }
.es-play:disabled { opacity: .45; cursor: default; }

.es-rate { display: none; flex-direction: column; gap: 10px; }
.es-rate.open { display: flex; }
.es-rate-title { font-size: 15px; font-weight: 700; }
.es-stars { display: flex; gap: 6px; }
.es-star {
  width: 48px; height: 48px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-card);
  font-size: 24px; color: var(--text-sec);
}
.es-star.on { color: var(--star); border-color: var(--star); }
.es-rate textarea {
  width: 100%; padding: 12px 14px; border-radius: 14px; resize: none;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text); font-size: 15px; font-family: inherit;
}
.es-comments { display: flex; flex-direction: column; gap: 6px; }
.es-comment {
  font-size: 14px; color: var(--text); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px;
}
.es-report { align-self: center; }

/* ── Верхние кнопки (меню-аватар) ── */
.top-btn {
  position: fixed; top: calc(env(safe-area-inset-top) + 16px);
  width: 48px; height: 48px; border-radius: 14px; z-index: 20;
  background: var(--bg-sheet); border: 1px solid var(--border);
  color: var(--text); font-size: 14px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.menu-btn { right: 16px; padding: 4px; }
.menu-avatar { width: 100%; height: 100%; border: none; border-radius: 10px; }
.menu-avatar svg { width: 24px; height: 24px; }

/* Попап меню */
.menu-popup {
  position: fixed; top: calc(env(safe-area-inset-top) + 72px); right: 16px; z-index: 26;
  background: var(--bg-sheet); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  display: none; flex-direction: column; min-width: 180px; overflow: hidden;
}
.menu-popup.open { display: flex; }
.menu-item {
  padding: 14px 18px; min-height: 48px; text-align: left; cursor: pointer;
  background: none; border: none; color: var(--text);
  font-size: 15px; font-weight: 600; font-family: inherit;
}
.menu-item + .menu-item { border-top: 1px solid var(--border); }
.menu-item:active { background: var(--bg-card); }

/* ── Профиль ── */
.prof-box { max-height: 80vh; max-height: 80dvh; overflow-y: auto; }
.prof-avatar { width: 72px; height: 72px; }
.prof-avatar svg { width: 42px; height: 42px; }
.prof-box input, .prof-box textarea {
  width: 100%; padding: 14px 16px; border-radius: 14px; resize: none;
  border: 1px solid var(--border); background: var(--bg-card);
  color: var(--text); font-size: 15px; font-family: inherit;
}
.prof-list { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.prof-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px; cursor: pointer;
}
.prof-item-name { font-size: 15px; font-weight: 700; word-break: break-word; }
.prof-item-meta { font-size: 13px; color: var(--text-sec); margin-top: 3px; }
.prof-empty { font-size: 14px; color: var(--text-sec); text-align: center; padding: 8px; }

/* Стоп-слово: подсветка поля для исправления (решение Михаила 2026-08-02) */
.input-warn { border-color: #E53935 !important; box-shadow: 0 0 0 3px rgba(229,57,53,.18); }

/* ── Баннер согласия (152-ФЗ) ── */
.consent-banner {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60; display: flex; align-items: center; gap: 12px;
  background: var(--bg-sheet); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.consent-text { flex: 1; font-size: 13px; line-height: 1.45; color: var(--text-sec); }
.consent-text a { color: var(--accent); }
.consent-accept {
  flex-shrink: 0; background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 12px; padding: 12px 18px;
  font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
}
@media (max-width: 420px) {
  .consent-banner { flex-direction: column; align-items: stretch; }
}

/* hidden проигрывает display:flex — явное правило (баг: баннер не прятался) */
.consent-banner[hidden] { display: none; }

/* ── Бейджи тарифа и верификации у аватара профиля ── */
.prof-avatar-wrap { position: relative; display: inline-block; }
.prof-badge {
  position: absolute; bottom: -3px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-sheet); color: #fff;
}
.prof-badge svg { width: 14px; height: 14px; }
.prof-badge-left { left: -4px; }
.prof-badge-right { right: -4px; }
.prof-badge-premium { background: #1E8CFF; }              /* ярко-синий, белая звезда */
.prof-badge-business { background: #7C5CFC; font-weight: 800; font-size: 13px; line-height: 1; }
.prof-badge-verified { background: #22C55E; }             /* ярко-зелёный, белая галочка */

/* бейджи в превью эха — мельче, чем в профиле */
.echo-sheet .prof-badge { width: 18px; height: 18px; bottom: -2px; }
.echo-sheet .prof-badge svg { width: 11px; height: 11px; }
.echo-sheet .prof-badge-business { font-size: 10px; }
.echo-sheet .prof-badge-left { left: -2px; }
.echo-sheet .prof-badge-right { right: -2px; }