/* ============================================
   tsvetomania:stories
   Desktop: 91px circle, 8px gap, 12px/500
   Mobile:  56px circle, 4px gap, 10px/400
   Progress: #FB4469 / #FFECF0, 3px, r32
   Story card: 313×646, r8
   Button: 313×40 below card
   ============================================ */

/* --- Лента --- */
.tvm-stories {
    width: 100%; padding-bottom: 24px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}
.tvm-stories:active { cursor: grabbing; }
.tvm-stories::-webkit-scrollbar { display: none; }

.tvm-stories__list {
    display: inline-flex; align-items: flex-start;
    gap: 20px; padding: 0 16px; list-style: none; margin: 0;
}

.tvm-stories__item {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
    gap: 8px; width: 91px; cursor: pointer; background: none; border: none; padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.tvm-stories__ring {
    width: 91px; height: 91px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: #A11826; padding: 3px;
}

.tvm-stories__img {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
    border: 2px solid #fff;
    transition: transform 0.3s ease;
}
.tvm-stories__item:hover .tvm-stories__img,
.tvm-stories__item:focus .tvm-stories__img { transform: scale(1.1); }

.tvm-stories__label {
    font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 12px; font-weight: 500; line-height: 16px; color: #262729; text-align: center;
    width: 100%; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Mobile */
@media (max-width: 767px) {
    .tvm-stories__list { gap: 12px; padding: 0 12px; }
    .tvm-stories__item { width: 56px; gap: 4px; }
    .tvm-stories__ring { width: 56px; height: 56px; }
    .tvm-stories__label {
        font-size: 10px; font-weight: 400; line-height: 12px;
        letter-spacing: 0.4px; max-height: 24px;
    }
}


/* --- Модалка --- */
.tvm-story-modal {
    display: none; position: fixed; inset: 0; z-index: 10000;
    align-items: center; justify-content: center;
}
.tvm-story-modal.active { display: flex; }

.tvm-story-modal__blackout { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.86); }

.tvm-story-modal__close {
    position: absolute; top: 24px; right: 24px; z-index: 10;
    width: 32px; height: 32px; border: none; border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.2s;
}
.tvm-story-modal__close:hover { background: rgba(255, 255, 255, 0.3); }

/* Main = card + button */
.tvm-story-modal__main {
    position: relative; z-index: 5;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}

.tvm-story-modal__center {
    position: relative; width: 313px; height: 646px;
    border-radius: 8px; overflow: hidden; background: #111;
    animation: tvmStoryIn 0.3s ease;
}
@keyframes tvmStoryIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

.tvm-story-modal__media { width: 100%; height: 100%; }
.tvm-story-modal__media img,
.tvm-story-modal__media video {
    width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 8px;
    background: #111;
}

/* Навигация */
.tvm-story-modal__nav {
    position: absolute; top: 0; bottom: 0; width: 40%;
    background: none; border: none; cursor: pointer; z-index: 6;
}
.tvm-story-modal__nav--prev { left: 0; }
.tvm-story-modal__nav--next { right: 0; }

/* Кнопка звука */
.tvm-story-modal__sound {
    position: absolute; bottom: 16px; right: 16px; z-index: 8;
    width: 36px; height: 36px; border: none; border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.2s;
    padding: 0;
}
.tvm-story-modal__sound:hover { background: rgba(0, 0, 0, 0.65); }

/* Прогресс */
.tvm-story-modal__progress {
    position: absolute; top: 8px; left: 8px; right: 8px;
    display: flex; gap: 4px; z-index: 7;
}
.tvm-story-modal__bar {
    flex: 1; height: 3px; background: #FFECF0;
    border-radius: 32px; overflow: hidden;
}
.tvm-story-modal__bar-fill {
    height: 100%; width: 0; background: #FB4469;
    border-radius: 32px; transition: width 0.1s linear;
}
.tvm-story-modal__bar.done .tvm-story-modal__bar-fill { width: 100%; }

/* Кнопка под сторис */
.tvm-story-modal__btn {
    display: flex; align-items: center; justify-content: center;
    width: 313px; height: 40px; border-radius: 8px;
    background: #fff; color: #262729; text-decoration: none;
    font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 14px; font-weight: 500; line-height: 1;
    transition: background 0.2s, transform 0.15s; cursor: pointer;
}
.tvm-story-modal__btn:hover { background: #f0f0f0; transform: scale(1.02); }

/* Боковые превью */
.tvm-story-modal__side {
    position: relative; z-index: 3; border-radius: 8px;
    overflow: hidden; background: #222; flex-shrink: 0;
}
.tvm-story-modal__side img,
.tvm-story-modal__side video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

.tvm-story-modal__side--left,
.tvm-story-modal__side--right {
    width: 250px; height: 516px; margin: 0 10px;
    opacity: 0.7; transition: opacity 0.2s; cursor: pointer;
}
.tvm-story-modal__side--left:hover,
.tvm-story-modal__side--right:hover { opacity: 0.9; }

.tvm-story-modal__side--far-left,
.tvm-story-modal__side--far-right {
    width: 156px; height: 324px; margin: 0 10px; opacity: 0.4;
}
.tvm-story-modal__side:empty { display: none; }

/* Mobile modal */
@media (max-width: 767px) {
    .tvm-story-modal { flex-direction: column; }
    .tvm-story-modal__main { width: 100%; height: 100%; gap: 0; }
    .tvm-story-modal__center { width: 100%; height: 100%; border-radius: 0; flex: 1; }
    .tvm-story-modal__media img,
    .tvm-story-modal__media video { border-radius: 0; background: #111; }
    .tvm-story-modal__btn {
        width: calc(100% - 24px); margin: 0 12px;
        position: absolute; bottom: 24px; left: 0; z-index: 8; border-radius: 8px;
    }
    .tvm-story-modal__side { display: none !important; }
    .tvm-story-modal__close { top: 16px; right: 16px; }
    .tvm-story-modal__progress { top: 12px; left: 12px; right: 12px; }
}