/* ============================================================
   ЯZME · СТЕНА «ЭФИР» 2026 — feed/css/efir.css
   Надстройка над feed/css/feed.css. Подключается ПОСЛЕ него.
   Всё на токенах --yz-* (темы Янтарь/Cloud/Полночь работают сами).
   Откат: убрать <link> этого файла — стена вернётся к прежнему виду.
   Содержимое:
     1. Бьюти-пасс журнальной карточки (.yf-*)
     2. Разделители дней (.efir-day)
     3. Превью обсуждения под постом (.efir-cmprev)
     (разделы 4-5 — переключатель и режим «Кино» — удалены)
   ============================================================ */

/* ------------------------------------------------------------
   1. БЬЮТИ-ПАСС КАРТОЧКИ
   ------------------------------------------------------------ */

/* больше воздуха, мягче волосяная линия, деликатный hover */
.yf-post{
  padding:20px 16px 16px;
  border-bottom:1px solid var(--yz-border, rgba(250,249,245,.08));
  transition:background .3s var(--yz-ease, ease);
}
@media (hover:hover){
  .yf-post:hover{ background:color-mix(in srgb, var(--yz-surface, #22211F) 26%, transparent); }
}

/* аватар: у людей — круг, у пабликов — сквиркл (мгновенная различимость источника) */
.yf-post .yf-ava, .yf-post .yf-ava img{ border-radius:50%; }
.yf-post[data-source="public"] .yf-ava,
.yf-post[data-source="public"] .yf-ava img{ border-radius:36% !important; }
.yf-post .yf-ava{
  box-shadow:0 0 0 1px var(--yz-border-strong, rgba(250,249,245,.17));
  transition:transform .25s var(--yz-spring, ease);
}
@media (hover:hover){ .yf-post .yf-ava:hover{ transform:scale(1.06); } }

/* дата: «Сегодня/Вчера» — акцентом (движок ставит .hot сам) */
.yf-date .hot{ color:var(--yz-accent, #d97757); font-weight:700; }

/* рубрика-kicker (движок рендерит при post.kicker) */
.yf-kicker{
  font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--yz-accent, #d97757);
}

/* медиа: на десктопе мягкое скругление, на мобиле остаётся full-bleed из feed.css */
@media (min-width:641px){
  .yf-post .post-carousel-container,
  .yf-post .yf-video-wrap{ border-radius:14px; overflow:hidden; }
}
.post-carousel-counter{
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  background:rgba(0,0,0,.45); font-weight:800;
}
/* курсор-подсказка: фото теперь зумится */
.yf-post .post-carousel-slide img{ cursor:zoom-in; }

/* панель действий: капсулы-призраки */
.yf-actions .yf-act{
  border-radius:var(--yz-r-pill, 999px);
  transition:background .2s var(--yz-ease, ease), color .2s, transform .2s var(--yz-spring, ease);
}
.yf-actions .yf-act:active{ transform:scale(.94); }
@media (hover:hover){
  .yf-actions .yf-act:hover{
    background:var(--yz-surface, #22211F);
    color:var(--yz-text, #faf9f5);
  }
}

/* реакции: активная пилюля дышит */
.yf-reactions{ margin-top:12px; }

/* ------------------------------------------------------------
   2. РАЗДЕЛИТЕЛИ ДНЕЙ — хронология, которую видно
   ------------------------------------------------------------ */
/* Разделитель дня НЕ липкий: все .efir-day — соседи внутри одного контейнера,
   поэтому при position:sticky они залипали на одной высоте и наезжали друг на
   друга («Вчера» поверх «Сегодня · воскресенье»), а верхний вообще не уходил.
   Теперь он просто прокручивается вместе с лентой. */
.efir-day{
  position:relative; z-index:2;
  display:flex; justify-content:center;
  padding:14px 0 12px; pointer-events:none;
}
.efir-winscroll .efir-day{ top:auto; }
.efir-day span{
  font:800 11px/1 var(--yz-font-ui, 'Inter', sans-serif);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--yz-dim, #b9b4a7);
  background:var(--yz-glass, rgba(15,14,13,.78));
  border:1px solid var(--yz-border-strong, rgba(250,249,245,.17));
  -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  padding:7px 14px; border-radius:var(--yz-r-pill, 999px);
  box-shadow:var(--yz-sh-sm, 0 2px 8px rgba(0,0,0,.28));
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .efir-day span{ background:var(--yz-surface, #22211F); }
}
.efir-day span b{ color:var(--yz-accent, #d97757); font-weight:800; }

/* ------------------------------------------------------------
   3. ПРЕВЬЮ ОБСУЖДЕНИЯ ПОД ПОСТОМ
   ------------------------------------------------------------ */
.efir-cmprev{ margin-top:10px; display:grid; gap:7px; }
.efir-cmprev-i{
  display:flex; align-items:center; gap:8px; min-width:0;
  font:500 13px/1.35 var(--yz-font-ui, 'Inter', sans-serif);
  color:var(--yz-dim, #b9b4a7); cursor:pointer;
}
.efir-cmprev-i img, .efir-cmprev-i .efir-cmprev-ava{
  width:20px; height:20px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  background:var(--yz-surface-2, #2E2C29);
  display:inline-flex; align-items:center; justify-content:center;
  font:800 9px/1 var(--yz-font-ui, sans-serif); color:var(--yz-muted, #8d8878);
}
.efir-cmprev-i b{ color:var(--yz-text, #faf9f5); font-weight:700; flex:0 0 auto; max-width:38%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.efir-cmprev-i .t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.efir-cmprev-i .lk{ margin-left:auto; flex:0 0 auto; font:700 11px var(--yz-font-ui, sans-serif); color:var(--yz-muted, #8d8878); display:inline-flex; gap:3px; align-items:center; }
.efir-cmprev-more{
  font:700 12.5px var(--yz-font-ui, sans-serif);
  color:var(--yz-muted, #8d8878); cursor:pointer; transition:color .2s;
}
@media (hover:hover){ .efir-cmprev-more:hover{ color:var(--yz-accent, #d97757); } }
/* скелетон, пока комментарии едут */
.efir-cmprev-skel{ height:16px; border-radius:8px; width:72%;
  background:linear-gradient(90deg, var(--yz-surface, #22211F) 25%, var(--yz-surface-2, #2E2C29) 50%, var(--yz-surface, #22211F) 75%);
  background-size:200% 100%; animation:efirShimmer 1.4s infinite linear; }
@keyframes efirShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* ------------------------------------------------------------
   4-5. ПЕРЕКЛЮЧАТЕЛЬ «ЧТЕНИЕ | КИНО» И РЕЖИМ «КИНО» — УДАЛЕНЫ
   Здесь было ~400 строк: .efir-seg, .efir-kino, .efir-kslide,
   .efir-krail, .efir-ksheet и всё остальное полноэкранного режима.
   Логика вырезана из feed/js/efir.js (раздел 4).
   Место сегмента в шапке занял индикатор контекста .yz-ctx
   (includes/header.php + assets/css/header.css).
   ------------------------------------------------------------ */

/* сердце-взрыв двойного тапа */
.efir-burst{
  position:fixed; z-index:1000004; pointer-events:none; font-size:76px;
  transform:translate(-50%,-50%) scale(.4); opacity:0;
  animation:efirBurst .8s var(--yz-spring, cubic-bezier(.34,1.45,.5,1)) forwards;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.45));
}
@keyframes efirBurst{
  20%{ opacity:1; transform:translate(-50%,-58%) scale(1.15) rotate(-6deg); }
  60%{ opacity:1; transform:translate(-50%,-72%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-110%) scale(.9); }
}

@media (prefers-reduced-motion:reduce){
  .efir-burst{ animation-duration:.2s; }
  .efir-cmprev-skel{ animation:none; }
}

/* ============================================================
   6. ТИПОГРАФИКА ТЕКСТА В ПОСТАХ С МЕДИА
   Было: мелкий Inter и «дыры» из подряд идущих <br>.
   ============================================================ */
.yf-post .yf-text, .yf-post .yf-text.ep-text{
  font-family:var(--yz-font-ui, 'Inter', -apple-system, sans-serif);
  font-size:16px; line-height:1.62; font-weight:450;
  letter-spacing:.001em; color:var(--yz-text, #faf9f5);
  margin:0 0 2px;
}
.yf-post .yf-text b, .yf-post .yf-text strong{ font-weight:750; }
/* больше одного пустого отступа подряд не показываем */
.yf-post .yf-text br + br + br{ display:none; }
.yf-post .yf-text p{ margin:0 0 .62em; }
.yf-post .yf-text p:last-child{ margin-bottom:0; }
.yf-post .yf-text div:empty{ display:none; }
/* медиа кликабельно — курсор это показывает */
.yf-post .post-carousel-slide img,
.yf-post .yf-video-wrap,
.yf-post .yazme-circle-container{ cursor:pointer; }

/* ============================================================
   7. ШТОРКА КОММЕНТАРИЕВ
   ============================================================ */
.efc-scrim{
  position:fixed; inset:0; z-index:1000004; background:var(--yz-overlay, rgba(10,9,8,.72));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--yz-ease, ease);
}
.efc-scrim.on{ opacity:1; pointer-events:auto; }
.efc{
  position:fixed; left:0; right:0; bottom:0; z-index:1000005;
  height:78vh; max-height:78vh; display:flex; flex-direction:column; overflow:hidden;
  background:var(--yz-glass-strong, rgba(10,9,8,.94));
  -webkit-backdrop-filter:blur(26px) saturate(1.2); backdrop-filter:blur(26px) saturate(1.2);
  border:1px solid var(--yz-border-strong, rgba(250,249,245,.17)); border-bottom:0;
  border-radius:26px 26px 0 0; color:var(--yz-text, #faf9f5);
  box-shadow:0 -26px 70px -18px rgba(0,0,0,.6);
  transform:translateY(103%); transition:transform .42s var(--yz-ease, cubic-bezier(.22,1,.36,1));
  font-family:var(--yz-font-ui, 'Inter', sans-serif);
}
.efc.on{ transform:none; }
.efc.full{ height:96vh; max-height:96vh; }
@media (min-width:900px){
  .efc{ left:auto; right:24px; width:420px; border-radius:var(--yz-r-xl, 28px); border-bottom:1px solid var(--yz-border-strong, rgba(250,249,245,.17)); bottom:24px; height:min(76vh, 760px); }
}
.efc-grip{ flex:0 0 auto; display:grid; place-items:center; padding:9px 0 5px; cursor:grab; touch-action:none; }
.efc-grip i{ width:40px; height:4.5px; border-radius:3px; background:var(--yz-border-strong, rgba(250,249,245,.17)); }
.efc-head{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:2px 16px 10px; }
.efc-head b{ font:800 15px var(--yz-font-ui, sans-serif); }
.efc-head .x{
  margin-left:auto; width:32px; height:32px; border-radius:11px; cursor:pointer;
  border:1px solid var(--yz-border, rgba(250,249,245,.08));
  background:var(--yz-surface, #22211F); color:var(--yz-dim, #b9b4a7); font-size:13px;
}
.efc-sort{ flex:0 0 auto; display:flex; gap:6px; padding:0 16px 10px; }
.efc-chip{
  height:30px; padding:0 13px; border-radius:var(--yz-r-pill, 999px); cursor:pointer;
  border:1px solid var(--yz-border, rgba(250,249,245,.08)); background:transparent;
  color:var(--yz-dim, #b9b4a7); font:700 12px var(--yz-font-ui, sans-serif);
}
.efc-chip.on{
  background:var(--yz-accent-soft, rgba(217,119,87,.14));
  border-color:var(--yz-accent-line, rgba(217,119,87,.42)); color:var(--yz-text, #faf9f5);
}
.efc-body{ flex:1; min-height:0; overflow-y:auto; padding:2px 16px 10px; -webkit-overflow-scrolling:touch; }
.efc-body::-webkit-scrollbar{ width:0; }
.efc-empty{ text-align:center; color:var(--yz-muted, #8d8878); font:600 13.5px/1.6 var(--yz-font-ui, sans-serif); padding:38px 10px; }
.efc-load{ display:grid; gap:12px; padding:10px 0; }
.efc-load i{
  display:block; height:52px; border-radius:14px;
  background:linear-gradient(90deg, var(--yz-surface, #22211F) 25%, var(--yz-surface-2, #2E2C29) 50%, var(--yz-surface, #22211F) 75%);
  background-size:200% 100%; animation:efirShimmer 1.4s infinite linear;
}
.efc-i{ display:flex; gap:10px; padding:9px 0; }
.efc-i img, .efc-i .ava{
  width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  background:linear-gradient(135deg, var(--yz-accent-hi, #e88a68), var(--yz-accent-deep, #b05730));
  display:grid; place-items:center; color:#fff; font:800 13px var(--yz-font-ui, sans-serif);
}
.efc-b{ flex:1; min-width:0; }
.efc-top{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.efc-top b{ font:800 13px var(--yz-font-ui, sans-serif); }
.efc-top time{ font:600 11px var(--yz-font-ui, sans-serif); color:var(--yz-muted, #8d8878); }
.efc-badge{
  font:800 9.5px var(--yz-font-ui, sans-serif); letter-spacing:.05em; padding:2px 5px; border-radius:6px;
  color:var(--yz-accent, #d97757); border:1px solid var(--yz-accent-line, rgba(217,119,87,.42));
}
.efc-t{ font:500 13.5px/1.5 var(--yz-font-ui, sans-serif); margin-top:3px; word-break:break-word; }
.efc-t img.efc-sticker{ max-width:120px; border-radius:12px; display:block; margin-top:4px; }
.efc-t video{ width:150px; height:150px; border-radius:50%; object-fit:cover; margin-top:6px; background:#000; }
.efc-foot{ display:flex; align-items:center; gap:14px; margin-top:5px; font:700 11.5px var(--yz-font-ui, sans-serif); color:var(--yz-muted, #8d8878); }
.efc-foot .lk{ cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.efc-foot .lk.on{ color:var(--yz-danger, #e5484d); }
.efc-foot .rp{ cursor:pointer; }
.efc-kids{ margin-top:8px; padding-left:11px; border-left:2px solid var(--yz-border, rgba(250,249,245,.08)); }
.efc-more{ font:700 12px var(--yz-font-ui, sans-serif); color:var(--yz-accent, #d97757); cursor:pointer; margin:4px 0 6px 44px; }
.efc-quick{ flex:0 0 auto; display:flex; gap:9px; padding:0 16px 6px; }
.efc-quick span{ font-size:19px; cursor:pointer; transition:transform .15s var(--yz-spring, ease); }
.efc-quick span:active{ transform:scale(1.3); }
.efc-reply{
  flex:0 0 auto; display:none; align-items:center; gap:8px; margin:0 14px 6px; padding:7px 12px;
  border-radius:var(--yz-r-pill, 999px); background:var(--yz-accent-soft, rgba(217,119,87,.14));
  border:1px solid var(--yz-accent-line, rgba(217,119,87,.42));
  font:700 12px var(--yz-font-ui, sans-serif); color:var(--yz-text, #faf9f5);
}
.efc-reply.on{ display:flex; }
.efc-reply button{ margin-left:auto; border:0; background:none; color:var(--yz-muted, #8d8878); cursor:pointer; font-size:14px; }
.efc-input{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; margin:0 12px;
  margin-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  padding:7px 8px 7px 14px; border-radius:var(--yz-r-pill, 999px);
  background:var(--yz-surface, #22211F); border:1px solid var(--yz-border-strong, rgba(250,249,245,.17));
  box-shadow:var(--yz-sh-md, 0 10px 30px -12px rgba(0,0,0,.5));
}
.efc-input input{
  flex:1; min-width:0; border:0; background:none; outline:0;
  color:var(--yz-text, #faf9f5); font:500 14px var(--yz-font-ui, sans-serif);
}
.efc-input .send{
  width:36px; height:36px; border-radius:50%; border:0; cursor:pointer; flex:0 0 auto;
  background:var(--yz-grad, linear-gradient(135deg,#e2885f,#d97757,#b3552e)); color:#fff;
  display:grid; place-items:center; box-shadow:var(--yz-glow, 0 8px 26px rgba(217,119,87,.35));
  transition:transform .18s var(--yz-spring, ease), opacity .2s;
}
.efc-input .send svg{ width:16px; height:16px; }
.efc-input .send[disabled]{ opacity:.4; box-shadow:none; }
.efc-input .send:active{ transform:scale(.9); }