/* Гостевой просмотр: страница, открытая по ссылке тем, кто ещё не вошёл.
 *
 * Отдельным файлом, потому что экран живёт только в веб-клиенте: `web.html`
 * подключает этот файл, `index.html` — нет. Окно программы гостей не принимает
 * вовсе: за ним стоит своё хранилище, и «гостя» там не бывает.
 *
 * Мобильная в первую очередь и без оговорок. По присланной ссылке приходят с
 * телефона, из чужого мессенджера, одной рукой и часто на ходу: узкая колонка,
 * крупные цели нажатия, поля от края и нижний отступ, считающийся от
 * безопасного поля, — иначе на iPhone кнопка садится ровно на полосу жеста
 * «домой».
 *
 * Ничего с `!important`: файл подключается после `app.css` и перекрывает его
 * обычным каскадом. Откат — снять одну строку из `web.html`: экран собран из
 * общих частей и останется рабочим, только теснее.
 */

.guest {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
}

/* ── Шапка: знак, «назад», язык ───────────────────────────────────────────── */

/* Липкая, а не уезжающая вверх: язык нужен ровно тому, кто дочитал до середины
 * и понял, что читает не на своём. Отправлять его за этим наверх — значит
 * потерять место, где он был. */
.guest-top {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: max(10px, env(safe-area-inset-top, 0px)) 12px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.guest-mark { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.guest-mark .mvq-mark { height: 26px; width: auto; }

/* Три языка — три коротких слова: полке вкладок здесь не место, они помещаются
 * в строку на самом узком телефоне. */
.guest-lang { flex: none; gap: 4px; }
.guest-lang .chip { padding: 8px 8px; font-size: var(--fs-xs); min-height: 32px; }

/* ── Содержимое ───────────────────────────────────────────────────────────── */

.guest-body {
  flex: 1 1 auto;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--s4) 16px var(--s5);
  overflow-wrap: anywhere;
}

/* Полоса приглашения: почему человек здесь. Стоит до карточки — он нажал на
 * друга, а не на «зарегистрироваться», и первым должен прочитать именно это. */
.guest-invite {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s3);
  margin-bottom: var(--s3);
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}
.guest-invite .ic { flex: none; color: var(--accent); margin-top: 2px; }
.guest-invite b { display: block; }
.guest-invite .small { color: var(--muted); font-size: var(--fs-sm); }

.guest-card {
  padding: var(--s4);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--line);
}

.guest-card h1 {
  font-size: var(--fs-lg);
  line-height: 1.25;
  margin: 0 0 4px;
}

/* Лицо человека или сообщества — круг: так его показывает и лента, и превью в
 * чужом чате, и разный вид одного лица в трёх местах читается как три разных
 * места. */
.guest-face {
  display: block;
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--s3);
  background: var(--surface2);
}

/* Картинка записи — во всю ширину карточки: это и есть то, чем поделились. */
.guest-shot {
  display: block;
  width: calc(100% + var(--s4) * 2);
  margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s3);
  border-radius: var(--r-card) var(--r-card) 0 0;
  max-height: 60vh;
  object-fit: cover;
  background: var(--surface2);
}

.guest-when { color: var(--muted); font-size: var(--fs-sm); margin: 4px 0; }
.guest-text { margin: var(--s3) 0 0; white-space: pre-wrap; line-height: var(--lh); }

.guest-h2 {
  font-size: var(--fs-md);
  margin: var(--s5) 0 var(--s2);
}

.guest-empty, .guest-foot, .guest-loading {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh);
  margin: var(--s4) 0 0;
}

/* ── Открытые записи ──────────────────────────────────────────────────────── */

.guest-items { display: flex; flex-direction: column; gap: var(--s2); }

/* Ссылкой, а не кнопкой, и это решение: адрес записи должен быть виден в
 * строке состояния браузера, копироваться правой кнопкой и открываться в
 * соседней вкладке. Кнопка не умеет ничего из этого. */
.guest-item {
  display: flex;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  min-height: var(--tap-touch);
}
.guest-item:active { background: var(--surface2); }
.guest-item b { display: block; margin-bottom: 4px; }

.guest-item-shot {
  flex: none;
  width: 84px; height: 84px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--surface2);
}

.guest-item-body { min-width: 0; flex: 1 1 auto; }

/* Три строки текста и не больше: список записей отвечает на вопрос «о чём этот
 * человек пишет», а не заменяет чтение. */
.guest-item-text {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.guest-state { padding: var(--s6) 0; }
.guest-state .ic { color: var(--muted); }

/* ── Дверь внизу ──────────────────────────────────────────────────────────── */

/* Липкая снизу, а не всплывающая поверх: предложение войти не должно закрывать
 * то, ради чего человек пришёл. Оно всегда под рукой и всегда на своём месте —
 * там, где на телефоне и держат большой палец. */
.guest-gate {
  position: sticky;
  bottom: 0;
  z-index: 3;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--s3) 16px calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.guest-gate b { display: block; }
.guest-gate .small { color: var(--muted); font-size: var(--fs-sm); margin: 2px 0 var(--s3); }

.guest-gate-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.guest-gate-row .btn { flex: 1 1 auto; min-height: var(--tap-touch); }

/* «Поделиться» рядом с двумя главными кнопками, но не вровень с ними: гость
 * пришёл читать, а не пересылать, и третья кнопка одного веса превратила бы
 * выбор из двух в выбор из трёх. */
.guest-share { flex: 0 0 auto; }
.guest-install { margin-top: var(--s2); min-height: var(--tap-touch); }
.guest-gate .card-note { margin: var(--s2) 0 0; font-size: var(--fs-xs); }

/* Скелет: полосы на местах будущего текста. Не колесо — колесо посреди пустоты
 * выглядит одинаково и на медленной сети, и на сломанной странице. */
.guest-card .sk {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg,
    var(--surface2) 25%,
    color-mix(in srgb, var(--surface2) 60%, var(--line)) 37%,
    var(--surface2) 63%);
  background-size: 400% 100%;
  animation: guest-shimmer 1.4s ease infinite;
}
.guest-card .sk-face { width: 72px; height: 72px; border-radius: 50%; margin-bottom: var(--s3); }
.guest-card .sk-line { height: 14px; margin-bottom: 8px; }
.guest-card .sk-line.w80 { width: 80%; }
.guest-card .sk-line.w60 { width: 60%; }
.guest-card .sk-line.w40 { width: 40%; }

@keyframes guest-shimmer {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

/* Движение выключено там, где человек попросил его выключить. Полосы остаются
 * на местах, просто не переливаются. */
@media (prefers-reduced-motion: reduce) {
  .guest-card .sk { animation: none; }
}

/* Компьютер: колонка та же, но воздуха больше. Расширять её нельзя — длина
 * строки, а не ширина окна, решает, читается текст или нет. */
@media (min-width: 900px) {
  .guest-body { padding-top: var(--s5); }
  .guest-card h1 { font-size: var(--fs-xl); }
}