/* базовый контейнер */
.ges { position: relative; box-sizing: border-box; }

/* Триггеры */
.ges-trigger-button{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.65rem 1rem;border-radius:999px;border:0;cursor:pointer;
  background:#111;color:#fff;font-weight:600;line-height:1.1;
}
.ges-avatars{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.ges-avatar{
  appearance:none; border:0; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.ges-avatar img{
  width:var(--ges-avatar,64px); height:var(--ges-avatar,64px);
  object-fit:cover; border-radius:50%;
  outline:3px solid #ff006a20; box-shadow:0 0 0 2px #ff2d55;
}
.ges-avatar-label{ font-size:.8rem; line-height:1; color:#333; max-width:100px; text-align:center; }

/* Попап */
.ges-overlay[hidden]{ display:none !important; }
.ges-overlay{
  position:fixed; inset:0; z-index:2147483647;
  background:rgba(0,0,0,.88);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(8px,2vw,24px);
}
.ges-pop{
  position:relative;
  height:min(90vh, 900px);
  aspect-ratio: 9 / 16;     /* держим 9:16 как у стори */
  width:auto;
  background:#000; border-radius:16px; overflow:hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,.5);
}

/* Подложка под прогресс, чтобы не терялся на светлых кадрах */
.ges-pop::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:72px;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
  z-index:2; pointer-events:none;
}

/* Верхняя панель/прогресс */
.ges-topbar{
  position:absolute; inset:0 0 auto 0; height:60px; padding:10px 12px 0;
  display:flex; align-items:flex-start; gap:8px; z-index:3; pointer-events:none;
}
.ges-close{
  margin-left:auto; pointer-events:auto;
  appearance:none; border:0; background:rgba(0,0,0,.35); color:#fff;
  width:36px; height:36px; border-radius:999px; font-size:28px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

/* Прогресс: GPU-композитинг и transform вместо width */
.ges-progress{
  display:flex; gap:6px; width:100%; pointer-events:none;
  transform:translateZ(0);
}
.ges-progress-item{
  position:relative;
  flex:1; overflow:hidden;
  background: var(--ges-progress-bg, rgba(255,255,255,.25));
  height:4px;                 /* толще, чем 3px, чтобы не рябило */
  border-radius:3px;
}
.ges-progress-item span{
  position:absolute; left:0; top:0; bottom:0; width:100%;
  transform-origin:left center;
  transform:scaleX(0);        /* анимируем через scaleX */
  will-change:transform;
  background: var(--ges-progress, #fff);
}

/* Сцена: слайды на весь попап, навигация накладная и НЕ сжимает контент */
.ges-stage{ position:absolute; inset:0; }
.ges-slides{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.ges-nav{
  position:absolute; top:0; bottom:0; width:32%;
  z-index:2; cursor:pointer; background:transparent;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}
.ges-prev{ left:0; }
.ges-next{ right:0; }

/* Слайды и медиа — в размер окна */
.ges-slide{
  position:absolute; inset:0; opacity:0; transform:translateX(15%);
  transition: opacity .25s linear, transform .25s ease-out;
  display:flex; align-items:center; justify-content:center;
}
.ges-slide.is-active{ opacity:1; transform:translateX(0); }

.ges-slide-inner{ position:relative; width:100%; height:100%; }
.ges-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center center; /* заполняем окно без полос */
  display:block; border:0; background:#000;
}

/* Контентные режимы */
.ges-template, .ges-html{
  position:absolute; inset:0;
  display:block; width:100%; height:100%; overflow:auto;
  padding:24px; box-sizing:border-box; color:#fff;
}

/* Подпись */
.ges-caption{
  position:absolute; left:12px; right:12px; bottom:14px;
  color:#fff; font-weight:600; text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

/* на случай если тема ставит transform на контейнеры */
.page-wrapper, .site-content { isolation:isolate; }

/* --- FIX: нормальная сцена и навзоны --- */
.ges-pop{
  height:min(90vh, 900px) !important;
  aspect-ratio: 9 / 16 !important;
  width:auto !important;
}
.ges-stage{ position:absolute !important; inset:0 !important; display:block !important; }
.ges-slides{ position:absolute !important; inset:0 !important; overflow:hidden !important; z-index:1 !important; }

/* кликаемые зоны поверх, НЕ отъедают место */
.ges-nav{
  position:absolute !important; top:0 !important; bottom:0 !important;
  width:32% !important; background:transparent !important; z-index:2 !important; cursor:pointer !important;
}
.ges-prev{ left:0 !important; }
.ges-next{ right:0 !important; }

/* медиа — на весь кадр */
.ges-slide-inner{ width:100% !important; height:100% !important; }
.ges-media{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center !important;
  background:#000 !important;
}

/* Кнопка звука (если вдруг вернёшь её в разметку) */
.ges-sound{
  pointer-events:auto;
  appearance:none; border:0; background:rgba(0,0,0,.35); color:#fff;
  width:36px; height:36px; border-radius:999px; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.ges-sound.is-on{ background:rgba(255,255,255,.2); }
.ges-sound .icon{ font-size:18px; }

/* Чуть толще полоски на телефонах */
@media (max-width: 640px){
  .ges-progress-item{ height:5px; }
}