/* Stories block (tokens from tema.css) */

.feed-stories-track{
  display:flex;
  gap: 12px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 6px 2px 10px;
}

.feed-stories-track::-webkit-scrollbar{ display:none; }
.feed-stories-track{ scrollbar-width:none; }

.story-item{
  flex: 0 0 78px;              /* ✅ чтобы 3 видно полностью и 4 наполовину */
  scroll-snap-align: start;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;

  border:0;
  background:transparent;
  color: var(--text);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}

.story-avatar{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  overflow:hidden;
  position:relative;

  background: color-mix(in oklab, var(--surface), var(--bg) 35%);
  border: 1px solid var(--border);
  box-sizing:border-box;

  display:flex;               /* ✅ чтобы contain всегда был по центру */
  align-items:center;
  justify-content:center;
}

.story-avatar img{
  width:100%;
  height:100%;

  object-fit: contain;        /* ✅ КЛЮЧЕВО: без обрезки вертикалок */
  object-position: center;

  display:block;
}

/* ✅ “непрочитано” — кольцо */
.story-item.is-unseen .story-avatar{
  border: 2px solid color-mix(in oklab, var(--brand), #fff 30%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--surface), transparent 30%);
}

/* “прочитано” — мягче */
.story-item.is-seen .story-avatar{
  border: 1px solid var(--border);
  opacity: .92;
}

.story-title{
  width: 78px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-align:center;
  line-height:1.15;

  overflow:hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 420px){
  .story-item{ flex-basis: 74px; }
  .story-title{ width: 74px; }
}