/* ============================================================================
   Основной экран мессенджера
   ========================================================================== */
.app-screen {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 12px;
  padding: 12px;
}

/* ── Боковая панель ───────────────────────────────────────────────────────── */
.sidebar {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 0;
  /* Edge-to-edge (Capacitor/Android 15+): отступы под статус-бар и жестовую панель */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* бренд абсолютно по центру — кнопки прижаты вправо */
  position: relative;
  min-height: 100px; /* бренд 72px (после среза прозрачного низа тайтла) + padding 16+12 */
  padding: 16px 16px 12px;
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; position: absolute; left: calc(50% - 30px); top: calc(50% - 8px); transform: translate(-50%, -50%); }
/* Кнопки шапки — по линии глифов LOOM (центр бренда +7px);
   по горизонтали — по центру зазора между «M» и правым краем (край глифов ≈ 50%+79px) */
.sidebar-head .btn-icon { position: absolute; right: calc(25% - 60px); top: calc(50% - 1px); transform: translateY(-50%); }
.sidebar-head .btn-icon#btn-admin { right: calc(25% - 12px); }
.sidebar-mark { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 2px 8px var(--thread-glow)); margin-top: 14px; }
/* Логотип = кнопка музыкального плеера + эквалайзер-индикатор состояния */
.brand-mark-wrap { position: relative; display: inline-flex; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 50%; padding: 3px; aspect-ratio: 1 / 1; align-items: center; justify-content: center; transition: filter .16s ease; background: none; box-shadow: none; }
.brand-mark-wrap:hover { filter: drop-shadow(0 0 8px rgba(124,92,255,.55)); }
.brand-mark-wrap:active { transform: scale(.88); filter: drop-shadow(0 0 12px rgba(124,92,255,.8)); }
@keyframes brandTap { 0% { transform: scale(1); } 45% { transform: scale(.86); } 100% { transform: scale(1); } }
.brand-mark-wrap.tapped { animation: brandTap .32s ease-out; }
@keyframes fpRise { from { opacity: 0; transform: scale(.06); } to { opacity: 1; transform: scale(1); } }
#fplayer.fp-opening { animation: fpRise .32s cubic-bezier(.22,.61,.36,1); }
@keyframes fpSink { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.06); } }
/* 6.1: анимация открытия/закрытия чата (мобильный вид) */
@keyframes chatSlideIn { from { opacity: .35; transform: translateX(22%) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes chatSlideOut { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: .25; transform: translateX(26%) scale(.98); } }
@keyframes listFadeIn { from { opacity: .5; transform: translateX(-8%); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 820px) {
  .chat-pane.chat-opening { animation: chatSlideIn .26s cubic-bezier(.22,.61,.36,1); }
  .chat-pane.chat-closing { animation: chatSlideOut .22s cubic-bezier(.4,0,.7,.4) forwards; }
  .sidebar.list-returning { animation: listFadeIn .22s cubic-bezier(.22,.61,.36,1); }
}
#fplayer.fp-closing { animation: fpSink .26s cubic-bezier(.4,0,.7,.4) forwards; }
.brand-eq { position: absolute; right: -3px; bottom: -1px; display: flex; align-items: flex-end; gap: 2px; height: 15px; padding: 2px 4px; box-sizing: border-box; border-radius: 8px; background: rgba(8, 10, 22, 0.88); border: 1px solid rgba(124, 92, 255, 0.5); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); pointer-events: none; }
.brand-eq i { width: 3px; height: 4px; border-radius: 1.5px; background: linear-gradient(180deg, #6ee7ff, #a78bfa); }
.brand-eq.playing i { animation: brandEq 0.9s ease-in-out infinite; }
.brand-eq.playing i:nth-child(2) { animation-delay: 0.22s; }
.brand-eq.playing i:nth-child(3) { animation-delay: 0.44s; }
@keyframes brandEq { 0%, 100% { height: 4px; } 50% { height: 11px; } }
/* Пустой плейлист в полноэкранном плеере */
.fp-q-empty { color: var(--text-faint); text-align: center; padding: 14px 10px; font-size: 13px; }
.sidebar-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 0.04em; }

.sidebar-search {
  position: relative;
  padding: 0 16px 12px;
}
/* lucide заменяет <i> на <svg> — целимся в оба, иконка внутри поля */
.sidebar-search i,
.sidebar-search svg {
  position: absolute;
  left: 28px; top: 21px; /* центр инпута (~43px), чуть выше середины */
  transform: translateY(-55%);
  width: 19px; height: 19px;
  color: var(--text-faint);
  pointer-events: none;
}
.sidebar-search .input { padding-left: 38px; }

.sidebar-nav {
  display: flex;
  gap: 7px;
  padding: 0 16px 12px;
  flex-wrap: nowrap;
}
.nav-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 7px clamp(6px, 2.5vw, 13px);
  flex: 0 1 auto;
  min-width: 0;
  justify-content: center;
  white-space: nowrap;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-pill.active {
  background: var(--secure-dim);
  border-color: rgba(52, 211, 153, 0.3);
  color: var(--secure);
}
.nav-pill[data-soon="true"] { opacity: 0.6; }
.soon {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 5px;
  border-radius: 5px;
  color: var(--text-faint);
}

.chat-list { flex: 1; overflow-y: auto; padding: 4px 8px; min-height: 0; }

.list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  color: var(--text-faint);
  text-align: center;
  padding: 20px;
}
.list-empty i { width: 34px; height: 34px; opacity: 0.5; }
.list-empty p { font-size: 13px; }

.chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.18s;
  position: relative;
}
.chat-item:hover { background: rgba(255, 255, 255, 0.04); }
.chat-item.active { background: rgba(99, 102, 241, 0.13); }
.chat-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 18%;
  height: 64%;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(var(--thread-1), var(--thread-2));
}
.chat-item-meta { flex: 1; min-width: 0; }
.chat-item-name { font-weight: 600; font-size: 14.5px; color: var(--text); display: block; }
.chat-item-preview {
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-item-preview i { width: 12px; height: 12px; }
.chat-item-badge {
  background: #3b9eff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  box-shadow: 0 2px 8px rgba(59, 158, 255, 0.4);
  flex-shrink: 0;
}

/* Плашка-сводка непрочитанных при входе */
.unread-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 14px 0;
  padding: 12px 14px;
  background: linear-gradient(120deg, rgba(59, 158, 255, 0.16), rgba(99, 102, 241, 0.16));
  border: 1px solid rgba(59, 158, 255, 0.3);
  border-radius: var(--radius);
  font-size: 13.5px;
  color: var(--text);
  animation: rise 0.4s var(--ease) both;
}
.unread-banner i[data-lucide="bell"] {
  width: 18px; height: 18px;
  color: #3b9eff;
  flex-shrink: 0;
}
.unread-banner span { flex: 1; line-height: 1.4; }
.unread-banner-close {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.unread-banner-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.unread-banner-close i { width: 15px; height: 15px; }

/* Профиль внизу */
.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.profile-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.profile-name { font-weight: 600; font-size: 14px; }
.profile-status { font-size: 11.5px; color: var(--secure); display: flex; align-items: center; gap: 5px; }
.dot-online, .dot-secure { width: 7px; height: 7px; border-radius: 50%; background: var(--secure); box-shadow: 0 0 6px var(--secure); }
.dot-thread { width: 7px; height: 7px; border-radius: 50%; background: var(--thread-1); box-shadow: 0 0 6px var(--thread-glow); display:inline-block; }
.dot-secure { display:inline-block; }

/* ── Окно чата ────────────────────────────────────────────────────────────── */
.chat-pane {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Edge-to-edge: шапка чата ниже статус-бара, композер выше жестовой панели */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border);
  min-height: 0;
}

.chat-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 20px;
}
.chat-empty-mark { width: 76px; height: 76px; object-fit: contain; opacity: 0.85; filter: drop-shadow(0 6px 24px var(--thread-glow)); margin-bottom: 4px; }
.chat-empty h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; }
.chat-empty p { color: var(--text-dim); font-size: 14px; line-height: 1.6; }

.chat-active { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
}
.chat-back { display: none; }
.chat-header-meta { flex: 1; min-width: 0; }
.chat-peer-name { font-weight: 600; font-size: 16px; display: block; }
.chat-peer-status { font-size: 12px; color: var(--secure); display: flex; align-items: center; gap: 5px; }
.lock-ico { width: 12px; height: 12px; flex-shrink: 0; }
.chat-header-actions { display: flex; gap: 7px; }
.chat-header-actions [data-soon="true"] { opacity: 0.5; }

/* Лента сообщений */
.messages {
  background-color: var(--bg, #0d0d12);
  background: url("../chat-bg.png?v=2") center/cover no-repeat fixed;
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}
.msg-row { display: flex; margin-top: 8px; animation: rise 0.3s var(--ease) both; }
.msg-row { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.msg-row.out { justify-content: flex-end; }
.bubble {
  max-width: min(560px, 74%);
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.45;
  word-wrap: break-word;
  white-space: pre-wrap;
  position: relative;
}
/* Сообщение только из эмодзи — крупно, без пузыря (как в WhatsApp/Telegram) */
.bubble.emoji-only {
  background: none !important;
  border: none !important;
  padding: 2px 4px;
  font-size: 48px;
  line-height: 1.1;
}
.bubble.emoji-only .bubble-time {
  font-size: 11px;
}
.msg-row.in .bubble {
  background: var(--bg-elevated);
  border-top-left-radius: 0;
}
.msg-row.out .bubble {
  background: linear-gradient(135deg, var(--thread-1), var(--thread-2));
  color: #fff;
  border-top-right-radius: 0;
}
/* ─── Голосовое сообщение: компактный плеер ─── */
.voice-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  min-width: 180px;
  max-width: 280px;
}
.voice-play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255,255,255,0.25);
  color: inherit;
  transition: background 0.15s;
}
.msg-row.in .voice-play { background: var(--thread-1); color: #fff; }
.voice-play:hover { filter: brightness(1.1); }
.voice-play:disabled { opacity: 0.5; cursor: default; }
.voice-play i { width: 18px; height: 18px; }
.voice-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.voice-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  min-width: 120px;
}
.vw-bar {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.35);
}
.msg-row.in .vw-bar { background: rgba(255,255,255,0.22); }
.msg-row.out .vw-bar.played { background: #fff; opacity: 1; }
.msg-row.in .vw-bar.played { background: var(--thread-1, #7c5cff); opacity: 1; }
.voice-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.voice-dur {
  font-size: 11px;
  opacity: 0.75;
  flex-shrink: 0;
}
.voice-meta .bubble-time { float: none; margin: 0; }
.voice-side-avatar {
  width: 38px; height: 38px; min-width: 38px;
  border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 15px;
  align-self: center;
}
.voice-play.playing i { color: inherit; }
.bubble-time {
  font-size: 10.5px;
  opacity: 0.6;
  display: inline-block;
  float: right;
  margin: 8px 0 0 8px;
  line-height: 1;
}
.msg-row.out .bubble-time { color: rgba(255,255,255,0.85); }
.ticks { margin-left: 5px; letter-spacing: -2px; font-weight: 700; display: inline-block; }
.ticks.read { color: #7fd6ff; opacity: 1; }
.ticks.read.just-read { animation: ticksRead .7s ease-out; }
@keyframes ticksRead {
  0%   { transform: translateY(0) scale(1); color: #7fd6ff; filter: none; }
  25%  { transform: translateY(-4px) scale(1.5); color: #ffffff; filter: drop-shadow(0 0 10px #7fd6ff); }
  50%  { transform: translateY(0) scale(1.2); color: #7fd6ff; filter: drop-shadow(0 0 8px #7fd6ff); }
  70%  { transform: translateY(-2px) scale(1.35); color: #ffffff; filter: drop-shadow(0 0 12px #7fd6ff); }
  100% { transform: translateY(0) scale(1); color: #7fd6ff; filter: none; }
}

.msg-day {
  align-self: center;
  font-size: 11px;
  color: var(--text-faint);
  background: rgba(0,0,0,0.25);
  padding: 4px 12px;
  border-radius: 99px;
  margin: 14px 0 6px;
}

/* Композер */
.composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.15);
}
.composer-input-wrap { flex: 1; }
.composer-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 10px 16px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  outline: none;
  box-sizing: border-box;
  line-height: 1.4;
  transition: border-color 0.2s;
}
.composer-input:focus { border-color: var(--thread-1); }
#msg-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.94em; }
.composer-send { width: 44px; height: 44px; padding: 0; border-radius: 50%; flex-shrink: 0; }
/* Голосовые: UI записи */
.voice-recording-ui {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 0 12px;
  color: var(--text-secondary, #aaa);
  font-size: 13px;
  user-select: none;
}
.voice-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3b30;
  flex-shrink: 0;
  animation: voicePulse 1s infinite;
}
@keyframes voicePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.voice-rec-hint { font-size: 11px; opacity: 0.7; }
#btn-mic { -webkit-user-select: none; user-select: none; touch-action: none; }

/* ── Модалка безопасности ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(5, 6, 9, 0.7);
  backdrop-filter: blur(6px);
  animation: fade 0.2s var(--ease) both;
  padding: 20px;
}
.modal {
  width: min(440px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  box-shadow: var(--shadow-deep);
  animation: scaleIn 0.3s var(--ease) both;
}
.modal-close { position: absolute; top: 16px; right: 16px; }
.modal-head { text-align: center; margin-bottom: 22px; }
.security-shield {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--secure-dim);
  border: 1px solid rgba(52, 211, 153, 0.3);
}
.security-shield i { width: 28px; height: 28px; color: var(--secure); }
.modal-head h2 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin-bottom: 8px; }
.modal-head p { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

.fingerprint-block { margin-bottom: 14px; }
.fp-label { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; display: flex; align-items: center; gap: 7px; font-weight: 600; }
.fp-value {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--text);
  word-break: break-all;
}

/* Визуальный отпечаток — сетка "нитей" из хэша */
.fp-visual {
  height: 48px;
  border-radius: var(--radius-sm);
  margin: 16px 0;
  display: flex;
  gap: 3px;
  overflow: hidden;
}
.fp-bar { flex: 1; border-radius: 2px; }

.modal-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-faint);
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.modal-foot i { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Эмодзи-панель ────────────────────────────────────────────────────────── */
.emoji-panel {
  position: fixed;
  z-index: 90;
  width: min(340px, 92vw);
  height: 360px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-deep);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: scaleIn 0.18s var(--ease) both;
}
.emoji-search { padding: 10px; border-bottom: 1px solid var(--border); }
.emoji-cats { display: flex; gap: 2px; padding: 8px 8px 0; flex-wrap: wrap; }
.emoji-cat {
  background: none; border: none; cursor: pointer;
  font-size: 18px; padding: 6px; border-radius: 8px;
  opacity: 0.6; transition: all 0.15s;
}
.emoji-cat:hover, .emoji-cat.active { opacity: 1; background: rgba(255,255,255,0.07); }
.emoji-grid {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 2px;
  align-content: start;
}
.emoji-btn {
  background: none; border: none; cursor: pointer;
  font-size: 22px; padding: 5px; border-radius: 8px;
  transition: background 0.12s, transform 0.12s;
  line-height: 1;
}
.emoji-btn:hover { background: rgba(255,255,255,0.09); transform: scale(1.18); }
.emoji-cat-label {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 4px 2px;
}

/* ── Адаптив ──────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .app-screen { grid-template-columns: 1fr; padding: 0; gap: 0; }
  .sidebar { border-radius: 0; }
  .chat-pane { border-radius: 0; }
  /* На мобиле показываем что-то одно */
  .app-screen[data-view="chat"] .sidebar { display: none; }
  .app-screen[data-view="list"] .chat-pane { display: none; }
  .chat-back { display: inline-flex !important; width: 44px; height: 44px; }
  .chat-back i { width: 22px; height: 22px; }
  /* На мобиле статус в одну строку, без переноса */
  .chat-peer-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70vw; }
  #peer-status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
  .chat-peer-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
  .composer-input { min-height: 44px; }
  /* Крупнее композер на мобильном (ближе к WhatsApp) */
  .composer { gap: 10px; padding: 10px 12px; }
  .composer .btn-icon { width: 46px; height: 46px; }
  .composer .btn-icon i { width: 22px; height: 22px; }
  .composer-send { width: 58px; height: 58px; }
  .composer-send i { width: 28px; height: 28px; }
  .composer-input { font-size: 16px; padding: 10px 13px; }
  .bubble { font-size: 16px; }
  .chat-header-actions .btn-icon { width: 44px; height: 44px; }
  .chat-header-actions .btn-icon i { width: 22px; height: 22px; }
  /* Крупнее сообщения (как WhatsApp) */
  .bubble { font-size: 17px; line-height: 1.42; padding: 11px 15px; }
  .bubble-time { font-size: 12px; }
  /* Крупнее список чатов/групп */
  .chat-item { padding: 13px 12px; gap: 14px; }
  .chat-item .avatar { width: 54px !important; height: 54px !important; font-size: 21px !important; }
  .chat-item-name { font-size: 17px; }
  .chat-item-group .chat-item-name { font-size: 15.5px; }
  .chat-item-preview { font-size: 14px; }
  /* Крупнее табы Чаты/Группы */
  .nav-pill { font-size: clamp(13px, 4vw, 16px); padding: 10px clamp(8px, 3vw, 20px); }
  /* Выравнивание отступов ленты (справа скроллбар добавляет ширину) */
  .messages { padding: 18px 10px 18px 14px; }
  /* Компактнее плитка по вертикали */
  .bubble { padding: 6px 9px 7px 9px; border-radius: 9px; }
  .msg-row { margin-top: 1.5px; }
  /* Имя автора в группе — крупнее (как WhatsApp) */
  .bubble .group-author { font-size: 16px; font-weight: 500; letter-spacing: -0.3px; font-stretch: condensed; line-height: 1.1; margin-top: -2px; }
  /* Без рамки у входящих (убирает шов хвостика, как WhatsApp) */
  .msg-row.in .bubble { border: none; }
  /* Хвостик не показываем у эмодзи-сообщений */

  /* Время вплотную к низу */
  .bubble { padding: 5px 9px 4px 9px; }
  .bubble-time { margin: 10px 0 0 8px; }
  /* Крупнее кнопка play голосового */
  .voice-play { width: 44px; height: 44px; }
  .voice-play i { width: 24px; height: 24px; }
  /* Полоса прогресса голосового не сжимается в ноль */
  .voice-wave { min-width: 70px; }
  .voice-bubble { min-width: 230px; }
}

/* UltraWide — ограничиваем ширину ленты для читаемости */
@media (min-width: 1700px) {
  .app-screen { grid-template-columns: 380px 1fr; max-width: 2200px; margin: 0 auto; }
}

/* ── Настройки ────────────────────────────────────────────────────────────── */
.sidebar-clickable { cursor: default; }
.settings-avatar-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
}
.settings-avatar { border: 2px solid var(--border-bright); }
.settings-avatar-actions { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.settings-avatar-actions .btn { padding: 8px 14px; font-size: 13px; }
.btn-danger-ghost { color: var(--danger); }
.settings-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }

.settings-section { margin-bottom: 18px; }
.settings-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 8px;
  padding-left: 2px;
}
.settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 7px;
  font-size: 14px;
  color: var(--text);
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
}
.settings-item i[data-lucide] { width: 18px; height: 18px; color: var(--text-dim); flex-shrink: 0; }
.settings-item span { flex: 1; }
.settings-item strong { color: var(--text-dim); font-weight: 600; }
.settings-clickable { cursor: pointer; transition: background 0.15s; }
.settings-clickable:hover { background: rgba(255,255,255,0.07); }
.settings-chevron { width: 16px !important; height: 16px !important; }
.settings-soon { opacity: 0.55; }
.settings-danger { color: var(--danger); }
.settings-danger i[data-lucide] { color: var(--danger); }

/* ─── Контекстное меню сообщения (long-press) ─────────────────────────────── */
.msg-ctx-overlay {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  animation: ctxFade 0.15s ease;
}
.msg-ctx-overlay.hidden { display: none; }
@keyframes ctxFade { from { opacity: 0; } to { opacity: 1; } }

.msg-ctx-reactions {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface, #1c1c26);
  border: 1px solid var(--border);
  border-radius: 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.reaction-pick {
  background: none;
  border: none;
  font-size: 30px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.12s ease, background 0.12s ease;
}
.reaction-pick:hover, .reaction-pick:active {
  transform: scale(1.25);
  background: rgba(255, 255, 255, 0.08);
}

.msg-ctx-actions {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  background: var(--surface, #1c1c26);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.ctx-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}
.ctx-action:hover, .ctx-action:active { background: rgba(255, 255, 255, 0.06); }
.ctx-action:not(:last-child) { border-bottom: 1px solid var(--border); }
.ctx-action i { width: 19px; height: 19px; flex-shrink: 0; }
.ctx-action.danger { color: #ff6b6b; }

/* ─── Реакции под сообщением ──────────────────────────────────────────────── */
.msg-row { flex-wrap: wrap; }
.reactions-row {
  flex-basis: 100%;
  display: flex;
  gap: 4px;
  margin-top: -8px;
  position: relative;
  z-index: 2;
  padding: 0 4px;
}
.msg-row.out .reactions-row { justify-content: flex-end; }
.msg-row.in .reactions-row { justify-content: flex-start; }
.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface, #1c1c26);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 7px;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s ease;
}
.reaction-chip:active { transform: scale(0.92); }
.reaction-chip.mine {
  background: rgba(124, 92, 255, 0.22);
  border-color: var(--thread-1, #7c5cff);
}
.rc-count { font-size: 12px; color: var(--text-dim); font-weight: 600; }

/* ─── Попап "кто поставил реакцию" ────────────────────────────────────────── */
.rd-overlay {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: ctxFade 0.15s ease;
}
.rd-overlay.hidden { display: none; }
.rd-panel {
  width: 100%;
  max-width: 340px;
  background: var(--surface, #1c1c26);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.rd-title {
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.rd-list { max-height: 50vh; overflow-y: auto; }
.rd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
}
.rd-item:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.05); }
.rd-emoji { font-size: 22px; line-height: 1; }
.rd-name { color: var(--text); font-size: 15px; }

/* ─── Панель "ответ" над composer ─────────────────────────────────────────── */
.reply-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid var(--border);
}
.reply-bar.hidden { display: none; }
.reply-bar-line {
  width: 3px;
  align-self: stretch;
  background: var(--thread-1, #7c5cff);
  border-radius: 2px;
  flex-shrink: 0;
}
.reply-bar-content { flex: 1; min-width: 0; }
.reply-bar-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--thread-1, #7c5cff);
}
.reply-bar-text {
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reply-bar-close { width: 36px; height: 36px; flex-shrink: 0; }

/* ─── Цитата внутри пузыря (ответное сообщение) ───────────────────────────── */
.reply-quote {
  display: block;
  border-left: 3px solid var(--thread-1, #7c5cff);
  padding: 3px 8px;
  margin-bottom: 5px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  cursor: pointer;
}
.msg-row.out .reply-quote { background: rgba(255, 255, 255, 0.15); color: rgba(255,255,255,0.9); }

/* ─── Диалог пересылки ────────────────────────────────────────────────────── */
.fwd-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: ctxFade 0.15s ease;
}
.fwd-overlay.hidden { display: none; }
.fwd-panel {
  width: 100%;
  max-width: 360px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--surface, #1c1c26);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.fwd-title {
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.fwd-list { overflow-y: auto; flex: 1; }
.fwd-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.fwd-contact:hover, .fwd-contact:active { background: rgba(255, 255, 255, 0.06); }
.fwd-contact:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.05); }
.fwd-contact-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--thread-1, #7c5cff);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 15px; flex-shrink: 0;
  background-size: cover; background-position: center;
}
.fwd-contact-name { color: var(--text); font-size: 15px; }
.fwd-cancel { margin: 12px 18px 16px; }

/* Метка "Переслано" */
.fwd-label {
  display: block;
  font-size: 12px;
  font-style: italic;
  color: var(--text-dim);
  margin-bottom: 3px;
  opacity: 0.8;
}
.msg-row.out .fwd-label { color: rgba(255,255,255,0.75); }

/* Голосовое с меткой "Переслано" — метка над плеером */
.voice-bubble.has-fwd {
  flex-wrap: wrap;
}
.voice-bubble.has-fwd .fwd-label {
  flex-basis: 100%;
  width: 100%;
}

/* ─── Админ-панель ─────────────────────────────────────────────────────────── */
.admin-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.admin-overlay.hidden { display: none; }
.admin-box {
  width: 100%; max-width: 460px; max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--surface, #1c1c26);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4); overflow: hidden;
}
.admin-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.admin-title { font-size: 16px; font-weight: 600; color: var(--text); }
.admin-list { overflow-y: auto; flex: 1; }
.admin-user {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.admin-user-info { flex: 1; min-width: 0; }
.admin-user-name { color: var(--text); font-size: 15px; font-weight: 500; }
.admin-user-meta { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.admin-del-btn {
  background: rgba(239,68,68,0.15); color: #ef4444;
  border: 1px solid rgba(239,68,68,0.3); border-radius: 8px;
  padding: 6px 12px; font-size: 13px; cursor: pointer; flex-shrink: 0;
  transition: background 0.12s;
}
.admin-del-btn:hover { background: rgba(239,68,68,0.25); }

/* ─── Меню действий админа над пользователем ──────────────────────────────── */
.aum-overlay {
  position: fixed; inset: 0; z-index: 1250;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.aum-overlay.hidden { display: none; }
.aum-panel {
  width: 100%; max-width: 280px;
  background: var(--surface, #1c1c26);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4); overflow: hidden;
}
.aum-header {
  padding: 14px 18px; font-size: 15px; font-weight: 600; color: var(--text);
  border-bottom: 1px solid var(--border); text-align: center;
}
.aum-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 18px; background: none; border: none; cursor: pointer;
  color: var(--text); font-size: 15px; text-align: left;
  transition: background 0.12s;
}
.aum-item:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.05); }
.aum-item:hover { background: rgba(255,255,255,0.06); }
.aum-item i { width: 20px; height: 20px; }
.aum-danger { color: #ef4444; }

/* Ссылки внутри сообщений */
.msg-link {
  color: #8ab4ff;
  text-decoration: underline;
  word-break: break-all;
}
.msg-row.out .msg-link { color: #cfe0ff; }

/* ─── Диалог создания группы ──────────────────────────────────────────────── */
.gc-overlay {
  position: fixed; inset: 0; z-index: 1150;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.gc-overlay.hidden { display: none; }
.gc-panel {
  width: 100%; max-width: 380px; max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--surface, #1c1c26);
  border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4); overflow: hidden;
}
.gc-title {
  padding: 16px 18px; font-size: 17px; font-weight: 600; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.gc-name-input {
  margin: 14px 18px 6px; padding: 11px 14px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text); font-size: 15px; outline: none;
  box-sizing: border-box;
}
.gc-name-input:focus { border-color: var(--thread-1, #7c5cff); }
.gc-subtitle {
  padding: 8px 18px 4px; font-size: 13px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.gc-list { overflow-y: auto; flex: 1; min-height: 120px; }
.gc-contact {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; cursor: pointer;
}
.gc-contact:hover { background: rgba(255,255,255,0.05); }
.gc-contact-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--thread-1, #7c5cff); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; flex-shrink: 0;
  background-size: cover; background-position: center;
}
.gc-contact-name { flex: 1; color: var(--text); font-size: 15px; }
.gc-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.12s;
}
.gc-contact.selected .gc-check {
  background: var(--thread-1, #7c5cff); border-color: var(--thread-1, #7c5cff);
}
.gc-contact.selected .gc-check::after {
  content: '✓'; color: #fff; font-size: 14px; font-weight: 700;
}
.gc-actions {
  display: flex; gap: 10px; padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.gc-actions .btn { flex: 1; }

/* Имя автора в групповом сообщении */
.group-author {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--thread-1, #7c5cff);
  margin-bottom: 2px;
}

/* Бейдж непрочитанных на вкладках Чаты/Группы */
.nav-pill { position: relative; }
.tab-badge { animation: fpUnreadPulse 1.4s ease-in-out infinite; }
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* ─── Панель информации о группе ──────────────────────────────────────────── */
.gi-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.gi-overlay.hidden { display: none; }
.gi-box {
  width: 100%; max-width: 400px; max-height: 85vh;
  display: flex; flex-direction: column;
  background: var(--surface, #1c1c26);
  border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5); overflow: hidden;
}
.gi-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.gi-head-title { font-size: 16px; font-weight: 600; color: var(--text); }
.gi-body { overflow-y: auto; padding: 20px; }
.gi-avatar-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto 12px; }
.gi-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--thread-1, #7c5cff); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 600;
  background-size: cover; background-position: center;
}
.gi-avatar-edit {
  position: absolute; bottom: 0; right: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--thread-1, #7c5cff); color: #fff;
  border: 2px solid var(--surface, #1c1c26); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gi-avatar-edit i { width: 16px; height: 16px; }
.gi-name { text-align: center; font-size: 20px; font-weight: 600; color: var(--text); }
.gi-count { text-align: center; font-size: 14px; color: var(--text-dim); margin-top: 4px; }
.gi-invite { width: 100%; margin: 16px 0 8px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.gi-members-title {
  font-size: 13px; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.5px; margin: 16px 0 8px;
}
.gi-member {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.gi-member-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--thread-2, #5c8cff); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px; flex-shrink: 0;
  background-size: cover; background-position: center;
}
.gi-member-info { flex: 1; min-width: 0; }
.gi-member-name { color: var(--text); font-size: 15px; font-weight: 500; }
.gi-member-role { font-size: 12px; color: var(--thread-1, #7c5cff); margin-top: 1px; }
.gi-kick {
  background: rgba(239,68,68,0.15); color: #ef4444;
  border: 1px solid rgba(239,68,68,0.3); border-radius: 8px;
  padding: 5px 10px; font-size: 13px; cursor: pointer; flex-shrink: 0;
}

/* Кнопки "Отмена" — видимый вторичный стиль */
.gc-cancel, .fwd-cancel {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  color: var(--text);
}
.gc-cancel:hover, .fwd-cancel:hover {
  background: rgba(255,255,255,0.14);
}

/* Голосовое в группе с именем автора — имя сверху */
.voice-bubble .group-author { flex-basis: 100%; width: 100%; }
.voice-bubble:has(.group-author) { flex-wrap: wrap; }

/* Поля, видимые только при регистрации */
.register-only.hidden { display: none; }
.field-optional { color: var(--text-dim); font-weight: 400; font-size: 12px; }

/* ─── Панель профиля ──────────────────────────────────────────────────────── */
.pf-fields { margin: 16px 0; display: flex; flex-direction: column; gap: 12px; }
.pf-fields .field { display: flex; flex-direction: column; gap: 4px; }
.pf-fields label { font-size: 13px; color: var(--text-dim); }
.pf-save { width: 100%; margin-top: 8px; }
.pf-delete {
  width: 100%; margin-top: 10px;
  background: rgba(239,68,68,0.12); color: #ef4444;
  border: 1px solid rgba(239,68,68,0.35);
}
.pf-delete:hover { background: rgba(239,68,68,0.2); }

/* Упоминание @имя в сообщении */
.msg-mention {
  color: #8ab4ff;
  font-weight: 600;
  background: rgba(138,180,255,0.12);
  padding: 0 3px;
  border-radius: 4px;
}
.msg-row.out .msg-mention { color: #cfe0ff; background: rgba(255,255,255,0.15); }

/* Переключатель приватности профиля */
.pf-toggle {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0; cursor: pointer; color: var(--text); font-size: 14px;
}
.pf-toggle input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--thread-1, #7c5cff); }

/* Чужой профиль — строки данных */
.up-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.up-label { color: var(--text-dim); font-size: 14px; }
.up-val { color: var(--text); font-size: 15px; font-weight: 500; }
.up-hidden { text-align: center; color: var(--text-dim); padding: 24px 0; font-size: 14px; }

/* ─── Баннер дней рождения ────────────────────────────────────────────────── */
.birthday-banner {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 12px; padding: 10px 12px;
  background: linear-gradient(135deg, rgba(124,92,255,0.18), rgba(255,120,180,0.18));
  border: 1px solid rgba(124,92,255,0.35);
  border-radius: 12px; font-size: 13px; color: var(--text);
}
.birthday-banner.hidden { display: none; }
.birthday-banner span { flex: 1; line-height: 1.35; }
.birthday-banner-close {
  background: transparent; border: none; color: var(--text-dim);
  cursor: pointer; flex-shrink: 0; padding: 2px;
}
.birthday-banner-close i { width: 16px; height: 16px; }
/* Иконка торта у именинника в списке */
.chat-cake { color: #ff78b4; margin-left: 4px; }
.chat-cake i { width: 14px; height: 14px; vertical-align: middle; }

/* Индикатор "печатает" в шапке чата */
.chat-peer-status.is-typing {
  color: #4a9eff;
  font-style: italic;
}

/* Статус: в сети (зелёный акцент) */
.chat-peer-status.is-online { color: #4ade80; font-style: normal; }
.chat-peer-status.is-online .lock-ico { display: none; }
.chat-peer-status.is-typing .lock-ico { display: none; }

/* === Ссылка-приглашение в группу === */
.gi-invlink { margin: 8px 0; }
.gi-invlink-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.gi-invlink-box {
  margin-top: 8px; padding: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
}
.gi-invlink-url {
  font-size: 12px; word-break: break-all;
  color: var(--text-secondary, #9aa0b0);
  margin-bottom: 8px; user-select: all;
}
.gi-invlink-actions { display: flex; gap: 8px; }
.gi-invlink-actions .btn { flex: 1; font-size: 13px; }

/* Контраст кнопок ссылки-приглашения */
.gi-invlink-btn,
.gi-invlink-actions .btn:not(.btn-primary) {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #e8eaf0;
}
.gi-invlink-btn:active,
.gi-invlink-actions .btn:not(.btn-primary):active {
  background: rgba(255,255,255,0.15);
}

/* Заголовок секции в диалоге пересылки */
.fwd-section-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-secondary, #9aa0b0);
  margin: 10px 0 6px; padding: 0 4px;
}

/* Аватарка автора в группе (слева от плитки) */
.msg-avatar {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 14px;
  margin-right: 8px;
  align-self: flex-start;
}
.group-author { display: block; margin-bottom: 0; }

/* Хвостик плитки (как WhatsApp) */
.msg-row.in .bubble::before {
  content: '';
  position: absolute;
  left: -9px; top: 0;
  width: 10px; height: 16px;
  background: var(--bg-elevated);
  clip-path: path('M10 0 L3.5 0 Q0 0 1.5 3 L8 13 Q10 16 10 12 Z');
}
.msg-row.out .bubble::after {
  content: '';
  position: absolute;
  right: -9px; top: 0;
  width: 10px; height: 16px;
  background: var(--thread-2);
  clip-path: path('M0 0 L6.5 0 Q10 0 8.5 3 L2 13 Q0 16 0 12 Z');
}

/* У эмодзи-сообщений хвостика нет */
.bubble.emoji-only::before, .bubble.emoji-only::after { display: none; }

/* Кнопка микрофона при записи — пульс под пальцем */
#btn-mic.recording {
  animation: micPulse 1.2s infinite;
  background: #ff3b30;
}
@keyframes micPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,59,48,0.5); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 12px rgba(255,59,48,0); }
}

/* Режим записи: поле остаётся в layout (клавиатура не прячется), плашка поверх */
.composer { position: relative; }
.composer.rec-mode .composer-input-wrap { visibility: hidden; }
.composer.rec-mode .voice-recording-ui {
  position: absolute;
  left: 12px;
  right: 76px;
  top: 50%;
  transform: translateY(-50%);
}

/* В режиме записи прячем кнопки вложения и эмодзи */
.voice-rec-hint { background: rgba(10, 10, 16, 0.85); color: #ececf4; padding: 7px 16px; border-radius: 18px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); white-space: normal; line-height: 1.35; }
/* В режиме записи подсказка плавает над строкой ввода — растёт под текст, не обрезает */
.composer.rec-mode .voice-rec-hint { position: absolute; bottom: calc(100% + 8px); left: 0; transform: none; max-width: min(92vw, 460px); text-align: center; font-size: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
.composer.rec-mode #btn-attach,
.composer.rec-mode #btn-emoji { visibility: hidden; }

/* === Вложения: фото, видео, файлы === */
.att-bubble { padding: 4px; max-width: min(320px, 74%); }
.att-bubble .group-author, .att-bubble .fwd-label { padding: 4px 8px 0; display: block; }
.att-img {
  width: 260px; max-width: 100%;
  aspect-ratio: 4/3;
  border-radius: 8px;
  background-size: cover; background-position: center;
  background-color: rgba(255,255,255,0.06);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.att-img-empty i { width: 40px; height: 40px; opacity: 0.4; }
.att-video { position: relative; }
.att-play {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
}
.att-play i { width: 26px; height: 26px; color: #fff; }
.att-file {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; min-width: 220px;
  cursor: pointer; position: relative;
}
.att-file > i { width: 28px; height: 28px; flex-shrink: 0; }
.att-file-info { flex: 1; min-width: 0; }
.att-file-name { font-size: 14px; word-break: break-all; }
.att-file-size { font-size: 12px; opacity: 0.7; }
.att-bubble .bubble-time { padding: 0 8px 4px; }
/* Полноэкранный просмотр фото/видео */
.att-viewer {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
}
.att-viewer img, .att-viewer video { max-width: 96vw; max-height: 92vh; border-radius: 6px; }
.att-viewer-close {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: none; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* Фото/видео без полей, время поверх (WhatsApp) */
.att-img { width: auto; aspect-ratio: auto; background: none; position: relative; }
.att-img img {
  display: block;
  max-width: min(280px, 68vw);
  max-height: 340px;
  border-radius: 8px;
}
.att-img-empty { width: 200px; height: 140px; background: rgba(255,255,255,0.06); }
.att-bubble { position: relative; }
.att-bubble .bubble-time {
  position: absolute; right: 10px; bottom: 8px;
  padding: 2px 7px; border-radius: 10px;
  background: rgba(0,0,0,0.45); color: #fff; opacity: 1;
  margin: 0; float: none;
}
.att-bubble .att-file + .bubble-time,
.att-bubble:has(.att-file) .bubble-time {
  position: static; background: none; color: inherit; opacity: 0.6; float: right; padding: 0 8px 4px;
}

/* Плитка вложения вплотную к картинке */
.bubble.att-bubble { padding: 0 !important; overflow: hidden; background: none; border: none; }
.att-bubble .att-img img { border-radius: 9px; }
.att-bubble .group-author { padding: 4px 8px 2px; }
.att-bubble .fwd-label { padding: 0 8px; }
.att-bubble .att-file { background: var(--bg-elevated); border-radius: 9px; }
.msg-row.out .att-bubble .att-file { background: linear-gradient(135deg, var(--thread-1), var(--thread-2)); }

/* Контейнер фото строго по размеру картинки */
.att-img { display: block !important; width: fit-content !important; height: fit-content !important; line-height: 0; }
.att-bubble { width: fit-content; }

/* Видео-плитка: превью по контенту, play по центру поверх */
.att-video { position: relative !important; }
.att-video .att-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.att-video img { display: block; }
.bubble.att-bubble { line-height: 0; font-size: 0; }
.bubble.att-bubble .group-author, .bubble.att-bubble .fwd-label { line-height: 1.3; }
/* У медиа-плиток хвостик не рисуем */
.bubble.att-bubble::before, .bubble.att-bubble::after { display: none; }
/* Хвостик у медиа-плиток: селектор сильнее исходного */
.msg-row.in .bubble.att-bubble::before,
.msg-row.out .bubble.att-bubble::after { display: none; }
/* Текст в файловой плитке: возвращаем метрики после font-size:0 */
.bubble.att-bubble .att-file { line-height: 1.35; }
.bubble.att-bubble .att-file-name { font-size: 14px; line-height: 1.35; }
.bubble.att-bubble .att-file-size { font-size: 12px; line-height: 1.3; }
/* Медиа-плитка: все углы скруглены (нет хвостика — нет острого угла) */
.msg-row.in .bubble.att-bubble,
.msg-row.out .bubble.att-bubble { border-radius: 9px; background: none; }
/* Файловая плитка: фон на всей плитке, время внутри */
.bubble.att-bubble:has(.att-file) { background: var(--bg-elevated); }
.msg-row.out .bubble.att-bubble:has(.att-file) { background: linear-gradient(135deg, var(--thread-1), var(--thread-2)); }
.bubble.att-bubble .att-file { background: none !important; }
.bubble.att-bubble:has(.att-file) .bubble-time { line-height: 1.2; padding: 0 10px 6px; }
/* Компактнее: время файла поднимаем к строке размера */
.bubble.att-bubble:has(.att-file) .bubble-time { margin-top: -18px; padding-top: 0; }
/* Реакции в группе: отступ под аватарку автора */
.msg-row.in .msg-avatar ~ .reactions-row { margin-left: 40px; }
/* Реакции в группе: отступ под аватарку автора */
.msg-row.in .msg-avatar ~ .reactions-row { margin-left: 40px; }

/* Панель реакций: компактнее на мобильном (8 эмодзи в строку) */
@media (max-width: 820px) {
  .msg-ctx-reactions { gap: 2px; padding: 6px 8px; }
  .reaction-pick { font-size: 24px; padding: 3px; }
}

/* Имя автора в группе: единый размер во всех типах плиток */
.bubble .group-author { font-size: 14px; font-weight: 500; }
@media (max-width: 820px) {
  .bubble .group-author { font-size: 16px; }
}
.bubble.att-bubble .group-author { font-size: 14px; }
@media (max-width: 820px) {
  .bubble.att-bubble .group-author { font-size: 16px; }
}
.bubble.att-bubble .fwd-label { font-size: 12px; }

/* Баннер установки PWA */
.install-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 110;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface, #1c1c26);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  animation: rise 0.3s var(--ease) both;
}
.install-bar-icon { width: 44px; height: 44px; border-radius: 10px; }
.install-bar-text { flex: 1; min-width: 0; }
.install-bar-title { font-weight: 600; font-size: 15px; }
.install-bar-sub { font-size: 12.5px; color: var(--text-dim); }
.install-bar .btn { flex-shrink: 0; }

/* Выбор звуков в настройках */
.sound-select-row { gap: 10px; }
.sound-select {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13.5px;
}
.sound-preview { width: 34px; height: 34px; flex-shrink: 0; }

/* Вложения: глушим нативное long-press меню браузера */
.att-img img, .att-img, .att-video {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Меню скрепки: Галерея / Файл */
.attach-menu {
  position: absolute;
  bottom: 64px; left: 10px;
  background: var(--surface, #1c1c26);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  overflow: hidden;
  z-index: 60;
}
.attach-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 18px;
  background: none; border: none; color: var(--text);
  font-size: 14.5px; cursor: pointer;
}
.attach-menu-item:active, .attach-menu-item:hover { background: rgba(255,255,255,0.06); }
.attach-menu-item i { width: 18px; height: 18px; }
.composer { position: relative; }

/* Надпись Loom картинкой в шапке */
.sidebar-title-img { height: 70px; width: auto; display: block; margin: 14px 0 -34px 10px; }

/* Многострочный ввод (textarea) */
.composer-input {
  resize: none;
  line-height: 22px;
  max-height: 196px;
  overflow-y: hidden;
  font-family: inherit;
}
.composer { align-items: flex-end; }
.att-video:not(:has(img)) { min-width: 220px; min-height: 130px; background: rgba(0,0,0,0.35) !important; }

/* Бейдж прогресса загрузки/скачивания на плитках вложений */
.att-progress { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,0.7); color: #fff; font-size: 15px; font-weight: 600; padding: 4px 11px; border-radius: 12px; z-index: 2; }
.att-progress:empty { display: none; }

/* Альбомы фото */
.att-album { display: grid; gap: 3px; width: 280px; max-width: 72vw; border-radius: 12px; overflow: hidden; cursor: pointer; }
.att-album.n2 { grid-template-columns: 1fr 1fr; }
.att-album.n3 { grid-template-columns: 1fr 1fr; }
.att-album.n3 .alb-cell:first-child { grid-column: span 2; }
.att-album.n4 { grid-template-columns: 1fr 1fr; }
.alb-cell { position: relative; aspect-ratio: 1; background: rgba(0,0,0,0.3); }
.alb-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alb-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); color: #fff; font-size: 22px; font-weight: 700; }

/* Галерея альбома */
.gal-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; }
.gal-wrap img { max-width: 96vw; max-height: 92vh; object-fit: contain; touch-action: pan-x pinch-zoom; }
.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); border: none; color: #fff; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gal-prev { left: 12px; } .gal-next { right: 12px; }
.gal-count { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,0.5); padding: 4px 14px; border-radius: 14px; font-size: 14px; }
.gal-dl { position: absolute; top: 12px; right: 60px; background: rgba(0,0,0,0.5); border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#att-viewer-close { z-index: 1500; }
.att-retry { display: flex; align-items: center; gap: 6px; margin-top: 6px; background: rgba(220,60,60,0.85); color: #fff; border: none; border-radius: 9px; padding: 7px 14px; font-size: 13.5px; cursor: pointer; }
.att-retry i { width: 15px; height: 15px; }

/* Настройки: строки не выталкивают контролы за край (крупный масштаб) */
.settings-item { flex-wrap: wrap; }
/* Звуковые строки: подпись сверху, селект+кнопка снизу */
.sound-select-row { flex-wrap: wrap; }
.sound-select-row span { flex: 1 1 auto; }
.sound-select { flex: 1 1 calc(100% - 56px); min-width: 0; order: 2; }
.sound-select-row .sound-preview { order: 3; flex-shrink: 0; }
.sound-select-row span { flex: 0 0 auto; }
.sound-preview { flex-shrink: 0; }
.settings-item select, .settings-item .btn-icon { max-width: 100%; }
.up-edit { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.up-edit-title { font-size: 13px; color: var(--text-dim); }
.up-edit-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ═══ Панель звонка ═══ */
.call-panel { position: fixed; inset: 0; z-index: 1600; background: #101018; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(24px + env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom)); height: 100dvh; overflow: hidden; }
.call-info { min-height: 0; }
#call-remote-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 0; background: #000; }
#call-local-video { position: absolute; right: 14px; top: 14px; width: 110px; height: 150px; object-fit: cover; border-radius: 12px; z-index: 2; border: 1px solid rgba(255,255,255,0.25); background: #000; }
.call-info { z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 4vh; }
.call-avatar { width: 96px; height: 96px; font-size: 38px; }
.call-name { font-size: 22px; font-weight: 700; color: #fff; }
.call-status { font-size: 14px; color: rgba(255,255,255,0.7); }
.call-actions { z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 3.5vw, 18px); max-width: 100%; }
.call-btn { width: clamp(46px, 13vw, 60px); height: clamp(46px, 13vw, 60px); border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.14); color: #fff; }
.call-btn i { width: 26px; height: 26px; }
.call-accept { background: #2ebd59; }
.call-hangup { background: #e53935; }
.call-btn.off { background: rgba(255,255,255,0.4); color: #222; }
.call-panel.video-mode .call-info { margin-top: 2vh; }

/* Ожидание удалённого видео: стильный плейсхолдер — аватар с пульсирующими кольцами */
.call-panel.video-mode.waiting-remote .call-info { margin-top: 16vh; } /* в потоке: свайп/кнопки остаются внизу */
.call-panel.video-mode.waiting-remote .call-avatar { position: relative; }
.call-panel.video-mode.waiting-remote .call-avatar::before,
.call-panel.video-mode.waiting-remote .call-avatar::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid var(--thread-1, rgba(124, 92, 252, 0.6));
  animation: callPulse 2.2s ease-out infinite;
  pointer-events: none;
}
.call-panel.video-mode.waiting-remote .call-avatar::after { animation-delay: 1.1s; }
@keyframes callPulse {
  0% { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Список чатов: long-press без выделения текста и фокуса */
.chat-item, .chat-item * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.call-tile { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 14px; }
.call-tile i { width: 18px; height: 18px; }
.call-missed { color: #ff6b6b; }
.call-missed i { color: #ff6b6b; }
.call-bubble { min-width: 210px; }
.call-bubble .call-tile { white-space: normal; overflow-wrap: anywhere; }
.call-bubble { max-width: 100%; }

/* ─── Список «кто прочитал» в меню сообщения ─── */
.ctx-read-list {
  max-height: 40vh;
  overflow-y: auto;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 4px 0;
}
.ctx-read-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  font-size: 14px;
}
.ctx-read-row.muted { color: rgba(255,255,255,0.45); font-size: 13px; }
.ctx-read-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-read-time { color: rgba(255,255,255,0.55); flex-shrink: 0; }

/* ─── Входящий вызов: свайп-трубка ─── */
.call-swipe {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  margin-bottom: 4vh;
}
.call-swipe-knob {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #2ebd59;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0 rgba(46,189,89,0.5);
  animation: knob-vibrate 1.1s ease-in-out infinite, knob-pulse 1.6s ease-out infinite;
  touch-action: none;
  transition: transform 0.15s ease;
}
.call-swipe-knob.dragging { animation: none; transition: none; }
.call-swipe-knob i { width: 36px; height: 36px; }
@keyframes knob-vibrate {
  0%, 100% { rotate: 0deg; }
  10% { rotate: -14deg; }
  20% { rotate: 12deg; }
  30% { rotate: -10deg; }
  40% { rotate: 8deg; }
  50% { rotate: -5deg; }
  60% { rotate: 3deg; }
  70%, 90% { rotate: 0deg; }
}
@keyframes knob-pulse {
  0% { box-shadow: 0 0 0 0 rgba(46,189,89,0.5); }
  70% { box-shadow: 0 0 0 26px rgba(46,189,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,189,89,0); }
}
.call-swipe-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  animation: hint-fade 2s ease-in-out infinite;
}
.call-swipe-hint.down { color: rgba(255,120,120,0.75); }
.call-swipe-hint i { width: 22px; height: 22px; }
@keyframes hint-fade {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* ─── Избранные сообщения ─── */
/* Звезда избранного: DOM-элемент в пузыре (пседоэлементы заняты хвостиком) */
.msg-row .bubble { position: relative; }
.fav-mark {
  position: absolute;
  top: -13px;
  color: #f5c542;
  font-size: 26px;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 2;
}
.msg-row.in .fav-mark { right: -7px; }
.msg-row.out .fav-mark { left: -7px; }
/* Вложения: overflow hidden обрезает выступ — звезда внутри угла */
.att-bubble .fav-mark { top: 4px; }
.msg-row.in .att-bubble .fav-mark { right: 6px; }
.msg-row.out .att-bubble .fav-mark { left: 6px; }
.chat-item .avatar i[data-lucide="star"], .chat-item svg.lucide-star { color: #f5c542; stroke: #f5c542; fill: #f5c542; }
.msg-row.fav-flash .msg-bubble, .msg-row.fav-flash .bubble {
  animation: fav-flash-anim 1.5s ease;
}
@keyframes fav-flash-anim {
  0%, 60% { box-shadow: 0 0 0 3px rgba(245,197,66,0.65); }
  100% { box-shadow: 0 0 0 0 rgba(245,197,66,0); }
}

/* ═══ Статусы ═══ */
.status-ava-wrap { position: relative; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.status-ring { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }
@media (max-width: 820px) {
  .status-ava-wrap { width: 64px; height: 64px; }
}
.status-add-plus {
  position: absolute; right: -2px; bottom: -2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--secure, #34d399); color: #0b0b12;
  font-size: 16px; font-weight: 700; line-height: 20px; text-align: center;
  border: 2px solid var(--bg, #0b0b12);
}
/* Просмотрщик */
.status-viewer { position: fixed; inset: 0; z-index: 1700; background: #0b0b12; display: flex; flex-direction: column; }
.sv-progress { display: flex; gap: 4px; padding: 10px 12px 0; }
.sv-seg { flex: 1; height: 3px; background: rgba(255,255,255,0.25); border-radius: 2px; overflow: hidden; }
.sv-seg.done { background: #fff; }
.sv-seg-fill { width: 0; height: 100%; background: #fff; }
@keyframes sv-fill { from { width: 0; } to { width: 100%; } }
.sv-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.sv-head-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sv-name { color: #fff; font-weight: 600; font-size: 15px; }
.sv-time { color: rgba(255,255,255,0.6); font-size: 12.5px; }
.sv-body { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.sv-text {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 28px; text-align: center;
  color: #fff; font-size: clamp(20px, 6vw, 34px); font-weight: 600; line-height: 1.35;
  white-space: pre-wrap; word-break: break-word;
}
.sv-nav-left, .sv-nav-right { position: absolute; top: 80px; bottom: 0; width: 34%; }
.sv-nav-left { left: 0; }
.sv-nav-right { right: 0; width: 50%; }
/* Редактор */
.status-editor { position: fixed; inset: 0; z-index: 1700; background: #0b0b12; display: flex; flex-direction: column; }
.se-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #fff; }
.se-head span { flex: 1; font-weight: 600; }
.se-canvas { flex: 1; display: flex; align-items: center; justify-content: center; transition: background 0.25s; min-height: 0; }
.se-canvas textarea {
  width: 100%; max-width: 560px; height: 50%;
  background: transparent; border: none; outline: none; resize: none;
  color: #fff; font-size: clamp(20px, 6vw, 32px); font-weight: 600; text-align: center;
  font-family: var(--font-body);
}
.se-canvas textarea::placeholder { color: rgba(255,255,255,0.55); }
.se-tools { display: flex; align-items: center; gap: 10px; padding: 12px; }
.se-colors { display: flex; gap: 8px; flex: 1; overflow-x: auto; }
.se-color { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; flex-shrink: 0; }
.se-color.active { border-color: #fff; }
#se-emoji-panel { position: absolute; bottom: 64px; left: 12px; right: 12px; max-height: 45vh; z-index: 2; }

/* ─── Кадрирование аватара ─── */
.crop-modal { position: fixed; inset: 0; z-index: 1800; background: #0b0b12; display: flex; flex-direction: column; }
.crop-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #fff; }
.crop-head span { flex: 1; font-weight: 600; }
.crop-area { position: relative; flex: 1; overflow: hidden; min-height: 0; touch-action: none; cursor: grab; }
.crop-area:active { cursor: grabbing; }
#crop-img {
  position: absolute; left: 50%; top: 50%;
  transform-origin: center center;
  max-width: none; max-height: none;
  user-select: none; -webkit-user-drag: none;
}
.crop-mask {
  position: absolute; inset: 0; pointer-events: none;
}
.crop-mask::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: min(82vw, 82%); aspect-ratio: 1;
  max-width: 82vh; 
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 0 4000px rgba(0,0,0,0.6);
  border: 2px solid rgba(255,255,255,0.85);
}
.crop-tools { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); }
#crop-zoom { width: 100%; }

/* Цитата ответа: автор + время + превью */
.rq-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12.5px; color: var(--thread-1, #8b7cf8); margin-bottom: 1px; }
.rq-time { font-weight: 400; font-size: 11.5px; color: var(--text-dim, rgba(255,255,255,0.5)); }

/* Статусы этап 2: вкладки, фото, длительность */
.se-tabs { flex: 1; display: flex; gap: 8px; justify-content: center; }
.se-tab { background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text-dim); border-radius: 99px; padding: 6px 16px; cursor: pointer; font-weight: 600; font-size: 13.5px; }
.se-tab.active { background: var(--secure-dim); border-color: rgba(52,211,153,0.3); color: var(--secure); }
.se-photo { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; height: 100%; justify-content: center; padding: 16px; }
#se-photo-img { max-width: 100%; max-height: 70%; object-fit: contain; border-radius: 10px; }
#se-caption { width: 100%; max-width: 520px; background: rgba(255,255,255,0.08); border: 1px solid var(--border); border-radius: 10px; color: #fff; padding: 10px 14px; font-size: 15px; outline: none; }
.se-dur { background: rgba(255,255,255,0.08); border: 1px solid var(--border); color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.sv-photo { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.sv-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sv-photo-frame { position: relative; max-width: 100%; max-height: 100%; display: flex; }
.sv-photo-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sv-caption { position: absolute; left: 8px; right: 8px; bottom: 8px; max-width: 92%; text-align: center; padding: 8px 14px; border-radius: 10px; word-break: break-word; }

/* Просмотры статуса */
.sv-views {
  position: absolute;
  bottom: calc(18px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  background: rgba(0,0,0,0.5); border: none; color: #fff;
  border-radius: 18px; padding: 8px 16px; font-size: 14px; cursor: pointer;
  z-index: 3;
}
.sv-views i { width: 18px; height: 18px; }
.sv-views-list {
  position: absolute;
  bottom: calc(64px + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  width: min(420px, 88vw); max-height: 45vh; overflow-y: auto;
  background: #16161f; border: 1px solid var(--border); border-radius: 14px;
  padding: 6px 0; z-index: 3;
}
.sv-view-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 16px; color: #fff; font-size: 14.5px; }
.sv-view-row.muted { color: rgba(255,255,255,0.5); justify-content: center; }
.sv-view-time { color: rgba(255,255,255,0.55); font-size: 13px; flex-shrink: 0; }

.se-photo-frame { position: relative; max-width: 100%; max-height: 60%; display: flex; }
.se-photo-frame img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.se-cap-preview {
  position: absolute;
  transform: translate(-50%, -50%);
  max-width: 92%;
  text-align: center; padding: 8px 14px; border-radius: 10px;
  word-break: break-word;
  cursor: grab; touch-action: none; user-select: none;
}
.se-cap-preview:active { cursor: grabbing; }
.se-cap-upper-label { display: flex; align-items: center; gap: 5px; color: var(--text-dim); font-size: 13px; font-weight: 700; }
.se-cap-tools { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px; flex-wrap: wrap; justify-content: center; }
.se-cap-tools input[type="range"] { flex: 1; min-width: 90px; }
.se-cap-colors { display: flex; gap: 6px; }
.se-cap-colors .se-color { width: 24px; height: 24px; }

/* Коллаж-статус */
.se-collage { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; height: 100%; justify-content: center; padding: 16px; overflow-y: auto; }
#se-collage-frame { flex: 0 1 auto; min-height: 0; }
#se-collage-canvas { display: block; height: min(50vh, 520px); aspect-ratio: 9 / 16; width: auto; max-width: 100%; border-radius: 10px; background: #0b0b12; touch-action: none; user-select: none; -webkit-user-select: none; }
.se-collage-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.se-collage-hint { font-size: 12px; color: var(--text-dim); text-align: center; padding: 0 12px; }
@media (max-width: 820px) {
  .se-collage { padding: 8px 0; }
  #se-collage-canvas { height: auto; width: min(100vw, 34vh); max-width: 100vw; border-radius: 0; }
}

/* Эмодзи-стикеры на фото-статусе */
.se-emo {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: grab; user-select: none; touch-action: none;
  line-height: 1;
}
.se-emo.sel { outline: 2px dashed rgba(255,255,255,0.8); outline-offset: 4px; border-radius: 8px; }
.se-emo:active { cursor: grabbing; }
.sv-emo {
  position: absolute;
  transform: translate(-50%, -50%);
  line-height: 1;
  pointer-events: none;
}

/* Фиксы редактора статусов */
#se-emoji-panel { background: #16161f; border: 1px solid var(--border); border-radius: 14px; padding: 8px; }
.se-dur option, #se-cap-font option { background: #16161f; color: #fff; }
.se-cap-preview { background: transparent !important; }

/* Редактор фото-статуса: телефон — фото во всю ширину */
@media (max-width: 820px) {
  .se-photo { padding: 8px 0; }
  .se-photo-frame { width: 100%; max-height: 56vh; justify-content: center; }
  .se-photo-frame img { width: 100%; object-fit: contain; border-radius: 0; }
}
/* Пикер эмодзи в редакторе: сверху, не перекрывает кнопки */
#se-emoji-panel { bottom: auto; top: 64px; max-height: 44vh; overflow-y: auto; }

@media (max-width: 820px) {
  .se-canvas { padding: 0 !important; }
  .se-photo { width: 100% !important; padding: 8px 0 !important; }
  .se-photo-frame {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 62vh !important;
    margin: 0 !important;
    justify-content: center;
  }
  .se-photo-frame img {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 62vh !important;
    object-fit: contain;
    border-radius: 0 !important;
  }
}

/* Видео-статусы */
#se-video-el { max-width: 100%; max-height: 100%; }
.se-video { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; height: 100%; justify-content: center; padding: 16px; }
.se-video.hidden { display: none; }
.se-trim { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 8px; }
.se-trim-row { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 13px; }
.se-trim-row input[type="range"] { flex: 1; }
.se-trim-row span:last-child { min-width: 44px; text-align: right; }
.sv-photo-frame video { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 820px) {
  .se-video { padding: 8px 0; }
  #se-video-frame { width: 100vw !important; max-width: 100vw !important; max-height: 62vh !important; margin: 0 !important; }
  #se-video-el { width: 100vw; max-height: 62vh; object-fit: contain; }
}

/* Шапка редактора статусов: три вкладки + кнопка на крупных масштабах */
.se-head { flex-wrap: nowrap; }
.se-tabs { min-width: 0; overflow-x: auto; }
.se-tab { padding: 6px clamp(8px, 2vw, 16px); font-size: clamp(12px, 3.4vw, 13.5px); flex-shrink: 0; }
.se-head .btn-primary { flex-shrink: 0; padding: 8px clamp(8px, 2.5vw, 16px); font-size: clamp(13px, 3.6vw, 15px); }

/* Выпадающий выбор типа статуса */
.se-kind-dd { position: relative; flex: 1; display: flex; justify-content: center; min-width: 0; }
.se-kind-btn { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: #fff; border-radius: 99px; padding: 7px 16px; font-weight: 600; font-size: 14px; cursor: pointer; }
.se-kind-btn i { width: 16px; height: 16px; }
.se-kind-menu { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #16161f; border: 1px solid var(--border); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 4px; z-index: 5; min-width: 140px; }
.se-kind-menu .se-tab { width: 100%; text-align: center; }
/* Редактор: скролл и переносы на крупных масштабах */
.status-editor { overflow: hidden; }
.se-canvas { overflow-y: auto; }
.se-tools { flex-wrap: wrap; row-gap: 10px; }
.se-cap-tools { row-gap: 10px; }
.se-video, .se-photo { overflow-y: auto; }
.se-trim { padding: 0 12px; }
.se-cap-tools, #se-caption { padding-left: 12px; padding-right: 12px; box-sizing: border-box; }

.se-trim-len { color: var(--text-dim); font-size: 13px; }

/* Музыка статуса */
.se-music { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; }
.se-music.hidden { display: none; }
#se-music-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

/* Фоновая музыка статуса */
.se-bgmusic { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; height: 100%; justify-content: center; padding: 16px; }
.se-bgmusic.hidden { display: none; }
.se-bgm-hint { color: var(--text-dim); font-size: 14px; text-align: center; }

.sv-codec-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.7); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14.5px; text-align: center; max-width: 80%; }

/* Аудио-плеер вложения */
.att-audio { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-width: 230px; position: relative; }
.att-audio .voice-play { flex-shrink: 0; }
.att-audio-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.att-audio-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-audio-bar { height: 26px; cursor: pointer; position: relative; }
.att-audio-bar canvas { width: 100%; height: 100%; display: block; }
.att-audio-time { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-dim, rgba(255,255,255,0.55)); }

/* ═══ Полноэкранный плеер ═══ */
.fplayer { position: fixed; inset: 0; z-index: 1750; display: flex; flex-direction: column; align-items: center; padding: calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); overflow: hidden; }
.fplayer[data-skin="loom"] { --fp-accent: #7c5cff; background: linear-gradient(165deg, #1a1430 0%, #0b0b12 55%, #131022 100%); }
.fplayer[data-skin="dark"] { --fp-accent: #34d399; background: #08080c; }
.fplayer[data-skin="sunset"] { --fp-accent: #ff9f5a; background: linear-gradient(165deg, #2b1420 0%, #0e0a12 60%, #1f1310 100%); }
.fp-bg { position: absolute; inset: 0; background: url("../chat-bg.png?v=2") center/cover no-repeat; opacity: 0.35; pointer-events: none; }
.fp-head { width: 100%; display: flex; align-items: center; gap: 10px; z-index: 1; }
.fp-head-title { flex: 1; text-align: center; color: rgba(255,255,255,0.75); font-weight: 600; }
.fp-disc-wrap { display: flex; align-items: flex-start; justify-content: center; z-index: 1; margin-top: 6px; flex-shrink: 0; }
.fp-disc.vinyl {
  aspect-ratio: 1; border-radius: 50%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  /* Винил: чёрная пластинка с канавками и бликом */
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.14), rgba(255,255,255,0) 42%),
    repeating-radial-gradient(circle at 50% 50%, #101012 0px, #101012 2.5px, #1b1b1f 3px, #1b1b1f 5px),
    #0c0c0f;
  border: 3px solid #060608;
  box-shadow: 0 8px 34px rgba(0,0,0,0.6), inset 0 0 26px rgba(0,0,0,0.75);
}
.fp-vinyl-label {
  width: 38%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--fp-accent) 82%, #fff 18%), var(--fp-accent) 70%);
  border: 2px solid rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  color: #14141a;
}
.fp-vinyl-label::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #0a0a0c; }
.fp-vinyl-label i { width: 46px; height: 46px; }
.fp-disc.spin { animation: fp-spin 9s linear infinite; }
@keyframes fp-spin { to { rotate: 360deg; } }
.fp-disc-box { position: relative; width: min(56vw, 250px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.fp-disc-box .fp-disc { width: 100%; }
.fp-vinyl-text { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fp-vinyl-text text { fill: var(--fp-accent, #f0d060); font-size: 21px; font-weight: 800; letter-spacing: 0.5px; }
.fp-wave { z-index: 1; width: 100%; max-width: 560px; height: 56px; margin-top: 10px; cursor: pointer; touch-action: none; flex-shrink: 0; }
.fp-wave canvas { width: 100%; height: 100%; display: block; }
.fp-time { z-index: 1; width: 100%; max-width: 560px; display: flex; justify-content: space-between; color: rgba(255,255,255,0.6); font-size: 12.5px; margin-top: 4px; }
.fp-controls { z-index: 1; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 4.5vw, 26px); margin-top: 14px; width: 100%; max-width: 560px; }
.fp-play { flex-shrink: 0; width: clamp(54px, 15vw, 68px); height: clamp(54px, 15vw, 68px); }
.fp-ctl { flex-shrink: 0; }
.fp-ctl i { width: clamp(20px, 6vw, 26px); height: clamp(20px, 6vw, 26px); }
.fp-play { border-radius: 50%; border: none; cursor: pointer; background: var(--fp-accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.fp-play i { width: 30px; height: 30px; }
.fp-ctl { color: rgba(255,255,255,0.8); }
.fp-ctl i { width: 26px; height: 26px; }
.fp-queue { z-index: 1; width: 100%; max-width: 560px; margin-top: 8px; margin-bottom: 10px; flex: 1; min-height: 0; overflow-y: auto; }
.fp-trackinfo { z-index: 1; width: 100%; max-width: 560px; margin-top: 8px; margin-bottom: 10px; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; text-align: center; }
.fp-trackinfo img { max-width: min(46vw, 210px); border-radius: 12px; }
.fp-ti-name { font-size: 17px; font-weight: 700; }
.fp-ti-line { font-size: 13.5px; color: rgba(255,255,255,0.65); }
.fp-head-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.fp-head-sub { font-size: 11.5px; color: rgba(255,255,255,0.5); text-align: center; text-wrap: balance; }
.fp-q-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: rgba(255,255,255,0.75); font-size: 14px; cursor: pointer; }
.fp-q-row.cur { background: rgba(255,255,255,0.08); color: #fff; }
.fp-q-row i { width: 16px; height: 16px; flex-shrink: 0; color: var(--fp-accent); }
.fp-q-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Фикс мини-плитки: время сообщения не наезжает на длительность */
.att-audio { padding-bottom: 24px; }
.att-audio .bubble-time { position: absolute; right: 10px; bottom: 5px; }
.att-audio .att-audio-time { padding-right: 56px; }

/* Плеер: индикатор громкости, активные кнопки */
#fp-vol-ind {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.75); color: #fff; padding: 8px 14px; border-radius: 12px;
  font-size: 15px; opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 3;
}
#fp-vol-ind.show { opacity: 1; }
.fp-ctl.active { color: var(--fp-accent); }

/* Скорость голосового */
.voice-rate {
  flex-shrink: 0; border: none; cursor: pointer;
  background: rgba(255,255,255,0.14); color: inherit;
  border-radius: 10px; padding: 4px 7px;
  font-size: 11.5px; font-weight: 700;
  margin-right: 6px;
}

/* Волна голосового не наезжает на аватарку в пузыре */
.voice-bubble .voice-wave { margin-right: 10px; min-width: 0; overflow: hidden; }
/* Инфо-панель: на весь экран */
#news-modal { padding: 0; }
#news-modal .modal {
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  padding: calc(18px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
  animation: none;
  display: flex;
  flex-direction: column;
}
#news-modal #news-list { overflow-y: auto; }
#news-modal .modal-close { top: calc(16px + env(safe-area-inset-top)); }
#news-modal .modal-head { margin-bottom: 14px; text-align: left; padding-right: 56px; }
#news-modal .modal-head h2 { font-size: 20px; display: flex; align-items: center; gap: 8px; }
#news-modal #news-list { max-height: none; flex: 1; }
/* Приватность статуса: заголовок не под крестиком */
#sp-modal .modal-head { text-align: left; padding-right: 56px; }
#sp-modal .modal-head h2 { font-size: 20px; }
/* Просмотрщик фото/видео: кнопки не залезают под статус-бар (вырез) */
.att-viewer-close, .gal-dl { top: calc(12px + env(safe-area-inset-top, 0px)); }
.gal-count { top: calc(16px + env(safe-area-inset-top, 0px)); }
/* Пометка отредактированного сообщения */
.edited-mark { font-size: 10px; opacity: .65; font-style: italic; margin-right: 5px; }

.ticks.tick-wait { opacity: .65; font-size: .92em; }

.fp-close-wrap { position: relative; }
.fp-unread { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: var(--fp-accent, #7c5cff); color: #fff; font-size: 10px; font-weight: 600; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px rgba(8,10,22,.9); pointer-events: none; }
.fp-unread.hidden { display: none; }
@keyframes fpUnreadPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.14); } }
.fp-unread:not(.hidden) { animation: fpUnreadPulse 1.4s ease-in-out infinite; }

/* Пункт «Обновить приложение»: подсветка при наличии обновления */
#btn-update-app.settings-attention > span { color: var(--thread-1, #7c5cff); }