/* Плитка TikTok-режима (веб, js/tiktok_grid.js).
 *
 * Эталон — Flutter: mobile_app/lib/core/widgets/tiktok_feed_screen.dart. Числа
 * (радиус 20, рамка 2.5 px, затемнение соседей 31 %, блюр 22 px, подложка под
 * карточкой) совпадают с приложением; расчёт размеров и положения ячеек — в JS
 * (transform), здесь только вид. Префикс `tgrid` — не `ad-*` (AdBlock EasyList).
 */

html.tgrid-lock, html.tgrid-lock body { overflow: hidden; overscroll-behavior: none; }

.tgrid {
  position: fixed; inset: 0; z-index: 10000;
  background: #000; color: #fff;
  touch-action: none; -webkit-user-select: none; user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.tgrid__stage {
  position: absolute; inset: 0; overflow: hidden; touch-action: none;
  transition: bottom .24s cubic-bezier(.2, .7, .2, 1), right .24s cubic-bezier(.2, .7, .2, 1);
}

/* ------------------------------- ячейка ---------------------------------- */
.tgrid__cell {
  --sel: 0;
  position: absolute; left: 0; top: 0;
  border-radius: 20px; overflow: hidden; background: #000;
  will-change: transform;
  contain: layout paint;
}

/* Фон ячейки — тот же кадр на всю ячейку с блюром (sigma 22, как во Flutter).
   Основной кадр вписан целиком (contain), поэтому по бокам или сверху/снизу
   вместо чёрных полос мягкий цвет самого кадра; brightness(.6) = затемнение
   фона ~40 % (ColoredBox 0x66000000 во Flutter). */
.tgrid__bg {
  position: absolute; inset: -30px;
  background-size: cover; background-position: center;
  filter: blur(22px) brightness(.6);
}

/* Зум кадра (--zoom считает JS: размытые полосы вдвое меньше) */
.tgrid__media {
  position: absolute; inset: 0;
  transform: scale(var(--zoom, 1));
  transition: transform .2s ease-out;
}
.tgrid__video, .tgrid__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
  background: transparent;
}
.tgrid__img { opacity: 0; transition: opacity 1.2s linear; }
.tgrid__img.is-on { opacity: 1; }

/* Ken Burns для «псевдо-видео» из кадров: наезд внутрь, меняется сторона увода */
.tgrid__kb-0 { animation: tgrid-kb-0 7s ease-in-out forwards; }
.tgrid__kb-1 { animation: tgrid-kb-1 7s ease-in-out forwards; }
.tgrid__kb-2 { animation: tgrid-kb-2 7s ease-in-out forwards; }
.tgrid__kb-3 { animation: tgrid-kb-3 7s ease-in-out forwards; }
@keyframes tgrid-kb-0 { from { transform: scale(1); } to { transform: scale(1.07) translate(-1.5%, -1%); } }
@keyframes tgrid-kb-1 { from { transform: scale(1); } to { transform: scale(1.07) translate(1.5%, -1%); } }
@keyframes tgrid-kb-2 { from { transform: scale(1); } to { transform: scale(1.07) translate(1.5%, 1%); } }
@keyframes tgrid-kb-3 { from { transform: scale(1); } to { transform: scale(1.07) translate(-1.5%, 1%); } }

/* Оверлеи выбранной ячейки: проявляются по мере выбора, у соседей невидимы и
   не ловят касания (тап по соседу ведёт к нему — кнопка .tgrid__tap). */
.tgrid__ui { position: absolute; inset: 0; opacity: var(--sel); pointer-events: none; }
.tgrid__cell.is-sel .tgrid__ui > * { pointer-events: auto; }
.tgrid__cell.is-sel .tgrid__ui > .tgrid__grad { pointer-events: none; }

.tgrid__grad {
  position: absolute; left: 0; right: 0; bottom: 0; height: 240px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
}

.tgrid__rail {
  position: absolute; right: 8px; bottom: 130px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.tgrid__rbtn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 48px; padding: 2px 0; background: none; border: 0; color: #fff;
  font: inherit; cursor: pointer;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .6));
}
.tgrid__rbtn svg { display: block; }
.tgrid__rbtn--star svg path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.tgrid__rbtn--star.is-on svg path { fill: #ffc400; stroke: #ffc400; }
.tgrid__rcap { font-size: 12px; font-weight: 600; line-height: 1.2; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }

.tgrid__avatar { position: relative; width: 56px; height: 60px; display: flex; justify-content: center; }
.tgrid__avatar-c {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  border: 2px solid #fff; background: var(--c-brand, #1b743e);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
}
.tgrid__avatar-c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgrid__avatar.is-premium .tgrid__avatar-c { border-color: #f0b429; box-shadow: 0 0 0 2px rgba(240, 180, 41, .5); }
.tgrid__plus {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0;
  background: #ff2d55; color: #fff; font-size: 16px; line-height: 22px; cursor: pointer;
}
.tgrid__plus.is-done { background: #2e9e5b; }

.tgrid__title {
  position: absolute; left: 16px; right: 76px; bottom: 100px;
  font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 6px #000;
}

/* Белая карточка объявления: тап → деталка */
.tgrid__card {
  position: absolute; left: 12px; right: 12px; bottom: 18px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 12px; background: #fff; color: #1f2a24;
  text-decoration: none;
}
.tgrid__thumb {
  flex: none; width: 52px; height: 52px; border-radius: 8px;
  background: #e8ece9 center / cover no-repeat;
}
.tgrid__ctext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tgrid__ctitle { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgrid__cprice { font-size: 15px; font-weight: 700; color: var(--c-brand, #1b743e); }
.tgrid__cshare { flex: none; display: flex; padding: 6px; background: none; border: 0; color: var(--c-brand, #1b743e); cursor: pointer; }
.tgrid__cchev { flex: none; display: flex; color: #8b948f; }

/* Полоска прогресса со scrubbing */
.tgrid__bar { position: absolute; left: 16px; right: 16px; bottom: 2px; height: 16px; cursor: pointer; }
.tgrid__bar::before {
  content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 3px;
  border-radius: 2px; background: rgba(255, 255, 255, .25);
}
.tgrid__bar i { position: absolute; left: 0; top: 6px; height: 3px; width: 0; border-radius: 2px; background: #fff; }

/* Пауза: большая ▶ по центру */
.tgrid__play {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px;
  opacity: 0; pointer-events: none; transition: opacity .15s;
  background: no-repeat center / 88px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z' fill='white' fill-opacity='.8'/></svg>");
}
.tgrid__cell.is-sel.is-paused .tgrid__play { opacity: 1; }

/* Затемнение соседей: 31 % (у выбранной — 0) и рамка выбранной */
.tgrid__dim {
  position: absolute; inset: 0; background: #000; pointer-events: none;
  opacity: calc(.31 * (1 - var(--sel)));
}
.tgrid__frame {
  position: absolute; inset: 0; pointer-events: none;
  border: 2.5px solid #fff; border-radius: 20px; opacity: var(--sel);
}

/* Чат-лист открыт: сцена сжата, панель действий и название прячем (как compact
   во Flutter) — остаётся кадр и белая карточка. */
.tgrid.has-sheet .tgrid__rail, .tgrid.has-sheet .tgrid__title { display: none; }

/* Невидимая кнопка на всю соседнюю ячейку: тап = переход к ней */
.tgrid__tap {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0;
  background: transparent; border: 0; cursor: pointer;
}
.tgrid__cell.is-sel .tgrid__tap { display: none; }

/* -------------------------- кнопки поверх сцены --------------------------- */
.tgrid__close, .tgrid__mute {
  position: absolute; top: max(12px, env(safe-area-inset-top)); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer;
}
.tgrid__close { left: 12px; }
.tgrid__mute { right: 12px; }
.tgrid__close:focus-visible, .tgrid__mute:focus-visible, .tgrid__rbtn:focus-visible,
.tgrid__card:focus-visible, .tgrid__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Стрелки навигации — только где есть мышь (на телефоне ведёт палец) */
.tgrid__nav { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 721px) {
  .tgrid__nav {
    display: flex; position: absolute; z-index: 3; width: 48px; height: 48px;
    border-radius: 50%; border: 0; padding: 0; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer;
    transition: background .15s, opacity .15s;
  }
  .tgrid__nav:hover { background: rgba(255, 255, 255, .3); }
  .tgrid__nav:disabled { opacity: 0; pointer-events: none; }
  .tgrid__nav--left  { left: 16px;  top: 50%; margin-top: -24px; transform: rotate(180deg); }
  .tgrid__nav--right { right: 16px; top: 50%; margin-top: -24px; }
  .tgrid__nav--up    { top: 16px;   left: 50%; margin-left: -24px; transform: rotate(-90deg); }
  .tgrid__nav--down  { bottom: 16px; left: 50%; margin-left: -24px; transform: rotate(90deg); }
  .tgrid.has-sheet .tgrid__nav--right { right: calc(min(440px, 40vw) + 16px); }
}

/* ------------------------------- чат-лист --------------------------------- */
/* Телефон: снизу на 62 % высоты, сцена сжимается вверх (как ChatSheet во Flutter).
   Десктоп: панель справа. Внутри — тот же чат маркетплейса, что во «Сообщениях». */
.tgrid__sheet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 4;
  background: #fff; border-radius: 16px 16px 0 0; overflow: hidden;
  transform: translateY(100%); transition: transform .24s cubic-bezier(.2, .7, .2, 1);
}
.tgrid.has-sheet .tgrid__sheet { transform: none; }
.tgrid.has-sheet .tgrid__stage { bottom: 62%; }
.tgrid__sheet-frame { display: block; width: 100%; height: 100%; border: 0; }
.tgrid__sheet-x {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px;
  border-radius: 50%; border: 0; padding: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
}
@media (min-width: 721px) {
  .tgrid__sheet {
    left: auto; top: 0; width: min(440px, 40vw); height: auto; border-radius: 0;
    transform: translateX(100%);
  }
  .tgrid.has-sheet .tgrid__stage { bottom: 0; right: min(440px, 40vw); }
}

.tgrid__toast {
  position: absolute; left: 50%; bottom: 28px; z-index: 5; max-width: 80%;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 10px 16px; border-radius: 10px; background: rgba(0, 0, 0, .8); color: #fff;
  font-size: 14px; transition: opacity .2s, transform .2s;
}
.tgrid__toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .tgrid__stage, .tgrid__sheet, .tgrid__media, .tgrid__img, .tgrid__toast, .tgrid__play { transition: none; }
  .tgrid__kb-0, .tgrid__kb-1, .tgrid__kb-2, .tgrid__kb-3 { animation: none; }
}