/* Приложение на телефоне: безопасные поля и полоса сообщений.
 *
 * Отдельный файл, а не строки в app.css: всё здесь относится к одному случаю
 * — странице, открытой ярлыком с домашнего экрана. В окне настольного клиента
 * ни одно из этих правил не срабатывает, и путать их с общим оформлением
 * незачем.
 */

/* ── Безопасные поля ─────────────────────────────────────────────────────── */

/* На iPhone ярлык открывается под строкой состояния: так велит
 * `apple-mobile-web-app-status-bar-style: black-translucent`, и без него
 * вверху висела бы чужая непрозрачная плашка. Плата за это — вернуть высоту
 * строки состояния руками; иначе шапка ленты лезет под часы.
 *
 * Только в режиме приложения: во вкладке браузера эти отступы дал бы сам
 * браузер, и мы добавили бы вторые. */
@media (display-mode: standalone) {
  .social-head {
    height: calc(var(--head) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* Нижняя полка навигации ленты уже учитывает safe-area (alpha2.css), здесь
   * остаётся боковое поле: в альбомной ориентации вырез забирает край.
   *
   * ⚠️ Голое `env()` здесь — известная ошибка, и она починена не тут.
   * В книжной ориентации вырез слева равен нулю, и это правило перебивает
   * собственные поля ленты буквальным нулём: записи упираются в самый край
   * экрана. Разбор целиком и починка — в `pwa-shell.css` (`max(12px, …)`,
   * два раза: для всех ширин и для узкого экрана). Он подключается ПОСЛЕ и
   * той же специфичности, поэтому в вебе побеждает он, и строки ниже до
   * экрана не доходят вовсе.
   *
   * Почему они всё-таки остались: этот файл подключает и окно программы
   * (`index.html`), где `pwa-shell.css` нет. Правка значения здесь меняла бы
   * поля настольного окна — а его этот срез не трогает. */
  .social-page {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* ── Вырез сбоку: полки и панели во всю ширину ────────────────────────────────
 *
 * Блок стоит ВНЕ `display-mode: standalone`, и это не оплошность.
 * `viewport-fit=cover` из `web.html` пускает страницу под вырез не только у
 * ярлыка, но и во вкладке: в альбомной ориентации «чёлка» закрывает левый край
 * и в Safari. Спрятать эти правила в режим приложения значило бы починить
 * ярлык и оставить сломанной вкладку — а разница между ними читается как
 * случайная поломка.
 *
 * `max()` по той же причине, что и выше: в книжной ориентации вырез равен
 * нулю, и голое `env()` обнулило бы собственные поля.
 *
 * `env(...)` записан прямо, а не через `--safe-l` из `pwa-shell.css`: этот файл
 * подключает и окно программы (`index.html`), где `pwa-shell.css` нет вовсе.
 * Неизвестная переменная внутри `max()` делает всё объявление недействительным
 * — то есть на столе поля пропали бы совсем. На столе вырез равен нулю, и все
 * значения остаются прежними: 12, 18 и 20 точек. */
@media (max-width: 900px) {
  /* Полки во всю ширину колонки: истории и отборы ленты. Обе стоят прямо в
   * `.social-main`, то есть поля `.social-page` до них не доходят — своё поле
   * у каждой своё, и вырез надо учесть в нём. */
  .stories,
  .modes-row {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }

  /* Нижняя панель и полноэкранная форма телефона. Низ у обеих уже посчитан
   * (`app.css`, `.sheet-foot` и `.screen-foot`), а бока — нет: в альбомной
   * ориентации заголовок, текст и кнопка «Опубликовать» уходили левым краем
   * под вырез. */
  .sheet-head {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  .screen-head {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  .sheet-body,
  .screen-body {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .sheet-foot,
  .screen-foot {
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }
}

/* ── Полоса сообщений ────────────────────────────────────────────────────── */

/* Одна строка внизу: обновление, подсказка про ярлык, «нет сети». Не окно
 * поверх экрана — ни одно из этих сообщений не стоит того, чтобы закрывать
 * собой то, ради чего человек открыл приложение. */
.pwa-bar {
  position: fixed;
  left: 12px; right: 12px;
  /* Над нижней навигацией, а не под ней: полоса, спрятанная за полкой кнопок,
   * не сообщение, а секрет. */
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 92%, var(--text));
  color: var(--text);
  box-shadow: 0 6px 24px rgb(0 0 0 / .35);
  font-size: var(--fs-sm);
}

.pwa-bar-text { flex: 1; min-width: 0; }

.pwa-bar-close {
  flex: none;
  min-width: 44px; min-height: 44px;
  border: 0; background: transparent; color: var(--muted);
  font-size: var(--fs); line-height: 1;
  border-radius: var(--radius);
}

.pwa-bar-close:hover { color: var(--text); }

/* ── Знакомство: лицо и согласие ──────────────────────────────────────────── */

/* Кружок с выбранным снимком. Пустой он тоже виден — иначе кнопка «выбрать»
 * висит в пустоте, и непонятно, к чему она относится. */
.setup-face {
  width: 96px; height: 96px;
  margin: 8px 0 8px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface2);
  border: 1px solid var(--line);
}

.setup-face img { width: 100%; height: 100%; object-fit: cover; }

/* Строка с флажком: вся строка нажимается, а не один квадратик в четыре
 * миллиметра. */
.row-check {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;
  margin-top: 8px;
  cursor: pointer;
}

/* ── Сторож конца ленты ───────────────────────────────────────────────────── */

/* Метка, по которой подгружается следующая страница. Не «невидимый div»:
 * у элемента нулевой высоты нет и площади, а наблюдатель следит именно за
 * пересечением площадей — один пиксель делает его надёжным. */
.feed-sentinel { height: 1px; margin: 0; }

/* ── Ролики ───────────────────────────────────────────────────────────────── */

/* Вертикальная лента: одна карточка на экран, прилипание к границам.
 * Прокрутка живёт внутри самой ленты, а не страницы: так нижняя навигация
 * остаётся на месте, а не уезжает вместе с роликом. */
.clips-wrap {
  position: relative;   /* кнопка «снять» садится по этому краю */
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  background: #000;
}

.clip-card {
  position: relative;
  height: 100%;
  min-height: 60vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}

.clip-card video {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* Прозрачная кнопка поверх кадра: пауза по нажатию. Именно кнопка, а не div —
 * её видит и диктор, и клавиатура. */
.clip-tap {
  position: absolute; inset: 0;
  border: 0; background: transparent;
  cursor: pointer;
}

.clip-progress {
  position: absolute; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px));
  height: 2px; background: rgb(255 255 255 / .25);
}
.clip-progress i { display: block; height: 100%; width: 0; background: #fff; }

.clip-author {
  position: absolute; left: 14px; right: 88px;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 8px;
  color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .6);
}
.clip-who { background: none; border: 0; color: inherit; text-align: left; padding: 0; }
.clip-who small { display: block; opacity: .75; }
.clip-text { margin: 0; font-size: var(--fs-sm); }

.clip-actions {
  position: absolute; right: 6px;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}

.clip-btn {
  min-width: 48px; min-height: 48px;
  border: 0; background: transparent; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: var(--fs-xs);
  text-shadow: 0 1px 3px rgb(0 0 0 / .6);
}

.clips-sentinel { height: 1px; }

/* Создание ролика: кадр и выбранная обложка рядом. */
.clip-preview { width: 100%; max-height: 40vh; background: #000; border-radius: var(--radius); }
.clip-cover { width: 100%; max-height: 24vh; object-fit: contain; border-radius: var(--radius); }

/* Кнопка «снять ролик» поверх ленты: над нижней навигацией и в безопасном
 * поле — иначе на iPhone она садится ровно на полосу жеста «домой». */
.clip-new {
  position: absolute; right: 14px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: var(--accent); color: var(--accentText);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgb(0 0 0 / .35);
}

/* ── Присланная ссылка ──────────────────────────────────────────────────────
 *
 * Карточку рисует сервер оболочки (cmd/mvq-web/share.go) ещё до того, как
 * запустится хоть одна строка сценария, — и она же остаётся на экране у того,
 * кто пришёл по ссылке, но ещё не вошёл.
 *
 * Стили лежат здесь, а не в app.css, по той же причине, по какой здесь лежит
 * полоса «вышло обновление»: это про страницу, открытую по ссылке, а не про
 * содержимое продукта.
 *
 * Мобильная в первую очередь: по присланной ссылке приходят с телефона, из
 * чужого мессенджера, одной рукой. Отсюда крупная цель нажатия, поля от края
 * и нижний отступ, считающийся от безопасного поля, — иначе на iPhone кнопка
 * садится ровно на полосу жеста «домой». */
.link-card {
  max-width: 34rem;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top, 0px)) 16px
           calc(28px + env(safe-area-inset-bottom, 0px));
  color: var(--text);
  overflow-wrap: anywhere;
}

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

/* Надзаголовок: «Ролик», «Событие», «Вас зовут в MVQ». Он отвечает на вопрос
 * «что мне прислали» раньше, чем человек прочитает само название. */
.link-kicker {
  margin: 0 0 4px;
  font-size: var(--fs-sm);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.link-dim { color: var(--muted); font-size: var(--fs-sm); margin: 4px 0; }
.link-warn { color: var(--bad, #E5484D); font-weight: 600; margin: 8px 0; }
.link-note { margin-top: 12px; }

/* Кнопка во всю ширину: на телефоне это единственное, что человек должен
 * нажать, и промахнуться по ней он не должен. 48px — нижний предел цели
 * нажатия, ниже начинаются промахи. */
.link-cta {
  display: block;
  margin-top: 16px;
  padding: 16px 16px;
  min-height: 48px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accentText);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.link-cta:active { background: var(--accent-hover); }

/* Над дверью входа карточка стоит отдельной плашкой: там, где вокруг форма
 * входа, ей нужна своя граница — иначе она читается как часть формы. */
.auth .link-card,
.link-card.link-above {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  margin-bottom: var(--s4);
  padding: var(--s4);
}

/* ── Окно «Поделиться» ──────────────────────────────────────────────────────
 *
 * Три вещи в одном окне, и порядок у них не случайный: сама ссылка, кнопки к
 * ней, QR под ними. Сверху то, что читают и проверяют глазами («туда ли она
 * ведёт»), ниже то, чем действуют, и в самом низу то, что нужно реже всего —
 * второй телефон рядом. */
.share-box { display: flex; flex-direction: column; gap: var(--s3); }

/* Ссылка выделяемая и целиком: обрезанная многоточием не проверяется взглядом
 * и не копируется руками там, где буфер обмена недоступен. */
.share-link {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  user-select: all;
  -webkit-user-select: all;
}

/* Кнопки в ряд, но переносятся: на узком телефоне «Копировать» и «Поделиться»
 * рядом не помещаются, и вторая уезжала бы за край. */
.share-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.share-row .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }

/* QR всегда светлый, независимо от темы окна.
 *
 * Не упущение и не лень: читает его камера, а не человек. Тёмный код на
 * тёмном фоне не читается вовсе, а инверсия (светлые модули на тёмном) сбивает
 * половину сканеров — они ищут тёмное на светлом. Поэтому здесь белый фон
 * прибит гвоздями, и менять его вслед за темой нельзя. */
.share-qr {
  align-self: center;
  padding: var(--s3);
  background: #fff;
  border-radius: var(--radius);
  line-height: 0;
}

.share-qr svg { display: block; width: 200px; height: 200px; max-width: 60vw; max-height: 60vw; }