/* Просмотрщик историй (stories.js) — полноэкранный, как в Telegram.
   Старые правила .story-viewer-card/.story-viewer-nav из profile.css больше не применяются:
   такой разметки нет, вместо неё .sv-*. Класс .sv на оверлее гасит рамку/поля старой карточки. */
.story-viewer-overlay.sv{position:fixed;inset:0;z-index:20000;display:none;padding:0;background:#000}
.sv-shell{position:relative;width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column}
.sv-media{position:absolute;inset:0}
.sv-media img,.sv-media video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
/* Затемнение сверху и снизу: по светлой картинке иначе не читаются ни имя, ни текст. */
.sv-scrim{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 62%,rgba(0,0,0,.65))}

/* Полоски прогресса: по одной на историю, активная наливается фиолетовым. */
.sv-progress{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));left:8px;right:8px;
    display:flex;gap:4px;z-index:3}
.sv-seg{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.32);overflow:hidden}
.sv-seg-fill{width:0;height:100%;border-radius:2px;background:var(--accent,#7c3aed)}
.sv-seg.done .sv-seg-fill{width:100%}

.sv-top{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));left:12px;right:12px;
    display:flex;align-items:center;gap:10px;z-index:3}
.sv-author{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.sv-ava{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;
    align-items:center;justify-content:center;background:rgba(255,255,255,.18);color:#fff;font-weight:700}
.sv-ava img{width:100%;height:100%;object-fit:cover}
.sv-names{display:flex;flex-direction:column;min-width:0;color:#fff}
.sv-names b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-names i{font-size:12px;font-style:normal;color:rgba(255,255,255,.72)}
.sv-close{width:34px;height:34px;border:0;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;
    font-size:18px;cursor:pointer;flex-shrink:0}

.sv-text{position:absolute;left:16px;right:16px;bottom:84px;z-index:3;color:#fff;font-size:17px;
    line-height:1.35;white-space:pre-wrap;text-shadow:0 1px 12px rgba(0,0,0,.5)}

.sv-bottom{position:absolute;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));
    display:flex;align-items:center;gap:12px;z-index:3}
.sv-spacer{flex:1}
/* Кто посмотрел: маленькая аватарка последнего зрителя и счётчик — видно только автору. */
.sv-views{display:flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:5px 12px 5px 5px;
    background:rgba(0,0,0,.42);color:#fff;font:inherit;font-size:13px;cursor:pointer}
.sv-views-ava{width:26px;height:26px;border-radius:50%;overflow:hidden;display:flex;align-items:center;
    justify-content:center;background:var(--accent,#7c3aed);font-size:11px;font-weight:700}
.sv-views-ava img{width:100%;height:100%;object-fit:cover}
.sv-views-eye{padding-left:7px}
.sv-heart{width:44px;height:44px;border:0;border-radius:50%;background:rgba(0,0,0,.42);color:#fff;
    display:flex;align-items:center;justify-content:center;cursor:pointer}
.sv-heart svg{fill:none;stroke:currentColor;stroke-width:1.8}
.sv-heart.active{color:#ef4444}
.sv-heart.active svg{fill:#ef4444;stroke:#ef4444}

/* Зоны касания: слева — назад, справа — вперёд. Лежат под кнопками, поэтому сердечко и
   «просмотры» нажимаются нормально. */
.sv-tap{position:absolute;top:0;bottom:0;z-index:1}
.sv-tap-left{left:0;width:32%}
.sv-tap-right{left:32%;right:0}

/* Лист «кто посмотрел» */
.sv-sheet{position:fixed;inset:0;z-index:20100;display:none;align-items:flex-end;justify-content:center;
    background:rgba(0,0,0,.5)}
.sv-sheet-card{width:min(520px,100%);max-height:70vh;display:flex;flex-direction:column;
    background:var(--bg-secondary);border-radius:18px 18px 0 0;overflow:hidden}
.sv-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
    font-weight:700;color:var(--text-primary);border-bottom:1px solid var(--border)}
.sv-sheet-head button{border:0;background:transparent;color:var(--text-secondary);font-size:18px;cursor:pointer}
.sv-sheet-list{overflow-y:auto;padding:8px 8px 16px}
.sv-sheet-sub{padding:12px 10px 6px;font-size:12px;text-transform:uppercase;letter-spacing:.4px;
    color:var(--text-secondary)}
.sv-sheet-empty{padding:22px;text-align:center;color:var(--text-muted)}
.sv-viewer{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;cursor:pointer}
.sv-viewer:hover{background:var(--bg-tertiary)}
.sv-viewer-ava{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;
    align-items:center;justify-content:center;background:var(--accent,#7c3aed);color:#fff;font-weight:700;font-size:13px}
.sv-viewer-ava img{width:100%;height:100%;object-fit:cover}
.sv-viewer-name{flex:1;min-width:0;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-viewer-heart{font-size:15px}

/* Кольцо просмотренной истории — серое (состояние личное: у каждого своё). */
.chat-item-avatar-wrap.has-story.seen,.story-ring.seen{background:var(--border,#4b5563)}