/* Истории на главной — лента ПРЯМОУГОЛЬНЫХ карточек (как в приложении) под шапкой
   + полноэкранный просмотрщик. Источник общий с приложением (oc_chai_story/slide). 22.10.2026. */
/* Ширина/центровка как у промо-баннера (max-width ~1240), чтобы левый край ленты
   шёл НАРАВНЕ с баннером, а не был смещён вправо (решение владельца 22.10). */
/* 22.10 (вечер): ширину и боковой отступ теперь даёт обёртка .layout темы (как у баннера
   и плиток) — свой max-width не нужен. */
.chai-stories{margin:0;padding:0}
.chai-stories__strip{display:flex;gap:9px;overflow-x:auto;padding:2px 0 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chai-stories__strip::-webkit-scrollbar{display:none}
.chai-stories__item{flex:0 0 auto;display:block;width:112px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.chai-stories__card{position:relative;display:block;width:112px;height:146px;border-radius:14px;overflow:hidden;background:#ececec;border:2px solid #f0883e;box-sizing:border-box}
/* Просмотренная — просто без обводки (как в Instagram), БЕЗ затемнения. */
.chai-stories__item--seen .chai-stories__card{border-color:transparent}
.chai-stories__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.chai-stories__cap{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 8px;background:linear-gradient(transparent,rgba(0,0,0,.72));z-index:1}
.chai-stories__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#fff;font-size:12px;font-weight:700;line-height:1.18;text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* Просмотрщик */
.chai-sv{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center}
.chai-sv.is-open{display:flex}
.chai-sv__box{position:relative;width:100%;max-width:430px;height:100%;background:#000;overflow:hidden;display:flex}
.chai-sv__bars{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:4}
.chai-sv__bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.chai-sv__bar span{display:block;height:100%;width:0;background:#fff}
.chai-sv__bar.is-done span{width:100%}
.chai-sv__bar.is-active span{width:0;animation:chaiSvFill linear forwards}
@keyframes chaiSvFill{from{width:0}to{width:100%}}
.chai-sv__top{position:absolute;top:20px;left:12px;right:12px;display:flex;align-items:center;gap:10px;z-index:4;color:#fff;pointer-events:none}
.chai-sv__top .chai-sv__close{pointer-events:auto}
.chai-sv__title{font-size:14px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.chai-sv__close{margin-left:auto;background:none;border:0;color:#fff;font-size:28px;line-height:1;cursor:pointer;padding:2px 8px}
.chai-sv__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;user-select:none;-webkit-user-drag:none}
.chai-sv__nav{position:absolute;top:0;bottom:0;width:34%;z-index:2;cursor:pointer}
.chai-sv__nav--prev{left:0}
.chai-sv__nav--next{right:0}
.chai-sv__cap{position:absolute;left:0;right:0;bottom:0;padding:76px 18px 26px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;z-index:3}
.chai-sv__caphead{font-size:17px;font-weight:700;margin:0 0 5px}
.chai-sv__captext{font-size:13px;line-height:1.45;margin:0 0 14px;opacity:.95}
.chai-sv__cta{display:inline-block;background:#f0883e;color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding:11px 22px;border-radius:26px}
.chai-sv__cta:hover{background:#e07a30;color:#fff}
@media(min-width:768px){.chai-stories__item,.chai-stories__card{width:120px}.chai-stories__card{height:156px}}