/* Экран эффекта как сторис: телефон, presentation="preview" (класс
 * .effect-detail-stories на оболочке). Пример — на весь экран, внизу
 * название, описание и одна кнопка «Повторить»; форма и запуск — в шторке.
 *
 * Разметка по умолчанию нейтральна: story-блоки скрыты инлайном, обёртки
 * шторки — `display: contents` инлайном. Поэтому широкая раскладка и любой
 * экран без этого листа видят прежний грид; всё ниже — только до 767px.
 *
 * Селектор оболочки несёт `:is(.effect-preview-dialog, html)` и пару классов
 * ориентации: так он перебивает правила 030 (диалог) и 150/153 (страница)
 * с их !important, не завися от порядка подключения листов. */

@media (max-width: 767px) {
  .effect-preview-dialog:has(.effect-detail-stories) {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  :is(.effect-preview-dialog, html)
    .effect-detail-shell.effect-detail-refresh.effect-detail-stories:is(
      .effect-detail-media-landscape,
      .effect-detail-media-portrait
    ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto auto !important;
    grid-template-areas: none !important;
    gap: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* ── Пример на весь экран ─────────────────────────────────────────── */
  :is(.effect-preview-dialog, html)
    .effect-detail-shell.effect-detail-refresh.effect-detail-stories:is(
      .effect-detail-media-landscape,
      .effect-detail-media-portrait
    )
    .effect-detail-preview {
    grid-area: 1 / 1 / -1 / 2 !important;
    position: relative !important;
    top: auto !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    z-index: 0;
  }
  :is(.effect-preview-dialog, html)
    .effect-detail-shell.effect-detail-refresh.effect-detail-stories.effect-detail-media-portrait
    .effect-detail-preview-media
    :is(video, img) {
    object-fit: cover !important;
  }
  /* Горизонтальный кадр вписан `contain` (010-dialog) в весь экран и по
     умолчанию встаёт по центру — нижняя половина уезжала под заголовок и
     описание. Ставим его в середину свободной зоны между верхними кнопками
     и нижним блоком (~260px); если зоны не хватает — прижимаем под кнопки.
     clamp(): при MAX < MIN побеждает MIN, то есть верх под кнопками. */
  :is(.effect-preview-dialog, html)
    .effect-detail-shell.effect-detail-refresh.effect-detail-stories.effect-detail-media-landscape
    .effect-detail-preview-media
    :is(video, img) {
    --story-top: calc(64px + env(safe-area-inset-top, 0px));
    --story-media-h: calc(100vw / var(--efx-media-aspect, 1.7778));
    object-position: 50%
      clamp(
        var(--story-top),
        calc((100dvh - 260px + var(--story-top) - var(--story-media-h)) / 2),
        calc(100dvh - 260px - var(--story-media-h))
      ) !important;
  }
  :is(.effect-preview-dialog, html)
    .effect-detail-shell.effect-detail-refresh.effect-detail-stories:is(
      .effect-detail-media-landscape,
      .effect-detail-media-portrait
    )
    .effect-detail-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
      linear-gradient(to bottom, rgb(6 8 7 / 0.5), transparent 16%),
      linear-gradient(to top, rgb(6 8 7 / 0.97) 0%, rgb(6 8 7 / 0.82) 34%, transparent 62%);
  }

  /* ── Верхняя строка: поделиться слева, пауза/звук и закрыть справа ── */
  .effect-detail-stories .effect-chrome-close {
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px;
  }
  :is(.effect-preview-dialog, html)
    .effect-detail-shell.effect-detail-refresh.effect-detail-stories:is(
      .effect-detail-media-landscape,
      .effect-detail-media-portrait
    )
    .effect-chrome-share {
    grid-area: 1 / 1 !important;
    position: relative !important;
    top: auto !important;
    justify-self: start;
    align-self: start;
    margin: calc(12px + env(safe-area-inset-top, 0px)) 0 0 12px !important;
    z-index: 5;
  }
  :is(.effect-preview-dialog, html)
    .effect-detail-shell.effect-detail-refresh.effect-detail-stories:is(
      .effect-detail-media-landscape,
      .effect-detail-media-portrait
    )
    .effect-chrome-media {
    grid-area: 1 / 1 !important;
    justify-self: end;
    align-self: start;
    margin: calc(12px + env(safe-area-inset-top, 0px)) 64px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    z-index: 5;
  }
  .effect-detail-stories .effect-chrome-media > span,
  .effect-detail-stories .effect-chrome-media-control span {
    display: none;
  }
  .effect-detail-stories .effect-chrome-media > div {
    grid-template-columns: repeat(2, 44px);
    gap: 8px;
  }
  .effect-detail-stories .effect-chrome-media-control {
    min-width: 0;
    width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: rgb(20 24 22 / 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* ── Нижний блок: тип, название, счётчик, описание, советы, кнопка ── */
  :is(.effect-preview-dialog, html)
    .effect-detail-shell.effect-detail-refresh.effect-detail-stories:is(
      .effect-detail-media-landscape,
      .effect-detail-media-portrait
    )
    .effect-chrome-heading {
    grid-area: 3 / 1 !important;
    position: relative;
    z-index: 5;
    align-self: end;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 18px 8px !important;
  }
  .effect-detail-stories .effect-chrome-heading > div {
    display: inline-flex;
    height: 26px;
    padding: 0 10px 0 8px;
    gap: 6px;
    border-radius: 9px;
    background: rgb(255 255 255 / 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-weight: 600;
  }
  .effect-detail-stories .effect-chrome-heading h1 {
    margin: 10px 0 0;
    font-size: 28px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
  }
  :is(.effect-preview-dialog, html)
    .effect-detail-shell.effect-detail-refresh.effect-detail-stories:is(
      .effect-detail-media-landscape,
      .effect-detail-media-portrait
    )
    .effect-story-copy {
    display: grid !important;
    grid-area: 4 / 1;
    position: relative;
    z-index: 5;
    gap: 8px;
    padding: 0 18px;
  }
  :is(.effect-preview-dialog, html)
    .effect-detail-shell.effect-detail-refresh.effect-detail-stories:is(
      .effect-detail-media-landscape,
      .effect-detail-media-portrait
    )
    .effect-story-uses {
    display: block !important;
    grid-area: 6 / 1;
    position: relative;
    z-index: 5;
    margin: 6px 18px 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: rgb(255 255 255 / 0.7);
  }
  .effect-story-copy p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: rgb(255 255 255 / 0.74);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  :is(.effect-preview-dialog, html)
    .effect-detail-shell.effect-detail-refresh.effect-detail-stories:is(
      .effect-detail-media-landscape,
      .effect-detail-media-portrait
    )
    .effect-chrome-intro {
    grid-area: 5 / 1 !important;
    position: relative;
    z-index: 5;
    justify-content: flex-start;
    margin: 0 !important;
    padding: 0 18px;
  }
  :is(.effect-preview-dialog, html)
    .effect-detail-shell.effect-detail-refresh.effect-detail-stories:is(
      .effect-detail-media-landscape,
      .effect-detail-media-portrait
    )
    .effect-story-cta {
    display: flex !important;
    grid-area: 7 / 1;
    position: relative;
    z-index: 5;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    margin: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 16px;
    background: var(--brand-accent);
    color: #131517;
    font: 700 16px/1 "Gotham", "Helvetica", Arial, sans-serif;
    box-shadow: 0 10px 28px -12px rgb(var(--brand-accent-rgb) / 0.55);
  }
  .effect-story-cta:active {
    transform: scale(0.98);
  }
}