/* ==========================================================================
   Geo — геопозиция в ленте и полноэкранная карта.
   Использует токены из style.css; своей палитры не заводит.
   ========================================================================== */

/* ---- карточка в пузыре --------------------------------------------------
   Пузырь-хозяин получает класс wk-host (общий с задачами/опросами): он
   снимает фон и отступы, иначе акцентный градиент исходящего покрасил бы
   карту и она перестала бы читаться. */
.geo-card{
  min-width:min(260px,100%);max-width:340px;box-sizing:border-box;
  border-radius:var(--radius);background:var(--panel-2);
  border:1px solid var(--border);overflow:hidden;margin:2px 0 4px;
  cursor:pointer;transition:border-color .15s;
}
.geo-card:hover{border-color:var(--accent-glow)}
.msg-row.out .geo-card{
  background:linear-gradient(0deg,var(--accent-soft),var(--accent-soft)),var(--panel-2);
  border-color:var(--accent-glow);
}
.geo-card.geo-stale{opacity:.72}

/* ---- поверхность с тайлами --------------------------------------------- */
.geo-surface{position:relative;aspect-ratio:3/2;background:var(--hover);overflow:hidden}
.geo-grid{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  grid-template-rows:repeat(var(--rows),1fr);
}
.geo-tile{width:100%;height:100%;object-fit:cover;display:block;background:var(--hover)}
/* Тёмная тема без тёмного набора тайлов. Инверсия с поворотом оттенка —
   компромисс: вода остаётся синеватой, зелень не уходит в пурпур. */
.geo-tile-inv{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9)}

/* ---- метка --------------------------------------------------------------
   Метка — НАКЛАДКА поверх тайлов: она двигается сменой left/top, а картинки
   при этом не перезагружаются. Пузырь не мигает при движении человека. */
.geo-pin{
  position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:var(--text-2);
  border:2px solid var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.35);
  transition:left .6s ease-out,top .6s ease-out;
}
.geo-pin-self{background:var(--accent)}
.geo-pin-stale{background:var(--muted)}
.geo-pin-label{
  position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%);
  white-space:nowrap;font-size:11px;color:var(--text);
  background:var(--panel);border:1px solid var(--border);
  border-radius:6px;padding:1px 6px;
}
/* Индикатор «идёт прямо сейчас». Намеренно НЕ круглая точка: залитый кружок
   того же цвета читался рядом с метками как третий участник. */
.geo-pulse{
  position:absolute;right:6px;top:6px;padding:1px 6px;border-radius:7px;
  font-size:10px;line-height:14px;font-weight:700;letter-spacing:.04em;
  color:var(--on-accent,#FFF7F0);background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-glow);animation:geo-pulse 2s infinite;
}
.geo-pulse::after{content:'LIVE'}
@keyframes geo-pulse{
  0%{box-shadow:0 0 0 0 var(--accent-glow)}
  70%{box-shadow:0 0 0 10px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){
  .geo-pulse{animation:none}
  .geo-pin{transition:none}
}

/* ---- схема взаимного расположения (карта отключена) ---------------------
   Не заглушка, а рабочий режим по умолчанию: в закрытом контуре тайлов нет,
   но «кто где друг относительно друга» показать можно и нужно. */
.geo-scheme{position:absolute;inset:0;background:var(--panel)}
.geo-scheme-grid{
  position:absolute;inset:0;opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:28px 28px;
}
.geo-scheme-dist{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  font-size:11px;color:var(--text-2);background:var(--panel-2);
  border:1px solid var(--border);border-radius:8px;padding:2px 8px;
}
.geo-scheme-big{position:relative;inset:auto;width:100%;height:100%;min-height:320px}
.geo-scheme-note{
  padding:8px 12px;font-size:12px;color:var(--muted);text-align:center;
}

/* ---- подпись под картой ------------------------------------------------- */
.geo-foot{padding:8px 10px 9px}
.geo-title{font-size:13px;font-weight:600;color:var(--text)}
.geo-sub{
  margin-top:2px;font-size:12px;color:var(--text-2);
  display:flex;gap:5px;flex-wrap:wrap;align-items:baseline;
}
.geo-coords{font-variant-numeric:tabular-nums;color:var(--muted)}
.geo-warn{color:var(--danger,#E5484D)}
.geo-peers{color:var(--muted)}
.geo-stop{
  display:block;width:100%;border:0;border-top:1px solid var(--border);
  background:transparent;color:var(--accent);font:inherit;font-size:12px;
  padding:7px 0;cursor:pointer;
}
.geo-stop:hover{background:var(--accent-soft)}

/* ---- полноэкранный оверлей ----------------------------------------------
   Живёт ВНЕ #msgList: лента пересобирается целиком на каждом событии, и
   карта внутри неё уничтожалась бы вместе с зумом и слушателями. */
.geo-host{
  position:fixed;inset:0;z-index:70;
  background:rgba(0,0,0,.55);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.geo-panel{
  width:min(920px,100%);height:min(78vh,720px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.geo-panel-head{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--border);flex:none;
}
.geo-panel-title{font-weight:600;flex:1}
.geo-close{
  border:0;background:transparent;color:var(--text-2);cursor:pointer;
  font-size:16px;line-height:1;padding:4px 8px;border-radius:8px;
}
.geo-close:hover{background:var(--hover);color:var(--text)}
.geo-panel-body{flex:1;min-height:0;position:relative;background:var(--hover)}
.geo-panel-scheme{display:flex;flex-direction:column;background:var(--panel)}
.geo-empty{margin:auto;color:var(--muted);font-size:13px}

/* Метка на карте Leaflet — divIcon, поэтому размер задаём здесь. */
.geo-divicon{background:none;border:0}
.geo-mark{
  width:18px;height:18px;border-radius:50%;background:var(--text-2);
  border:3px solid var(--panel);box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.geo-mark-self{background:var(--accent)}
.geo-mark-stale{background:var(--muted);opacity:.7}

.geo-legend{
  flex:none;border-top:1px solid var(--border);padding:6px 12px 10px;
  max-height:30%;overflow:auto;
}
.geo-legend-row{
  display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px;
}
.geo-dot{
  width:10px;height:10px;border-radius:50%;background:var(--text-2);flex:none;
}
.geo-dot-self{background:var(--accent)}
.geo-legend-name{font-weight:600;color:var(--text)}
.geo-legend-time{color:var(--text-2)}
.geo-legend-coords{
  margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;
}
.geo-legend-stop{
  border:0;background:transparent;color:var(--accent);font:inherit;
  font-size:12px;cursor:pointer;padding:2px 6px;border-radius:6px;
}
.geo-legend-stop:hover{background:var(--accent-soft)}
/* Атрибуция OSM (ODbL) — требование лицензии, а не украшение. */
.geo-attr{margin-top:6px;font-size:11px;color:var(--muted)}

@media (max-width:640px){
  .geo-host{padding:0}
  .geo-panel{width:100%;height:100%;border-radius:0;border:0}
  .geo-card{max-width:100%}
  .geo-legend-coords{display:none}
}