.ssw-stories {
    display: flex;
    justify-content: safe center;
    gap: var( --ssw-circle-gap, 12px );
    overflow-x: auto;
    padding: 8px 4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    font-family: var( --ssw-font-family, inherit );
}

.ssw-stories::-webkit-scrollbar {
    display: none;
}

.ssw-story {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: calc( var( --ssw-circle-size, 64px ) + 16px );
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
}

.ssw-story__ring {
    width: calc( var( --ssw-circle-size, 64px ) + var( --ssw-ring-width, 2px ) * 4 );
    height: calc( var( --ssw-circle-size, 64px ) + var( --ssw-ring-width, 2px ) * 4 );
    border-radius: 50%;
    border: var( --ssw-ring-width, 2px ) solid var( --ssw-ring-color, #e1306c );
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.ssw-story--seen .ssw-story__ring {
    border-color: var( --ssw-ring-seen-color, #c7c7c7 );
}

.ssw-story__avatar {
    width: var( --ssw-circle-size, 64px );
    height: var( --ssw-circle-size, 64px );
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.ssw-story__avatar--placeholder {
    background: #e5e7eb;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ssw-story__caption {
    max-width: calc( var( --ssw-circle-size, 64px ) + 16px );
    font-size: 12px;
    color: var( --ssw-caption-color, #1f2937 );
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Полноэкранный вьюер */
.ssw-viewer {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.ssw-viewer[hidden] {
    display: none;
}

.ssw-viewer__stage {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    max-width: 480px;
    max-height: 100%;
    background: #000;
    overflow: hidden;
}

/* Приглушённые превью соседних историй ленты — только на широких экранах, см. media query ниже. */
.ssw-viewer__neighbor {
    display: none;
    position: relative;
    flex: 0 0 auto;
    width: min( 230px, 18vw );
    height: min( 700px, 68vh );
    border: 0;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background-color: #111;
    background-size: cover;
    background-position: center;
    filter: brightness( .5 );
    transform: scale( .95 );
    transition: filter .2s ease, transform .2s ease;
}

.ssw-viewer__neighbor:hover,
.ssw-viewer__neighbor:focus-visible {
    filter: brightness( .68 );
    transform: scale( .97 );
}

.ssw-viewer__neighbor--empty {
    visibility: hidden;
    pointer-events: none;
}

.ssw-viewer__neighbor-caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Раньше только text-shadow — недостаточно на светлых превью (тот же класс проблемы, что чинили в
       шапке основного вьюера). На тестовых фото-сканах документов (чёрный текст на белом) мягкий
       полупрозрачный градиент не помогает: он гасит белый фон, а чёрный текст фото остаётся чёрным
       поверх посветлевшего фона — контраст только растёт. Первые 45px — плотная почти непрозрачная
       подложка (не градиент), гарантированно перекрывает строку подписи независимо от контента фото;
       дальше — мягкое затухание до низа блока (~126px), чтобы не было жёсткого обреза на фото. */
    padding: 18px 16px 90px;
    background: linear-gradient( to bottom, rgba( 0, 0, 0, .85 ), rgba( 0, 0, 0, .85 ) 45px, rgba( 0, 0, 0, 0 ) 100% );
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-shadow: 0 1px 4px rgba( 0, 0, 0, .5 );
}

@media ( min-width: 960px ) {
    .ssw-viewer__neighbor {
        display: block;
    }
}

.ssw-viewer__progress {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 2;
}

.ssw-viewer__progress-bar {
    flex: 1;
    height: 2px;
    background: rgba( 255, 255, 255, .35 );
    border-radius: 2px;
    overflow: hidden;
}

.ssw-viewer__progress-fill {
    height: 100%;
    width: 0%;
    background: #fff;
}

.ssw-viewer__progress-bar--active .ssw-viewer__progress-fill {
    transition-property: width;
    transition-timing-function: linear;
}

.ssw-viewer__progress-bar--done .ssw-viewer__progress-fill {
    width: 100%;
    transition: none;
}

.ssw-viewer__media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ssw-viewer__media img,
.ssw-viewer__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ssw-viewer__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* На коротких экранах (десктоп-окно/ландшафт) с длинным текстом блок без этого предела растёт,
       пока не долезет до градиента шапки — два полупрозрачных градиента друг на друге дают видимый
       двойной шов потемнения. max-height + overflow не даёт блоку вырасти настолько; pointer-events
       у блока остаётся none (см. ниже), поэтому в этом крайнем случае скролла руками не будет — но
       геометрического наложения градиентов тоже не будет, это важнее. */
    /* 55%, не 70% — при 70% у длинного текста тёмная область занимала почти весь низ карточки, из-за
       резкого перехода "затухание → сплошная заливка" выглядело как два разных тёмных слоя друг на
       друге, а не один плавный градиент (отзыв пользователя со скриншотом). */
    max-height: 55%;
    overflow: hidden;
    padding: 60px 20px 84px;
    color: #fff;
    /* Затухание на фиксированных 48px сверху (меньше padding-top в 60px), а не растянуто на всю
       высоту блока — иначе у длинного текста (блок выше) первая строка попадает в почти прозрачную
       часть градиента и на светлом фото становится плохо читаемой. Ниже 48px — сплошная подложка,
       но опаcity снижена с .72 до .6 — при высоком блоке (длинный текст) .72 читалось как отдельный
       очень тёмный слой поверх, а не мягкое продолжение градиента. */
    background: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ), rgba( 0, 0, 0, .6 ) 48px );
    z-index: 2;
    pointer-events: none;
}

.ssw-viewer__text a {
    color: #fff;
    pointer-events: auto;
}

.ssw-viewer__slide-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.ssw-viewer__text-body {
    font-size: 14px;
    line-height: 1.4;
}

.ssw-viewer__cta {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 24px;
    z-index: 3;
    display: block;
    text-align: center;
    padding: 12px 20px;
    background: #fff;
    color: #111;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    box-sizing: border-box;
    /* Без тени белая кнопка визуально сливается с краями светлого/белого фото — тень держит форму кнопки на любом фоне. */
    box-shadow: 0 2px 12px rgba( 0, 0, 0, .25 );
}

/* Шапка карточки — заголовок истории слева, кнопки навигации/mute/закрытия справа. Градиент —
   постоянная затемняющая подложка (не зависит от слайда), чтобы заголовок и иконки было видно
   и на светлых/белых фото. Это настоящий DOM-элемент, а не ::before — у последнего в Chromium
   на некоторых слайдах с <video> фон не рисуется поверх видео, хотя обычные элементы рисуются
   корректно (см. .ssw-viewer__text ниже). pointer-events:none на самой подложке, чтобы её нижняя
   часть не перехватывала тапы по тап-зонам слайда — клики нужны только кнопкам внутри. */
.ssw-viewer__head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 20px 12px 40px;
    background: linear-gradient( to bottom, rgba( 0, 0, 0, .55 ), rgba( 0, 0, 0, 0 ) );
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
}

.ssw-viewer__story-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba( 0, 0, 0, .4 );
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ssw-viewer__head-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}

.ssw-viewer__arrow,
.ssw-viewer__close,
.ssw-viewer__mute {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba( 0, 0, 0, .35 );
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}

.ssw-viewer__arrow:hover,
.ssw-viewer__close:hover,
.ssw-viewer__mute:hover {
    background: rgba( 0, 0, 0, .5 );
}

.ssw-viewer__nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 33.33%;
    z-index: 1;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.ssw-viewer__nav--prev {
    left: 0;
}

.ssw-viewer__nav--next {
    left: 33.33%;
    width: 66.67%;
}

@media ( min-width: 600px ) {
    .ssw-viewer__stage {
        max-height: 90vh;
        border-radius: 12px;
    }
}

.ssw-watermark {
    margin: 4px 0 0;
    text-align: right;
    font-size: 11px;
    line-height: 1.2;
}

.ssw-watermark a {
    color: inherit;
    opacity: .55;
    text-decoration: none;
}

.ssw-watermark a:hover {
    opacity: .85;
    text-decoration: underline;
}