/* ==========================================================================
   Kosmo — лента, группы и каналы, настройки, просмотрщик, экран блокировки
   ========================================================================== */

/* ---------- Реакции: аккуратные «таблетки» с эмодзи и счётчиком ---------- */
.reactions { gap: 5px; margin: 6px 0 2px; }
.reaction {
  height: 30px;
  gap: 4px;
  padding: 0 10px 0 5px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  font-variant-numeric: tabular-nums;
}
.reaction .emoji { width: 22px; height: 22px; }
.theirs .reaction { background: color-mix(in srgb, var(--c-accent) 14%, transparent); color: var(--c-text); }
.theirs .reaction.is-mine { background: var(--c-accent); color: #fff; box-shadow: none; }
.mine .reaction { background: rgba(0, 0, 0, 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.mine .reaction.is-mine { background: rgba(255, 255, 255, 0.92); color: var(--c-accent); box-shadow: none; }
html[data-theme="material"] .theirs .reaction { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface); }
html[data-theme="material"] .mine .reaction { background: color-mix(in srgb, var(--md-sys-color-on-primary) 16%, transparent); color: var(--md-sys-color-on-primary); }
.reaction.is-landing .emoji { opacity: 0; }
.reaction.is-landed { animation: react-land 420ms var(--spring-bouncy); }
@keyframes react-land { 40% { scale: 1.18; } }

.react-fly { position: fixed; z-index: 61; pointer-events: none; will-change: transform; }
.react-fly .emoji { width: 100%; height: 100%; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4)); }

/* реакции на посты: отдельный ряд с кнопкой «добавить» */
.post-reactions .reaction { background: rgba(255, 255, 255, 0.07); }
.post-reactions .reaction.is-mine { background: color-mix(in srgb, var(--c-accent) 28%, transparent); box-shadow: inset 0 0 0 1.5px var(--c-accent); color: var(--c-text); }
html[data-theme="material"] .post-reactions .reaction { background: var(--md-sys-color-surface-container-high); }
html[data-theme="material"] .post-reactions .reaction.is-mine { background: var(--md-sys-color-secondary-container); box-shadow: inset 0 0 0 1.5px var(--md-sys-color-primary); }
.reaction-add { color: var(--c-text-2); padding: 0 7px !important; }
.reaction-add svg { width: 19px; height: 19px; }
.react-pop { position: fixed; z-index: 40; animation: pop-in 320ms var(--spring-bouncy) both; transform-origin: 20px 100%; }
.react-pop.is-closing { animation: fade-out 150ms ease both; }

/* ---------- Сообщения: подписи, видео-превью, посты, комментарии ---------- */
.b-caption { margin: 6px 6px 2px; }
.has-caption.kind-photo, .has-caption.kind-video { padding-bottom: 6px; }
.has-caption .b-meta { position: static !important; float: right; background: none !important; color: inherit !important; padding: 0 !important; margin: 4px 4px 0 10px !important; opacity: 0.7 !important; }
.has-caption.kind-video .b-meta { top: auto; }
.b-video-btn { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.b-video-btn .b-video { pointer-events: none; }
.b-play-ov {
  position: absolute;
  left: 50%; top: 50%;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  transition: scale 300ms var(--spring-bouncy);
}
.b-play-ov svg { width: 24px; height: 24px; margin-left: 3px; }
.b-video-btn:active .b-play-ov, .post-media-item:active .b-play-ov { scale: 0.9; }
.b-dur-ov { position: absolute; left: 10px; top: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

.b-avatar { align-self: flex-end; margin-right: 6px; }
.avatar-xs { width: 30px; height: 30px; font-size: 12px; }
.b-sender { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; font-size: 13px; font-weight: 600; color: var(--c-accent); }
.b-channel .avatar { width: 20px; height: 20px; font-size: 9px; }
.b-sign { font-style: normal; margin-right: 6px; }
.channel-post .bubble { max-width: min(92%, 520px); }
.room-icon { display: inline-grid; margin-right: 4px; color: var(--c-text-2); vertical-align: -2px; }
.room-icon svg { width: 16px; height: 16px; }
.b-comments {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% + 24px);
  margin: 8px -12px -8px;
  padding: 10px 12px;
  border: 0;
  border-top: 0.5px solid var(--c-hairline);
  border-radius: 0 0 20px 20px;
  background: none;
  color: var(--c-accent);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.b-comments span { flex: 1; }
.b-comments svg { width: 18px; height: 18px; }
.kind-photo .b-comments, .kind-video .b-comments { width: calc(100% + 8px); margin: 6px -4px -4px; }
html[data-theme="material"] .b-comments { border-top-color: var(--md-sys-color-outline-variant); }

.b-post {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(270px, 64vw);
  padding: 8px;
  border: 0;
  border-left: 3px solid currentColor;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  text-align: left;
}
.theirs .b-post { color: var(--c-accent); }
.b-post > * { color: var(--c-text); }
.mine .b-post > * { color: #fff; }
html[data-theme="material"] .mine .b-post > * { color: inherit; }
.b-post-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.b-post-thumb img, .b-post-thumb video { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 8px; }
.b-post-text { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.b-post-foot { display: flex; align-items: center; gap: 4px; font-size: 12px; opacity: 0.7; }
.b-post-foot svg { width: 14px; height: 14px; }
.b-post.is-gone { color: var(--c-text-2); font-size: 14px; }

/* нижняя кнопка вступить */
.chat-join .btn { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }

/* ---------- Просмотрщик фото и видео ---------- */
.viewer2 {
  position: fixed;
  inset: 0;
  z-index: 80;
  color: #fff;
  touch-action: none;
  user-select: none;
  animation: fade-in 220ms ease both;
}
.viewer2.is-closing { animation: fade-out 220ms ease both; }
.v-bg { position: absolute; inset: 0; background: #000; transition: opacity 200ms ease; }
.v-stage { position: absolute; inset: 0; overflow: hidden; }
.v-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(64px, env(safe-area-inset-top)) 0 max(84px, env(safe-area-inset-bottom));
  animation: v-in 380ms var(--spring) both;
}
.v-slide.from-right { animation-name: v-from-right; }
.v-slide.from-left { animation-name: v-from-left; }
@keyframes v-in { from { opacity: 0; transform: scale(0.92); } }
@keyframes v-from-right { from { opacity: 0.4; transform: translateX(40%); } }
@keyframes v-from-left { from { opacity: 0.4; transform: translateX(-40%); } }
.v-media { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform; }
video.v-media { width: 100%; height: 100%; }
.viewer2.is-zoomed .v-top, .viewer2.is-zoomed .v-bottom, .viewer2.is-zoomed .v-nav { opacity: 0; pointer-events: none; }
.v-top, .v-bottom {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  transition: opacity 250ms ease;
}
.v-top { top: 0; padding-top: max(10px, env(safe-area-inset-top)); background: linear-gradient(rgba(0, 0, 0, 0.6), transparent); }
.v-bottom { bottom: 0; flex-direction: column; align-items: stretch; padding-bottom: max(14px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); }
.v-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.v-title { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-sub, .v-count { font-size: 13px; color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
.v-btn {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  transition: scale 300ms var(--spring-bouncy), background 200ms ease;
}
.v-btn:active { scale: 0.9; }
.v-btn svg { width: 22px; height: 22px; }
.v-nav {
  position: absolute;
  top: 50%;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  margin-top: -24px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: opacity 250ms ease, scale 300ms var(--spring-bouncy);
}
.v-nav svg { width: 24px; height: 24px; }
.v-prev { left: 16px; }
.v-next { right: 16px; }
.v-nav[hidden] { display: none; }
@media (pointer: coarse) { .v-nav { display: none; } }
.v-caption { margin: 0 4px 8px; font-size: 15px; line-height: 1.4; max-height: 30vh; overflow-y: auto; }
.v-caption:empty { display: none; }
.v-controls { display: flex; align-items: center; gap: 10px; }
.v-controls[hidden] { display: none; }
.v-time, .v-dur { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 38px; text-align: center; }
.v-range {
  flex: 1;
  height: 28px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  --p: 0;
}
.v-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #fff calc(var(--p) * 100%), rgba(255, 255, 255, 0.3) 0); }
.v-range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #fff calc(var(--p) * 100%), rgba(255, 255, 255, 0.3) 0); }
.v-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.v-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
.v-bigplay {
  position: absolute;
  left: 50%; top: 50%;
  width: 72px; height: 72px;
  display: grid; place-items: center;
  margin: -36px 0 0 -36px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  transition: opacity 250ms ease, scale 350ms var(--spring-bouncy);
}
.v-bigplay svg { width: 32px; height: 32px; margin-left: 4px; }
.viewer2.is-playing .v-bigplay { opacity: 0; scale: 0.6; pointer-events: none; }
html[data-theme="material"] .v-btn, html[data-theme="material"] .v-nav { background: color-mix(in srgb, var(--md-sys-color-primary) 22%, rgba(0, 0, 0, 0.4)); }
html[data-theme="material"] .v-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--md-sys-color-primary) calc(var(--p) * 100%), rgba(255, 255, 255, 0.25) 0); }
html[data-theme="material"] .v-range::-webkit-slider-thumb { background: var(--md-sys-color-primary); border-radius: 4px; width: 6px; height: 22px; margin-top: -9px; }

/* ---------- Лист: превью медиа, пересылка ---------- */
.media-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; max-height: 40vh; overflow-y: auto; margin-bottom: 12px; }
.media-preview[data-count="1"] { grid-template-columns: 1fr; }
.mp-item { position: relative; overflow: hidden; border-radius: 14px; background: rgba(255, 255, 255, 0.06); aspect-ratio: 1; }
.media-preview[data-count="1"] .mp-item { aspect-ratio: auto; max-height: 38vh; }
.mp-item img, .mp-item video { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-preview[data-count="1"] .mp-item img, .media-preview[data-count="1"] .mp-item video { object-fit: contain; max-height: 38vh; }
.mp-badge { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; font-weight: 600; }
.mp-remove { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; }
.mp-remove svg { width: 16px; height: 16px; }
.caption-field textarea { min-height: 0; }
.forward-list { max-height: 55vh; overflow-y: auto; padding: 0; }

/* ---------- Лента ---------- */
.feed { display: flex; flex-direction: column; gap: 12px; padding: 4px 12px calc(var(--tabbar-space) + 16px); max-width: 680px; margin: 0 auto; }
.feed-empty-icon { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c-accent) 22%, #111); color: var(--c-accent); }
.feed-empty-icon svg { width: 34px; height: 34px; }
.feed-empty .btn { margin-top: 14px; width: auto; padding: 0 26px; }
.post {
  padding: 14px 14px 10px;
  border-radius: 26px;
  background: color-mix(in srgb, var(--c-accent) 7%, #101012);
  animation: chat-in 520ms var(--spring) both;
  animation-delay: calc(var(--i, 0) * 40ms);
  transition: opacity 250ms ease, scale 250ms ease;
}
html[data-theme="material"] .post { background: var(--md-sys-color-surface-container); border-radius: 28px; }
.post.is-full { animation: none; }
.post.is-removing, .comment.is-removing, .member.is-removing { opacity: 0; scale: 0.94; transition: opacity 220ms ease, scale 220ms ease; }
.post-head { display: flex; align-items: center; gap: 8px; }
.post-author { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.post-author .avatar { width: 42px; height: 42px; }
.post-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.post-who b { font-size: 15px; font-weight: 600; }
.post-who span { font-size: 13px; color: var(--c-text-2); }
.post-more-btn { width: 36px; height: 36px; color: var(--c-text-2); }
.post-text { margin: 10px 2px 0; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.post-media { display: grid; gap: 4px; margin: 10px -4px 0; border-radius: 18px; overflow: hidden; }
.post-media[data-count="2"], .post-media[data-count="4"] { grid-template-columns: 1fr 1fr; }
.post-media[data-count="3"] { grid-template-columns: 1fr 1fr; }
.post-media[data-count="3"] .post-media-item:first-child { grid-column: 1 / -1; }
.post-media-item { position: relative; display: block; padding: 0; border: 0; background: #000; cursor: zoom-in; overflow: hidden; }
.post-media-item img, .post-media-item video { display: block; width: 100%; height: 100%; max-height: 480px; object-fit: cover; }
.post-media:not([data-count="1"]) .post-media-item { aspect-ratio: 1; }
.post-media[data-count="3"] .post-media-item:first-child { aspect-ratio: 16 / 9; }
.post-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 26px; font-weight: 700; }
.post-code { margin-top: 10px; }
.post-reactions { margin: 10px 0 0; }
.post-actions { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.post-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--c-text-2);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background 200ms ease, scale 300ms var(--spring-bouncy);
}
.post-act:active { scale: 0.92; background: rgba(255, 255, 255, 0.08); }
.post-act svg, .post-views svg { width: 20px; height: 20px; }
.post-views { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding-right: 6px; font-size: 13px; color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.post-menu { position: fixed; z-index: 40; width: 220px; }

/* Новый пост */
.post-compose { display: flex; flex-direction: column; gap: 12px; }
.pc-head { display: flex; align-items: center; gap: 10px; }
.pc-head .avatar { width: 40px; height: 40px; }
.pc-head b { flex: 1; font-size: 16px; }
.pc-audience { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c-accent) 18%, transparent); color: var(--c-accent); font-size: 13px; font-weight: 600; }
.pc-audience svg { width: 15px; height: 15px; }
.pc-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pc-media:empty { display: none; }
.pc-code { display: flex; flex-direction: column; gap: 8px; }
.pc-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-tools .chip-btn { height: 40px; padding: 0 14px; }

/* ---------- Комментарии (пост ленты и пост канала) ---------- */
.thread { padding-bottom: 110px; }
.comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.comment { display: flex; align-items: flex-start; gap: 10px; padding: 8px 4px; animation: chat-in 420ms var(--spring) both; }
.comment-avatar { flex: none; padding: 0; border: 0; background: none; }
.comment-body { flex: 1; min-width: 0; padding: 8px 12px 10px; border-radius: 6px 18px 18px 18px; background: color-mix(in srgb, var(--c-accent) 8%, #1a1a1d); }
html[data-theme="material"] .comment-body { background: var(--md-sys-color-surface-container-high); }
.comment-name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--c-accent); }
.comment-name time { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--c-text-3); }
.comment-name .cosmic-badge { width: 15px; height: 15px; }
.comment-text { margin: 2px 0 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.comment-del { flex: none; width: 34px; height: 34px; display: grid; place-items: center; margin-top: 4px; border: 0; border-radius: 50%; background: none; color: var(--c-text-3); }
.comment-del svg { width: 17px; height: 17px; }
.comment-del:hover { color: var(--c-error); }
.thread-post { padding: 12px; border-radius: 24px; background: color-mix(in srgb, var(--c-accent) 7%, #101012); }
html[data-theme="material"] .thread-post { background: var(--md-sys-color-surface-container); }
.thread-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.thread-head > span { margin-left: auto; font-size: 12px; color: var(--c-text-3); }
.thread-post .bubble { max-width: none; background: transparent; padding: 0; }
.mini-composer {
  position: sticky;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: auto 12px 0;
  padding: 6px 6px 6px 18px;
  border-radius: 26px;
}
html[data-theme="glass"] .mini-composer { background: rgba(28, 28, 30, 0.72); }
html[data-theme="material"] .mini-composer { background: var(--md-tint-high); }
.mini-composer textarea { flex: 1; min-width: 0; max-height: 120px; padding: 11px 0; border: 0; outline: 0; background: none; resize: none; font-size: 16px; line-height: 22px; color: var(--c-text); caret-color: var(--c-accent); }
.mini-composer textarea::placeholder { color: var(--c-text-3); }
.mini-composer .send-btn { width: 40px; height: 40px; }
.role-chip { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c-accent) 18%, transparent); color: var(--c-accent); font-size: 12px; font-weight: 600; }
.role-chip svg { width: 13px; height: 13px; }
.role-chip.is-owner { background: rgba(255, 204, 0, 0.16); color: #ffd426; }

/* ---------- Группы и каналы ---------- */
.room-form { align-items: stretch; }
.room-avatar-wrap { display: grid; place-items: center; margin-bottom: 4px; }
.room-avatar-pick { position: relative; padding: 0; border: 0; background: none; border-radius: 50%; }
.room-avatar-pick:active { scale: 0.96; }
.field-hint { margin: -4px 8px 0; font-size: 13px; color: var(--c-text-2); }
.room-step, .room-add { display: flex; flex-direction: column; gap: 12px; }
.search-field { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 999px; background: var(--c-field-bg); }
html[data-theme="material"] .search-field { background: var(--md-tint-high); }
.search-field svg { width: 19px; height: 19px; color: var(--c-text-2); }
.search-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 16px; color: var(--c-text); }
.pick-list { padding: 0; }
.pick-row { cursor: pointer; }
.pick-row.is-disabled { opacity: 0.45; }
.pick-check { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--c-text-3); color: transparent; transition: background 200ms ease, box-shadow 200ms ease, scale 300ms var(--spring-bouncy); }
.pick-check svg { width: 16px; height: 16px; stroke-width: 3; }
.pick-row[aria-checked="true"] .pick-check, .pick-check.is-on { background: var(--c-accent); box-shadow: none; color: #fff; scale: 1.08; }
html[data-theme="material"] .pick-row[aria-checked="true"] .pick-check { color: var(--md-sys-color-on-primary); }
.room-create-btn { position: sticky; bottom: max(14px, env(safe-area-inset-bottom)); }
.hero-sub { margin: -2px 0 10px; color: var(--c-text-2); font-size: 15px; }
.hero-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pill-btn.is-danger { color: var(--c-error); }
.members { list-style: none; margin: 0; padding: 0; }
.member { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px; box-shadow: inset 0 0.5px 0 var(--c-hairline); transition: opacity 220ms ease; }
.member-main { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.member-main .avatar { width: 42px; height: 42px; }
.member-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.member-name { font-size: 16px; font-weight: 500; }
.member-sub { font-size: 13px; color: var(--c-text-2); }
.member-actions { display: flex; gap: 6px; padding-left: 54px; }
.member-actions .chip-btn { height: 32px; font-size: 13px; }
.avatar-room { border-radius: 32%; }
html[data-theme="material"] .avatar-room { border-radius: 30%; }
.list-empty span { max-width: 260px; }

/* ---------- Настройки ---------- */
.settings-group .row-icon { color: #fff !important; }
.ic-blue .row-icon { background: #0a84ff !important; }
.ic-pink .row-icon { background: #ff375f !important; }
.ic-violet .row-icon { background: #8e5cf7 !important; }
.ic-green .row-icon { background: #30b458 !important; }
.ic-red .row-icon { background: #ff453a !important; }
.ic-orange .row-icon { background: #ff9f0a !important; }
.ic-teal .row-icon { background: #19a7b5 !important; }
html[data-theme="material"] .settings-group .row-icon { background: var(--md-sys-color-primary-container) !important; color: var(--md-sys-color-on-primary-container) !important; }
.panel-body > .section-label:first-child, .panel-body > .note:first-child { margin-top: 4px; }
.panel-body > .group, .panel-body > section + section { margin-bottom: 4px; }
#privacy-body, #security-body, #notifications-body, #storage-body, #about-body { display: flex; flex-direction: column; gap: 10px; }
.sw-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-text small { font-size: 13px; line-height: 1.35; color: var(--c-text-2); }
.switch-row { min-height: 50px; }
.choice-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 0 4px; font-size: 16px; }
.choice-col { flex-direction: column; align-items: stretch; padding: 6px 4px; }
.segs { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(118, 118, 128, 0.24); }
.segs-wrap { flex-wrap: wrap; }
.seg-btn {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--c-text-2);
  font-size: 13px;
  font-weight: 600;
  transition: background 220ms ease, color 220ms ease, scale 300ms var(--spring-bouncy);
}
.seg-btn:active { scale: 0.94; }
.seg-btn[aria-checked="true"] { background: var(--c-accent); color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); }
html[data-theme="material"] .segs { padding: 0; gap: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--md-sys-color-outline); overflow: hidden; }
html[data-theme="material"] .seg-btn { border-radius: 0; min-height: 36px; }
html[data-theme="material"] .seg-btn + .seg-btn { box-shadow: inset 1px 0 0 var(--md-sys-color-outline); }
html[data-theme="material"] .seg-btn[aria-checked="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); box-shadow: none; }
.blocked-row .avatar { width: 34px; height: 34px; }
.sec-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 16px 6px; text-align: center; }
.sec-hero h3 { margin: 10px 0 0; font-size: 20px; }
.sec-hero p { margin: 0; color: var(--c-text-2); font-size: 14px; }
.sec-shield { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 26px; background: color-mix(in srgb, var(--c-accent) 22%, transparent); color: var(--c-accent); animation: pop-in 520ms var(--spring-bouncy) both; }
.sec-shield svg { width: 36px; height: 36px; }
.sec-shield.is-danger { background: rgba(255, 69, 58, 0.16); color: var(--c-error); }
html[data-theme="material"] .sec-shield { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border-radius: 50%; }
.btn .i, .btn svg { width: 19px; height: 19px; }
.btn:has(svg) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.storage-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 26px; background: color-mix(in srgb, var(--c-accent) 12%, #111113); }
html[data-theme="material"] .storage-card { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border-radius: 28px; }
.storage-big { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.storage-sub { font-size: 14px; opacity: 0.7; }
.storage-bar { height: 8px; margin: 8px 0; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.storage-bar span { display: block; height: 100%; border-radius: inherit; background: var(--c-accent); animation: grow 900ms var(--spring) both; transform-origin: 0 50%; }
@keyframes grow { from { transform: scaleX(0); } }
.storage-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; font-size: 12px; opacity: 0.85; }
.storage-stats b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.about-hero { display: flex; flex-direction: column; align-items: center; padding: 10px 0; text-align: center; }
.about-hero h2 { margin: 14px 0 2px; font-size: 26px; }
.about-hero p { margin: 0; color: var(--c-text-2); }
.about-list p { display: flex; gap: 12px; margin: 0; padding: 8px 4px; font-size: 15px; line-height: 1.4; color: var(--c-text-2); }
.about-list p b { color: var(--c-text); }
.about-list svg { flex: none; width: 20px; height: 20px; color: var(--c-accent); margin-top: 1px; }

/* ---------- Код-пароль в настройках и экран блокировки ---------- */
.passcode-body { display: flex; flex-direction: column; align-items: center; }
.pc-step { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 12px; }
.pass-sub { margin: 10px 0 24px; color: var(--c-text-2); font-size: 16px; text-align: center; }
.pc-step .keypad { margin-top: 36px; }
.delete-confirm { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 380px; padding-top: 20px; text-align: center; }
.delete-confirm h3 { margin: 6px 0 0; font-size: 22px; }
.delete-confirm p { margin: 0 0 8px; color: var(--c-text-2); line-height: 1.45; }
.delete-confirm .btn { width: 100%; }
.lock {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--page-bg, #000);
  animation: fade-in 260ms ease both;
}
.lock::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--c-accent) 28%, transparent), transparent 70%); }
.lock.is-leaving { animation: lock-out 420ms var(--md-emphasized-accel) both; }
@keyframes lock-out { to { opacity: 0; transform: scale(1.08); filter: blur(8px); } }
.lock-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; }
.avatar-lock { width: 84px; height: 84px; font-size: 30px; }
.lock-inner .screen-title { margin: 14px 0 26px; }
.lock-inner .keypad { margin-top: 40px; }
.link-btn { margin-top: 16px; padding: 10px 16px; border: 0; background: none; color: var(--c-accent); font-size: 16px; font-weight: 600; }
.lock .link-btn { margin-top: 26px; color: var(--c-text-2); }

@media (prefers-reduced-motion: reduce) {
  .react-fly, .burst { display: none; }
  .post, .comment, .v-slide { animation: none; }
}

/* правки после проверки */
.post-compose { margin-top: 0; }
.post-compose .field-area { padding: 14px 18px 16px !important; }
.choice-row .sw-text { flex: 1 1 auto; }
.choice-row .segs { flex: none; }
.segs-wrap { justify-content: flex-start; align-self: flex-start; }
.caption-field textarea { font-family: inherit; font-size: 16px; }
.thread, #post-body, #room-body .room-add, .comments { text-align: left; }
.mini-composer { flex-direction: row; width: auto; }
.mini-composer textarea { text-align: left; }
.mini-composer .send-btn { flex: none; position: relative; display: grid; place-items: center; border: 0; border-radius: 50%; }
.mini-composer .send-btn svg { position: static; width: 20px; height: 20px; }
.room-form { margin-top: 0; }
.chat-meta .pick-check svg { color: inherit; }