/* app.css — оболочка и экраны веб-приложения (на токенах kit.css).
 * Блоки: ОБОЛОЧКА · ЛЕНТА · ПОСТ · ТЕГ И ПОИСК · ОТКРЫТКА · УСТАНОВКА. */

/* == ОБОЛОЧКА ============================================================ */
.app { min-height: 100dvh; }
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 2px;
  height: calc(var(--hdr-h) + var(--safe-t));
  padding: var(--safe-t) calc(4px + var(--safe-r)) 0 calc(var(--gutter) + var(--safe-l));
  background: var(--bar);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap);
  color: var(--panel-fg); font-size: 19px; font-weight: 800; letter-spacing: -.01em;
}
.brand b { color: var(--lav); font-weight: 900; }
.brand .ki { color: var(--lav); font-size: 22px; }
/* Логотип «Лунный кот» (04.10.2026): малый горизонтальный локап, цвета —
   --logo-m/-s/-w из kit.css (тёмная/светлая тема). */
.brand .logo-svg { height: 26px; width: auto; display: block; }
.hdr-sp { flex: 1; }
.hbtn {
  display: inline-grid; place-items: center; flex: none;
  width: var(--tap); height: var(--tap);
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-mid);
  cursor: pointer;
  transition: background-color var(--dur-press) linear, color var(--dur-press) linear;
}
.hbtn .ki { font-size: 22px; }
.hbtn:active { background: var(--accent-wash-2); }
.hbtn.on { color: var(--lav); }
.hbtn[hidden] { display: none; }
.fish-pill {
  display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap);
  padding: 0 10px; border-radius: 999px; color: var(--warm-ink);
  font-size: 14px; font-weight: 800;
  transition: background-color var(--dur-press) linear;
}
.fish-pill:active { background: var(--accent-wash-2); }
.fish-pill .ki { font-size: 18px; }
/* «нет связи» — /me не ответил: тап повторяет (boot.js), вкладки кота вернутся сами. */
.net-pill {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px;
  border: 0; border-radius: 999px; background: var(--accent-wash-2); color: var(--ink-mid);
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
  transition: background-color var(--dur-press) linear;
}
.net-pill:active { background: var(--accent-wash-3); }
.main {
  max-width: 640px; margin: 0 auto; outline: none;
  padding: calc(var(--hdr-h) + var(--safe-t)) var(--safe-r)
           calc(var(--tab-h) + var(--safe-b) + 24px) var(--safe-l);
}
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--tab-h) + var(--safe-b));
  padding: 0 var(--safe-r) var(--safe-b) var(--safe-l);
  background: var(--bar);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-top: 1px solid var(--line);
}
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 0; min-height: var(--tab-h);
  color: var(--ink-dim); font-size: 12px; font-weight: 700;
  transition: color var(--dur-press) linear;
}
.tab .ki { font-size: 24px; }
.tab.on { color: var(--lav); }
.tab-ic { position: relative; display: inline-grid; }
.tab-lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-bdg {
  position: absolute; top: -4px; left: calc(100% - 8px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent-grad); color: var(--ink-on-accent);
  font-size: 12px; font-weight: 900; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.nojs { padding: 80px 16px; text-align: center; }

/* Экраны и переходы: вкладка → вкладка — кроссфейд, вглубь — въезд справа
 * на 24 px, назад — обратный и быстрее. Уходящий экран замирает fixed. */
.scr { position: relative; z-index: 1; min-height: calc(100dvh - var(--hdr-h) - var(--tab-h) - var(--safe-t) - var(--safe-b)); }
.scr.is-out {
  position: fixed; left: 0; right: 0; z-index: 0;
  max-width: 640px; margin: 0 auto; padding: 0 var(--safe-r) 0 var(--safe-l);
  pointer-events: none;
}
.scr.out-pop { z-index: 2; }
.scr.in-push { animation: scr-in-push var(--dur-slow) var(--ease-out) both; }
.scr.out-push { animation: scr-out-fade var(--dur-fast) var(--ease-in) both; }
.scr.in-pop, .scr.in-fade { animation: scr-in-fade var(--dur-base) var(--ease-out) both; }
.scr.out-pop { animation: scr-out-pop var(--dur-fast) var(--ease-in) both; }
.scr.out-fade { animation: scr-out-fade var(--dur-fast) var(--ease-in) both; }
@keyframes scr-in-push { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes scr-out-pop { to { opacity: 0; transform: translateX(24px); } }
@keyframes scr-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes scr-out-fade { to { opacity: 0; } }
.sub-head {
  position: sticky; top: calc(var(--hdr-h) + var(--safe-t)); z-index: 20;
  display: flex; align-items: center; gap: 4px; min-height: 52px;
  padding: 4px var(--gutter) 4px 4px; background: var(--bg);
}
.sub-title { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 900; }
@media (prefers-reduced-motion: reduce) {
  .scr.in-push, .scr.out-push, .scr.in-pop, .scr.in-fade, .scr.out-pop, .scr.out-fade { animation: none; }
}

/* == ЛЕНТА =============================================================== */
.seg {
  position: sticky; top: calc(var(--hdr-h) + var(--safe-t)); z-index: 20;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
  padding: 8px var(--gutter); background: var(--bg);
}
.seg-b {
  display: flex; align-items: center; justify-content: center; min-width: 0; min-height: var(--tap);
  padding: 0 4px; border-radius: 999px; color: var(--ink-mid);
  font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color var(--dur-press) linear, color var(--dur-press) linear;
}
.seg-b.on { background: var(--accent-wash-3); color: var(--panel-fg); }
.seg-b:active { background: var(--accent-wash-2); }
.feed-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
.feed-top:empty { display: none; }
.feed-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.feed-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.feed-foot:empty { margin: 0; }
.feed-more-btn { justify-self: center; }
.feed-more { height: 1px; }
.sk-cardw { margin: 0 var(--gutter); padding: 8px; border-radius: var(--r-5); box-shadow: inset 0 0 0 1px var(--line); }
.sk-media { aspect-ratio: 4 / 5; margin-top: 6px; border-radius: var(--r-3); }

/* Карточка */
.card {
  margin: 0 var(--gutter); overflow: hidden;
  border-radius: var(--r-5); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line);
}
.card.is-new { animation: card-in var(--dur-slow) var(--ease-out); }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pc-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; }
.pc-ava {
  display: grid; place-items: center; flex: none;
  width: var(--tap); height: var(--tap); border-radius: var(--r-3); background: var(--accent-wash);
}
.pc-who { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; min-height: var(--tap); color: var(--panel-fg); }
.pc-name { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 15px; font-weight: 900; }
.pc-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-off { flex: none; color: var(--lav); font-size: 13px; }
.pc-gem { flex: none; font-size: 13px; }
.pc-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); font-size: 12px; font-weight: 700; }
.ts { font-size: 12px; }
.md {
  position: relative; aspect-ratio: var(--ar, 0.8); overflow: hidden;
  background: var(--sk-1); touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.md:not(.is-loaded):not(.md-video):not(.md-album):not(.is-broken) {
  background: linear-gradient(100deg, var(--sk-1) 40%, var(--sk-2) 50%, var(--sk-1) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}
.md img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.md.is-loaded img, .md-album img { opacity: 1; }
.md.is-broken img { visibility: hidden; }
.md.is-broken::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 64px; height: 64px;
  background: var(--line-strong);
  -webkit-mask: url("shared/pet/sit.png") center / contain no-repeat;
  mask: url("shared/pet/sit.png") center / contain no-repeat;
}
.md-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--sink); }
.alb { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.alb::-webkit-scrollbar { display: none; }
.alb img { flex: 0 0 100%; scroll-snap-align: center; }
.alb-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.alb-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-on-accent); opacity: .5;
  transition: opacity var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out);
}
.alb-dots i.on { opacity: 1; transform: scale(1.25); }
.alb-n {
  position: absolute; top: 8px; right: 8px; padding: 2px 9px; border-radius: 999px;
  background: var(--backdrop); color: var(--ink-on-accent); font-size: 12px; font-weight: 800;
}
.pc-cap { margin: 10px 12px 0; color: var(--ink-soft); font-size: 15px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.tag-link { color: var(--lav); font-weight: 800; }
.pc-extra { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 10px 12px 0; }
.pc-extra:empty { display: none; }
.pc-acts { display: flex; align-items: center; gap: 2px; padding: 4px 6px 6px; }
.act {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: var(--tap); height: var(--tap); padding: 0 10px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-mid);
  font-size: 14px; font-weight: 800; cursor: pointer;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  transition: background-color var(--dur-press) linear, color var(--dur-press) linear;
}
.act .ki { font-size: 22px; }
.act:active { background: var(--accent-wash-2); }
.act-n:empty { display: none; }
.act-paw.on, .cm-paw.on { color: var(--hot); }
.rx-emo { font-size: 20px; line-height: 1; }
.paw-ic { display: inline-grid; }
.act-paw.is-pop .paw-ic { animation: paw-pop var(--dur-slow) var(--ease-pop); }
@keyframes paw-pop { from { transform: scale(.9); } to { transform: none; } }
.act-stats { margin-left: auto; }
.paw-burst {
  position: fixed; z-index: 90; width: 84px; height: 84px; margin: -42px 0 0 -42px;
  color: var(--hot); pointer-events: none;
  animation: paw-burst var(--dur-slow) var(--ease-out) forwards;
}
.paw-burst .ki { width: 100%; height: 100%; }
@keyframes paw-burst {
  0% { opacity: 0; transform: scale(.9); }
  45% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.3) translateY(-12px); }
}
.rx-pick {
  position: fixed; z-index: 85; display: flex; gap: 2px; padding: 4px;
  border-radius: 999px; background: var(--bg-2); box-shadow: var(--e3), inset 0 0 0 1px var(--line);
  animation: rx-in var(--dur-base) var(--ease-pop);
  transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in);
}
.rx-pick.is-leaving { opacity: 0; transform: scale(.92); }
.rx-pick.is-fast { transition-duration: var(--dur-press); }
.rx-pick button {
  width: var(--tap); height: var(--tap); border: 0; border-radius: 50%;
  background: transparent; font-size: 26px; cursor: pointer;
  transition: background-color var(--dur-press) linear;
}
.rx-pick button:active { background: var(--accent-wash-3); }
@keyframes rx-in { from { opacity: 0; transform: scale(.92) translateY(6px); } to { opacity: 1; transform: none; } }
.pc-top {
  display: flex; align-items: center; gap: 8px; min-height: var(--tap);
  margin: 0 8px 8px; padding: 4px 10px; border-radius: var(--r-3);
  background: var(--sink); color: var(--ink-soft); font-size: 14px;
}
.pc-top b { color: var(--panel-fg); }
.tc-ava { flex: none; display: inline-grid; }
.tc-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-n { display: inline-flex; align-items: center; gap: 2px; color: var(--ink-dim); font-size: 12px; font-weight: 800; }
.poll { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.poll-o {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: var(--tap); padding: 0 14px; overflow: hidden;
  border: 0; border-radius: var(--r-3); background: var(--raise-2); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--panel-fg); font-size: 14px; font-weight: 700; text-align: left; cursor: pointer;
  transition: background-color var(--dur-press) linear;
}
.poll-o::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%);
  background: var(--accent-wash-3); transition: width var(--dur-slow) var(--ease-out);
}
.poll-o > span { position: relative; }
.poll-o.on { box-shadow: inset 0 0 0 2px var(--lav); }
.poll-p { font-weight: 900; }
.poll-sum { color: var(--ink-dim); font-size: 12px; font-weight: 700; }
.tchip {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--accent-wash-2); color: var(--panel-fg); font-size: 13px; font-weight: 800; cursor: pointer;
  transition: background-color var(--dur-press) linear;
}
.tchip:active { background: var(--accent-wash-3); }
.tc-eq { display: none; gap: 2px; align-items: flex-end; height: 12px; }
.tc-eq i { width: 3px; height: 100%; border-radius: 1px; background: currentColor; animation: tc-eq 1s ease-in-out infinite; }
.tc-eq i:nth-child(2) { animation-direction: reverse; }
.tc-eq i:nth-child(3) { animation-direction: alternate-reverse; }
.tchip.playing .tc-eq { display: inline-flex; }
.tchip.playing .tc-ic { display: none; }
@keyframes tc-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* Плашки над лентой */
.plate-hour {
  display: flex; align-items: center; gap: 8px; min-height: var(--tap);
  margin: 0 var(--gutter); padding: 6px 12px; border-radius: var(--r-4);
  background: color-mix(in srgb, var(--gold-ink) 14%, transparent); color: var(--panel-fg); font-size: 14px;
}
.pl-ic .ki { color: var(--gold-ink); font-size: 20px; }
.pl-tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-go { flex: none; color: var(--gold-ink); font-size: 12px; font-weight: 800; }
.tr-row {
  display: flex; gap: 6px; overflow-x: auto; padding: 0 var(--gutter); scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 12px, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 12px, black calc(100% - 28px), transparent 100%);
}
.tr-row::-webkit-scrollbar { display: none; }
.tr-chip {
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap);
  padding: 0 14px; border-radius: 999px; background: var(--raise-2); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--panel-fg); font-size: 14px; font-weight: 800; white-space: nowrap;
  transition: background-color var(--dur-press) linear;
}
.tr-chip:active { background: var(--accent-wash-3); }
.plate-homes { margin: 0 var(--gutter); padding: 4px 0 6px; border-radius: var(--r-4); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); }
.ph-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 12px; color: var(--ink-mid); font-size: 13px; font-weight: 900; }
.ph-all { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; font-size: 13px; font-weight: 800; }
.ph-row { display: flex; gap: 6px; overflow-x: auto; padding: 0 8px; scrollbar-width: none; }
.ph-row::-webkit-scrollbar { display: none; }
.ph-home {
  flex: none; display: grid; justify-items: center; gap: 2px; width: 84px; padding: 6px 4px;
  border-radius: var(--r-3); color: var(--panel-fg);
  transition: background-color var(--dur-press) linear;
}
.ph-home:active { background: var(--accent-wash-2); }
.ph-nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 800; }
.ph-cozy { color: var(--ink-dim); font-size: 12px; }
.mine-head {
  display: flex; align-items: center; gap: 12px; margin: 0 var(--gutter); padding: 10px 12px;
  border-radius: var(--r-5); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line); color: var(--panel-fg);
}
.mh-ava { flex: none; display: inline-grid; }
.mh-who { display: grid; gap: 2px; min-width: 0; }
.mh-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; font-weight: 900; }
.mh-who span { color: var(--ink-dim); font-size: 13px; font-weight: 700; }

/* «Тяни, чтобы обновить». Выезжает из-под липкой полосы экрана (сегмент
   лент / шапка тега — --ptr-top её высота, z-index ниже её), а не поверх
   вкладок «Свежее»/«Друзья». */
.scr-feed { --ptr-top: 60px; }        /* .seg: 8 + 44 (--tap) + 8 */
.scr-tag { --ptr-top: 52px; }         /* .sub-head: min-height */
.ptr {
  position: fixed; left: 50%; top: calc(var(--hdr-h) + var(--safe-t) + var(--ptr-top, 0px) + 8px); z-index: 15;
  display: grid; place-items: center; width: 40px; height: 40px; margin-left: -20px;
  border-radius: 50%; background: var(--bg-2); box-shadow: var(--e2);
  opacity: 0; pointer-events: none;
  transform: translateY(calc(var(--ptr, 0px) - 56px));
}
.ptr.is-anim { transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.ptr:not(.is-busy) .kt-spin svg, .ptr:not(.is-busy) .kt-spin circle { animation-play-state: paused; }
.scr:not(.is-on) .ptr { display: none; }

/* Переливы редких окрасов — только на крупных портретах: десятки мелких
   (≤40 px: карточка, превью коммента, комментарии, поиск) с фильтром в
   вечной анимации тормозят слабый телефон, а на таком размере не видны. */
.pc-ava [class*="coat-anim-"] image, .tc-ava [class*="coat-anim-"] image,
.cm-ava [class*="coat-anim-"] image, .sr-ava [class*="coat-anim-"] image { animation: none; }

/* == ПОСТ ================================================================ */
.card.is-full { margin: 0; border-radius: 0; background: transparent; box-shadow: none; }
.cmts { padding: 4px var(--gutter) 96px; }
.cmts-h { margin: 8px 0; font-size: 15px; font-weight: 900; color: var(--ink-mid); }
.cmts-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.cm { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.cm.is-new { animation: card-in var(--dur-slow) var(--ease-out); }
.cm-ava { display: grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); border-radius: var(--r-3); background: var(--accent-wash); }
.cm-main { flex: 1; min-width: 0; padding-top: 2px; }
.cm-meta { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 900; }
.cm-meta .ts { flex: none; color: var(--ink-dim); font-weight: 700; }
.cm-ed { flex: none; color: var(--ink-dim); font-size: 12px; }
.cm-text { margin: 2px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.cm-paw .ki { font-size: 18px; }
.cmts-more { display: grid; justify-items: center; padding-top: 6px; }
.cmts-more:empty { display: none; }
.cbar {
  position: fixed; left: 0; right: 0; z-index: 35;
  bottom: calc(var(--tab-h) + var(--safe-b));
  display: flex; align-items: flex-end; gap: 6px;
  max-width: 640px; margin: 0 auto;
  padding: 8px calc(var(--gutter) + var(--safe-r)) 8px calc(var(--gutter) + var(--safe-l));
  background: var(--bar);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-top: 1px solid var(--line);
}
.cbar-in {
  flex: 1; min-height: var(--tap); max-height: 104px; padding: 10px 14px; resize: none;
  border: 0; border-radius: 22px; background: var(--raise-2); box-shadow: var(--inset-well), inset 0 0 0 1px var(--line);
  color: var(--panel-fg); font-size: 16px; line-height: 22px; outline: none;
}
.cbar-in:focus-visible { box-shadow: var(--inset-well), inset 0 0 0 2px var(--lav); }
.cbar-send { color: var(--lav); }
.cbar-send:disabled { color: var(--ink-dim); opacity: .6; }
html.kb-open .tabbar, html.kb-open .fab { visibility: hidden; }
html.kb-open .cbar { bottom: var(--kb, 0px); }      /* kb-open — только при открытой клавиатуре (kb.js) */
.cbar-login {
  position: fixed; left: 50%; z-index: 35; transform: translateX(-50%);
  bottom: calc(var(--tab-h) + var(--safe-b) + 12px);
}
/* `.cbar{display:flex}` — автор всегда перебивает UA-стиль [hidden] при равной
   специфичности, так что без этого правила `hidden` не скрыл бы панель,
   пока пост (или вход гостя) ещё не загрузился (I-3). */
.cbar[hidden], .cbar-login[hidden] { display: none; }
.cm-edit { display: grid; gap: 10px; }
.cm-edit-in {
  min-height: 96px; padding: 10px 12px; resize: vertical; border: 0; border-radius: var(--r-3);
  background: var(--raise-2); box-shadow: var(--inset-well), inset 0 0 0 1px var(--line);
  color: var(--panel-fg); font-size: 16px;
}
.ask-login .es { padding: 8px 8px 16px; }

/* == ТЕГ И ПОИСК ========================================================= */
.tag-banner {
  display: grid; gap: 2px; margin: 0 var(--gutter); padding: 12px 14px;
  border-radius: var(--r-5); background: var(--raise); box-shadow: inset 0 0 0 1px var(--line);
}
.tag-banner b { font-size: 18px; font-weight: 900; overflow-wrap: anywhere; }
.tag-banner span { color: var(--ink-dim); font-size: 13px; font-weight: 700; }
.tag-banner.is-trend { background: color-mix(in srgb, var(--lav) 12%, transparent); }
.tb-emo { font-size: 26px; }
.srch { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; min-height: 50dvh; }
.sf {
  position: relative; display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 4px 0 12px;
  border-radius: var(--r-4); background: var(--raise-2); box-shadow: var(--inset-well), inset 0 0 0 1px var(--line);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.sf.is-focus { box-shadow: var(--inset-well), inset 0 0 0 2px var(--lav); }
.sf-ic { display: inline-grid; color: var(--ink-dim); }
.sf-input {
  flex: 1; min-width: 0; height: 46px; border: 0; background: transparent;
  color: var(--panel-fg); font-size: 16px; outline: none;
}
.sf-input::-webkit-search-cancel-button { display: none; }
.sf-clear {
  display: inline-grid; place-items: center; width: var(--tap); height: var(--tap);
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-dim); cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-in), background-color var(--dur-press) linear;
}
.sf.has-text .sf-clear { opacity: 1; pointer-events: auto; transition-timing-function: var(--ease-out); }
.sf-x { position: relative; width: 14px; height: 14px; }
.sf-x::before, .sf-x::after {
  content: ""; position: absolute; left: 6px; top: 0; width: 2px; height: 14px; border-radius: 1px;
  background: currentColor; transform: rotate(45deg);
}
.sf-x::after { transform: rotate(-45deg); }
.sf-clear .kt-spin { display: none; }
.sf.is-busy .sf-clear { opacity: 1; }
.sf.is-busy .sf-clear .sf-x { display: none; }
.sf.is-busy .sf-clear .kt-spin { display: inline-block; }
.srch-res { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.srch-hint { margin: 12px 4px; color: var(--ink-dim); font-size: 14px; font-weight: 700; text-align: center; }
.sr-row {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 8px;
  border-radius: var(--r-3); color: var(--panel-fg);
  transition: background-color var(--dur-press) linear;
}
.sr-row:active { background: var(--accent-wash-2); }
.sr-ava { flex: none; display: inline-grid; }
.sr-who { display: grid; min-width: 0; }
.sr-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 900; }
.sr-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .card.is-new, .act-paw.is-pop .paw-ic, .paw-burst, .rx-pick, .tc-eq i,
  .md:not(.is-loaded):not(.md-video):not(.md-album):not(.is-broken) { animation: none; }
  .cm.is-new { animation: none; }
}

/* == ОТКРЫТКА ============================================================ */
:root { --fab-bottom: 16px; --fab-h: 52px; --fab-gap: 12px; }
.fab {
  position: fixed; z-index: 36; right: calc(16px + var(--safe-r));
  bottom: calc(var(--tab-h) + var(--safe-b) + var(--fab-bottom));
  display: none; align-items: center; gap: 6px; min-height: var(--fab-h); padding: 0 20px 0 16px;
  border: 0; border-radius: 26px; background: var(--accent-grad); color: var(--ink-on-accent);
  box-shadow: var(--e3); font-size: 15px; font-weight: 900; cursor: pointer;
  transition: opacity var(--dur-press) linear, transform var(--dur-base) var(--ease-out);
}
.fab .ki { font-size: 22px; }
.fab:active { opacity: .88; }
html.on-feed .fab { display: inline-flex; animation: fab-in var(--dur-base) var(--ease-out); }
/* FAB плавает поверх ленты — последней карточке нужен запас от её футпринта
   (отступ от панели + своя высота + зазор), иначе ряд реакций прячется под ней. */
html.on-feed .main {
  padding-bottom: calc(var(--tab-h) + var(--safe-b) + var(--fab-bottom) + var(--fab-h) + var(--fab-gap));
}
@keyframes fab-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.cmp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 4px; }
.cmp-pick {
  position: relative; display: grid; place-items: center; gap: 6px; min-height: 160px; padding: 16px;
  overflow: hidden; border-radius: var(--r-4); cursor: pointer;
  background: var(--raise-2); box-shadow: inset 0 0 0 2px var(--line-strong);
  color: var(--ink-mid); font-size: 15px; font-weight: 800;
  transition: background-color var(--dur-press) linear;
}
.cmp-pick:active { background: var(--accent-wash-2); }
.cmp-pick-ic .ki { font-size: 34px; color: var(--lav); }
.cmp-pick.has-photo { min-height: 0; padding: 0; aspect-ratio: 4 / 5; max-height: 46dvh; }
.cmp-prev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp-pick.has-photo .cmp-pick-ic { display: none; }
.cmp-pick.has-photo .cmp-pick-tx {
  position: absolute; left: 50%; bottom: 10px; z-index: 1; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 999px; background: var(--backdrop); color: var(--ink-on-accent); font-size: 13px;
}
.cmp-cap {
  width: 100%; min-height: 88px; padding: 10px 12px; resize: vertical; border: 0; border-radius: var(--r-3);
  background: var(--raise-2); box-shadow: var(--inset-well), inset 0 0 0 1px var(--line);
  color: var(--panel-fg); font-size: 16px;
}
.cmp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cmp-n { color: var(--ink-dim); font-size: 12px; font-weight: 800; }
.cmp-n.is-over { color: var(--danger-ink); }
.cmp-prog { height: 4px; overflow: hidden; border-radius: 2px; background: var(--line); }
.cmp-prog i {
  display: block; height: 100%; background: var(--lav);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) linear;
}
@media (prefers-reduced-motion: reduce) {
  html.on-feed .fab { animation: none; }
}

/* == УСТАНОВКА =========================================================== */
.inst {
  position: fixed; z-index: 37; left: calc(var(--gutter) + var(--safe-l)); right: calc(var(--gutter) + var(--safe-r));
  bottom: calc(var(--tab-h) + var(--safe-b) + var(--fab-bottom) + var(--fab-h) + var(--fab-gap));   /* над FAB */
  display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto; padding: 8px 4px 8px 12px;
  border-radius: var(--r-4); background: var(--bg-2); box-shadow: var(--e3), inset 0 0 0 1px var(--line);
  animation: inst-in var(--dur-slow) var(--ease-out);
  transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in);
}
.inst.is-leaving { opacity: 0; transform: translateY(8px); }
.inst-pic { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-3); background: var(--accent-wash-2); color: var(--lav); }
.inst-pic .ki { font-size: 22px; }
.inst-tx { flex: 1; margin: 0; font-size: 14px; line-height: 1.35; }
.inst-go { flex: none; }
/* Подсказка — только на лентах: на посте она закрывала последний комментарий и его «⋯». */
html:not(.on-feed) .inst { display: none; }
@keyframes inst-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .inst { animation: none; }
}