/* ============================================================
   eco-max-vb.css — ДИАЛОГ + КОМПОЗЕР («MAX», ночной марафон 08.09.2026, агент VB)
   Слой presentation-only. Канон:
   light #f6f8fc/#ffffff/#0f172a/#516180/#1a56db/#3b82f6 (свои пузыри #1a56db/белый);
   dark  #0b1220/#111c2e/#edf3ff/#9fb0cd/#6b96ff (свои пузыри #2563eb);
   радиусы 22/14/999; шрифт Onest. MAX-вдохновение: крупные скругления,
   читаемые чипы вложений, аккуратный эмодзи-пикер, композер-пилюля.
   Область: #view-chats (#panel-list, #panel-thread) и вставки [data-vb-max].
   Файлы app.js/ws.js/chats.js, API/БД, ?v= — не тронуты.
   ============================================================ */

/* ---------- 0. Локальные токены диалога ---------- */

#view-chats {
  --vb-canvas: #f6f8fc;
  --vb-surface: #ffffff;
  --vb-surface-2: #eef2fa;
  --vb-text: #0f172a;
  --vb-muted: #516180;
  --vb-accent: #1a56db;
  --vb-accent-2: #3b82f6;
  --vb-accent-soft: #eaf0ff;
  --vb-border: #e2e8f4;
  --vb-bubble-out: #1a56db;
  --vb-bubble-out-2: #2f6be0;
  --vb-bubble-in: #ffffff;
  --vb-bubble-in-ink: #0f172a;
  --vb-r: 22px;
  --vb-r-sm: 12px;
  --vb-shadow: 0 1px 2px rgb(23 43 99 / 6%), 0 6px 20px rgb(23 43 99 / 7%);
  --vb-shadow-pop: 0 12px 34px rgb(23 43 99 / 16%);
  --vb-out-meta: rgba(255, 255, 255, 0.74);
  --vb-out-tick: #a9c6ff;
  --vb-out-soft: rgba(255, 255, 255, 0.16);
  --vb-out-soft-strong: rgba(255, 255, 255, 0.26);
  --vb-in-meta: var(--vb-muted);
  --vb-tick: #8fa6c9;
}

html[data-theme="dark"] #view-chats {
  --vb-canvas: #0b1220;
  --vb-surface: #111c2e;
  --vb-surface-2: #142137;
  --vb-text: #edf3ff;
  --vb-muted: #9fb0cd;
  --vb-accent: #6b96ff;
  --vb-accent-2: #3b82f6;
  --vb-accent-soft: rgba(107, 150, 255, 0.15);
  --vb-border: #223049;
  --vb-bubble-out: #2563eb;
  --vb-bubble-out-2: #3b82f6;
  --vb-bubble-in: #17243a;
  --vb-bubble-in-ink: #edf3ff;
  --vb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.3);
  --vb-shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.52);
  --vb-out-meta: rgba(255, 255, 255, 0.78);
  --vb-out-tick: #bcd3ff;
  --vb-out-soft: rgba(255, 255, 255, 0.18);
  --vb-out-soft-strong: rgba(255, 255, 255, 0.3);
  --vb-in-meta: var(--vb-muted);
  --vb-tick: #5f7396;
}

/* ---------- 1. Лента сообщений: каркас ---------- */

#view-chats #messages {
  padding: 14px 18px 10px;
  gap: 5px;
  scroll-padding-bottom: 24px;
}

#view-chats #messages .msg {
  max-width: min(76%, 560px);
  position: relative;
}

/* Служебное пустое состояние */
#view-chats #messages .thread-empty__card {
  border-radius: var(--vb-r);
  box-shadow: var(--vb-shadow);
}

/* ---------- 2. Пузырь-карточка ---------- */

#view-chats #messages .bubble {
  background: var(--vb-bubble-in) !important;
  color: var(--vb-bubble-in-ink) !important;
  border: none !important;
  box-shadow: var(--vb-shadow) !important;
  border-radius: var(--vb-r) !important;
  padding: 10px 14px 8px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  position: relative;
  overflow: visible;
}

#view-chats #messages .bubble::after { content: none !important; }

#view-chats #messages .msg--out .bubble {
  background: var(--vb-bubble-out) !important;
  color: #ffffff !important;
  border-radius: var(--vb-r) var(--vb-r) var(--vb-r) var(--vb-r) !important;
}

#view-chats #messages .msg--in .bubble {
  border-radius: var(--vb-r) var(--vb-r) var(--vb-r) var(--vb-r) !important;
}

/* Текст внутри карточки */
#view-chats #messages .bubble__text {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 1px 0 2px !important;
  color: inherit !important;
  font-size: 14.5px !important;
  line-height: 1.42 !important;
}

#view-chats #messages .msg--out .bubble__text { color: #ffffff !important; }
#view-chats #messages .msg--out .bubble__text a { color: #d5e4ff !important; }
#view-chats #messages .msg--in .bubble__text a { color: var(--vb-accent) !important; }

/* ---------- 3. Время + прочитано ВНУТРИ пузыря ---------- */

#view-chats #messages .bubble__meta {
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin: 2px 0 -1px !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  align-self: flex-end;
  font-size: 10.5px;
  line-height: 1;
  color: var(--vb-in-meta) !important;
  background: transparent !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1px;
}

#view-chats #messages .msg--out .bubble__meta { color: var(--vb-out-meta) !important; }
#view-chats #messages .msg--out .bubble__meta .ticks { color: var(--vb-out-tick) !important; }
#view-chats #messages .bubble__meta .ticks { color: var(--vb-tick); }
#view-chats #messages .bubble__edited { font-size: 10px; opacity: 0.7; font-style: italic; }

/* Внутри медиа-карточек мета-строка на подложке карточки */
#view-chats #messages .bubble:has(.bubble__img) .bubble__meta,
#view-chats #messages .bubble:has(.bubble__video) .bubble__meta,
#view-chats #messages .bubble:has(.bubble-mosaic) .bubble__meta {
  margin: 4px 6px 0 !important;
}

/* ---------- 4. Группировка (метки ставит eco-max-vb.js) ----------
   solo | start | mid | end  — подряд идущие сообщения одного автора. */

#view-chats #messages .msg--out[data-vb-gpos="mid"],
#view-chats #messages .msg--out[data-vb-gpos="start"] { margin-top: -2px; }
#view-chats #messages .msg--in[data-vb-gpos="mid"],
#view-chats #messages .msg--in[data-vb-gpos="start"] { margin-top: -2px; }

#view-chats #messages .msg--out[data-vb-gpos="mid"] .bubble,
#view-chats #messages .msg--out[data-vb-gpos="start"] .bubble {
  border-bottom-right-radius: 9px !important;
}
#view-chats #messages .msg--in[data-vb-gpos="mid"] .bubble,
#view-chats #messages .msg--in[data-vb-gpos="start"] .bubble {
  border-bottom-left-radius: 9px !important;
}
#view-chats #messages .msg--out[data-vb-gpos="mid"] .bubble {
  border-top-right-radius: 9px !important;
}
#view-chats #messages .msg--in[data-vb-gpos="mid"] .bubble {
  border-top-left-radius: 9px !important;
}

/* Хвост-завиток: только на последнем пузыре группы */
#view-chats #messages .msg--out[data-vb-gpos="end"] .bubble,
#view-chats #messages .msg--out[data-vb-gpos="solo"] .bubble {
  border-bottom-right-radius: 7px !important;
}
#view-chats #messages .msg--in[data-vb-gpos="end"] .bubble,
#view-chats #messages .msg--in[data-vb-gpos="solo"] .bubble {
  border-bottom-left-radius: 7px !important;
}

#view-chats #messages .msg--out[data-vb-gpos="end"] .bubble::before,
#view-chats #messages .msg--out[data-vb-gpos="solo"] .bubble::before {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 0;
  width: 12px;
  height: 13px;
  background: inherit;
  border-bottom-right-radius: 3px;
  -webkit-mask: radial-gradient(circle 11px at 0 0, transparent 10.4px, #000 10.8px);
  mask: radial-gradient(circle 11px at 0 0, transparent 10.4px, #000 10.8px);
  pointer-events: none;
}

#view-chats #messages .msg--in[data-vb-gpos="end"] .bubble::before,
#view-chats #messages .msg--in[data-vb-gpos="solo"] .bubble::before {
  content: "";
  position: absolute;
  left: -6px;
  bottom: 0;
  width: 12px;
  height: 13px;
  background: inherit;
  border-bottom-left-radius: 3px;
  -webkit-mask: radial-gradient(circle 11px at 100% 0, transparent 10.4px, #000 10.8px);
  mask: radial-gradient(circle 11px at 100% 0, transparent 10.4px, #000 10.8px);
  pointer-events: none;
}

/* Аватар входящих (вставка eco-skin-init): показываем только на последнем в группе */
#view-chats #messages .msg--in[data-vb-gpos="start"] .vy2-msg-avatar,
#view-chats #messages .msg--in[data-vb-gpos="mid"] .vy2-msg-avatar {
  visibility: hidden;
}

/* ---------- 5. Разделитель дат ---------- */

#view-chats #messages .maxi-daysep {
  align-self: center;
  display: inline-flex;
  align-items: center;
  margin: 10px 0 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--vb-surface);
  border: 1px solid var(--vb-border);
  box-shadow: 0 1px 2px rgb(23 43 99 / 5%);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--vb-muted);
}

html[data-theme="dark"] #view-chats #messages .maxi-daysep {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

#view-chats #messages .maxi-daysep span { color: inherit; }

/* ---------- 6. Ответ-цитата ---------- */

#view-chats #messages .bubble__reply {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  background: var(--vb-accent-soft) !important;
  border: none !important;
  border-left: 3px solid var(--vb-accent) !important;
  border-radius: 8px !important;
  color: var(--vb-text) !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  padding: 5px 9px !important;
  margin: 1px 0 3px !important;
  white-space: normal !important;
  opacity: 0.92;
}

#view-chats #messages .msg--out .bubble__reply {
  background: var(--vb-out-soft) !important;
  border-left-color: rgba(255, 255, 255, 0.62) !important;
  color: #ffffff !important;
}

/* ---------- 7. Вложения-карточки: фото / видео / мозаика ---------- */

#view-chats #messages .bubble__img {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: var(--vb-r-sm) !important;
  max-width: min(360px, 100%);
  max-height: 360px;
  object-fit: cover;
}

#view-chats #messages .bubble__video {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: var(--vb-r-sm) !important;
  width: min(360px, 100%);
  max-height: 340px;
  background-color: #0b1220 !important;
  display: block;
}

#view-chats #messages .bubble:has(.bubble__img),
#view-chats #messages .bubble:has(.bubble__video),
#view-chats #messages .bubble:has(.bubble-mosaic) {
  padding: 4px 4px 6px !important;
  gap: 0;
}

#view-chats #messages .bubble:has(.bubble__img) .bubble__text,
#view-chats #messages .bubble:has(.bubble__video) .bubble__text,
#view-chats #messages .bubble:has(.bubble-mosaic) .bubble__text {
  padding: 6px 8px 2px !important;
}

/* ---------- 8. Чип файла ---------- */

#view-chats #messages .bubble:has(.file-chip) {
  padding: 6px !important;
  gap: 0;
}

#view-chats #messages .file-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(320px, 100%);
  max-width: 100%;
  box-sizing: border-box;
  padding: 9px 12px 9px 9px;
  border-radius: 14px;
  text-decoration: none;
  background: var(--vb-surface-2) !important;
  border: 1px solid var(--vb-border) !important;
  color: var(--vb-text) !important;
  transition: background 0.14s ease, transform 0.14s ease;
}

#view-chats #messages .file-chip:hover {
  background: var(--vb-accent-soft) !important;
  transform: translateY(-1px);
}

#view-chats #messages .msg--out .file-chip {
  background: var(--vb-out-soft) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

#view-chats #messages .msg--out .file-chip:hover { background: var(--vb-out-soft-strong) !important; }

#view-chats #messages .file-chip__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--vb-surface);
  box-shadow: 0 1px 3px rgb(23 43 99 / 12%);
}

#view-chats #messages .msg--out .file-chip__icon {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

#view-chats #messages .file-chip__icon svg,
#view-chats #messages .file-chip__icon img { max-width: 22px; max-height: 22px; }

#view-chats #messages .file-chip__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

#view-chats #messages .file-chip__name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-chats #messages .file-chip__meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--vb-muted);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

#view-chats #messages .file-chip__meta > * { flex-shrink: 0; }

#view-chats #messages .msg--out .file-chip__meta { color: var(--vb-out-meta); }

#view-chats #messages .bubble:has(.file-chip) .bubble__text {
  padding: 5px 7px 2px !important;
}

/* ---------- 9. Голосовое сообщение ---------- */

#view-chats #messages .bubble:has(.voice-player) {
  padding: 8px 12px 6px !important;
  min-width: 250px;
}

#view-chats #messages .voice-player { column-gap: 12px; }

#view-chats #messages .voice-player__play {
  background: #ffffff;
  color: var(--vb-accent);
  box-shadow: 0 2px 8px rgb(23 43 99 / 18%);
  transition: transform 0.14s ease;
}

#view-chats #messages .voice-player__play:hover { transform: scale(1.05); }
#view-chats #messages .voice-player__play.is-playing { transform: scale(1.02); }

#view-chats #messages .msg--out .voice-player__play {
  background: #ffffff;
  color: var(--vb-bubble-out);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

#view-chats #messages .voice-player__dur {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--vb-muted);
  font-variant-numeric: tabular-nums;
}

#view-chats #messages .msg--out .voice-player__dur { color: var(--vb-out-meta); }

/* ---------- 10. Реакции ---------- */

#view-chats #messages .bubble__reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 5px 0 1px;
}

#view-chats #messages .bubble-react {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px 3px 5px;
  border-radius: 999px;
  background: var(--vb-accent-soft) !important;
  border: 1px solid color-mix(in srgb, var(--vb-accent) 22%, transparent) !important;
  box-shadow: none !important;
  color: var(--vb-text);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

#view-chats #messages .bubble-react:hover { transform: translateY(-1px) scale(1.04); }

#view-chats #messages .bubble-react__face {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12.5px;
}

#view-chats #messages .bubble-react__em { font-size: 14px; line-height: 1; }
#view-chats #messages .bubble-react__n { font-size: 11.5px; font-weight: 600; color: var(--vb-muted); }

#view-chats #messages .msg--out .bubble-react {
  background: var(--vb-out-soft) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #ffffff;
}
#view-chats #messages .msg--out .bubble-react__n { color: var(--vb-out-meta); }

/* ---------- 11. Статусы отправки ---------- */

#view-chats #messages .bubble__send {
  font-size: 11.5px;
  color: var(--vb-muted);
}

#view-chats #messages .bubble__send-track {
  border-radius: 999px;
  height: 3px;
}

#view-chats #messages .bubble__send.is-fail {
  color: var(--vb-danger, #c33349);
  font-weight: 500;
}

#view-chats #messages .bubble__retry {
  min-height: 0;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--vb-surface-2);
  border: 1px solid var(--vb-border);
  color: var(--vb-text);
  font-size: 12px;
  transition: background 0.14s ease;
}

#view-chats #messages .bubble__retry:hover { background: var(--vb-accent-soft); }

/* ---------- 12. Меню сообщения + реак-пикер ---------- */

#view-chats .msg-act {
  z-index: 80;
}

#view-chats .msg-act__menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 4px;
  padding: 5px;
  border-radius: 14px;
  background: var(--vb-surface) !important;
  border: 1px solid var(--vb-border);
  box-shadow: var(--vb-shadow-pop) !important;
}

#view-chats .msg-act__menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--vb-text);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease;
}

#view-chats .msg-act__menu button:hover { background: var(--vb-surface-2); }
#view-chats .msg-act__menu button[data-act="del"] { color: var(--vb-danger, #c33349); }
#view-chats .msg-act__menu button[data-act="vb-forward"] { color: var(--vb-accent); }

#view-chats .msg-act .react-picker,
#view-chats .msg-act__picker {
  display: flex;
  gap: 2px;
  padding: 6px;
  border-radius: 999px;
  background: var(--vb-surface) !important;
  border: 1px solid var(--vb-border);
  box-shadow: var(--vb-shadow-pop) !important;
}

#view-chats .react-picker__btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-size: 21px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

#view-chats .react-picker__btn:hover {
  background: var(--vb-surface-2);
  transform: scale(1.18);
}

/* ---------- 13. Шапка диалога + «печатает…» ---------- */

#view-chats .thread-header {
  background: var(--vb-surface);
  border-bottom: 1px solid var(--vb-border);
}

#view-chats .thread-header__name { font-weight: 650; }

#view-chats .thread-header__status {
  font-size: 12px;
  color: var(--vb-muted);
}

#view-chats .thread-header__status .vb-typing {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--vb-accent);
  font-weight: 600;
}

#view-chats .thread-header__status .vb-typing i {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: currentColor;
  margin-left: 2px;
  animation: vbTypingDot 1.2s ease-in-out infinite;
}

#view-chats .thread-header__status .vb-typing i:nth-child(2) { animation-delay: 0.18s; }
#view-chats .thread-header__status .vb-typing i:nth-child(3) { animation-delay: 0.36s; }

@keyframes vbTypingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* ---------- 14. Композер-пилюля ---------- */

#view-chats .composer-wrap {
  background: var(--vb-surface);
  border-top: 1px solid var(--vb-border);
}

#view-chats .composer {
  padding: 9px 12px 10px;
  gap: 6px;
  align-items: flex-end;
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

#view-chats .composer__field {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  background: var(--vb-surface-2) !important;
  border: 1px solid var(--vb-border) !important;
  border-radius: 26px !important;
  padding: 3px 6px 3px 4px !important;
  min-height: 50px;
  box-sizing: border-box;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

#view-chats .composer__field:focus-within {
  border-color: color-mix(in srgb, var(--vb-accent) 45%, var(--vb-border)) !important;
  box-shadow: 0 0 0 3px var(--vb-accent-soft) !important;
  background: var(--vb-surface) !important;
}

#view-chats .composer__input {
  font-size: 15px !important;
  line-height: 1.4 !important;
  padding: 8px 6px 8px 8px !important;
  min-height: 38px;
  max-height: 148px;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#view-chats .composer__input:focus,
#view-chats .composer__input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

#view-chats .composer__input::placeholder { color: var(--vb-muted); }

#view-chats .composer .btn-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--vb-muted);
  transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

#view-chats .composer .btn-icon:hover {
  background: var(--vb-accent-soft);
  color: var(--vb-accent);
}

#view-chats .composer .btn-icon:active { transform: scale(0.94); }

#view-chats .composer__actions {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-bottom: 4px;
}

/* Микрофон / отправить — акцентная кнопка-шар */
#view-chats .composer .btn-mic,
#view-chats .composer .btn-send {
  background: var(--vb-bubble-out) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--vb-bubble-out) 38%, transparent);
  transition: background 0.16s ease, transform 0.14s ease, opacity 0.16s ease;
}

#view-chats .composer .btn-mic:hover,
#view-chats .composer .btn-send:hover {
  background: var(--vb-accent-2) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

#view-chats .composer .btn-send { animation: vbSendPop 0.18s ease; }

@keyframes vbSendPop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Кнопка эмодзи-пикера (вставка eco-max-vb.js) */
#view-chats .composer .vb-emoji-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--vb-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

#view-chats .composer .vb-emoji-btn:hover {
  background: var(--vb-accent-soft);
  color: var(--vb-accent);
}

#view-chats .composer .vb-emoji-btn:active { transform: scale(0.94); }

/* Панель эмодзи-пикера */
#view-chats .vb-emoji-panel {
  position: absolute;
  right: 14px;
  bottom: calc(100% + 10px);
  z-index: 90;
  width: min(340px, calc(100vw - 28px));
  max-height: 300px;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: var(--vb-surface);
  border: 1px solid var(--vb-border);
  box-shadow: var(--vb-shadow-pop);
  overflow: hidden;
  animation: vbPanelIn 0.16s ease;
  transform-origin: bottom right;
}

@keyframes vbPanelIn {
  0% { opacity: 0; transform: translateY(8px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

#view-chats .vb-emoji-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--vb-muted);
}

#view-chats .vb-emoji-panel__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 0 8px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#view-chats .vb-emoji-panel__grid button {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.1s ease, transform 0.1s ease;
}

#view-chats .vb-emoji-panel__grid button:hover {
  background: var(--vb-surface-2);
  transform: scale(1.12);
}

#view-chats .vb-emoji-panel__close {
  border: none;
  background: transparent;
  color: var(--vb-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
}

#view-chats .vb-emoji-panel__close:hover { background: var(--vb-surface-2); }

/* ---------- 15. Reply-bar и record-bar ---------- */

#view-chats .reply-bar {
  max-width: 980px;
  margin: 0 auto;
  width: calc(100% - 24px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px 14px 0 0;
  background: var(--vb-accent-soft);
  border-bottom: 1px solid var(--vb-border);
}

#view-chats .reply-bar.hidden { display: none; }

#view-chats .reply-bar__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--vb-accent);
  flex-shrink: 0;
}

#view-chats .reply-bar__text {
  font-size: 13px;
  color: var(--vb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

#view-chats .reply-bar .btn-icon { width: 32px; height: 32px; color: var(--vb-muted); }
#view-chats .reply-bar .btn-icon:hover { color: var(--vb-accent); background: transparent; }

#view-chats .record-bar {
  max-width: 980px;
  margin: 0 auto;
  width: calc(100% - 24px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 0 0 18px 18px;
  background: var(--vb-surface-2);
}

#view-chats .record-bar.hidden { display: none; }

#view-chats .record-bar__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vb-danger, #c33349);
  animation: vbRecPulse 1.1s ease-in-out infinite;
}

@keyframes vbRecPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

#view-chats .record-bar__time {
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--vb-text);
}

#view-chats .record-bar__hint { font-size: 12px; color: var(--vb-muted); }

/* ---------- 16. Тост VB ---------- */

.vb-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 16px);
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  font-family: "Onest", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.vb-toast.vb-toast--show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 17. Список чатов: мягкая доводка ---------- */

#view-chats .chat-row {
  border-radius: 16px;
  transition: background 0.14s ease;
}

#view-chats .chat-row__badge {
  border-radius: 999px;
  font-weight: 700;
}

/* ---------- 18. Мобайл ≤ 480px ---------- */

@media (max-width: 480px) {
  #view-chats #messages {
    padding: 10px 12px 8px;
  }

  #view-chats #messages .msg {
    max-width: 87%;
  }

  #view-chats #messages .bubble {
    padding: 9px 12px 7px !important;
  }

  #view-chats #messages .bubble__text {
    font-size: 15px !important;
  }

  #view-chats #messages .bubble__img {
    max-width: min(260px, 100%);
    max-height: 300px;
  }

  #view-chats #messages .bubble__video {
    width: min(260px, 100%);
    max-height: 280px;
  }

  #view-chats #messages .file-chip { width: min(250px, 100%); }

  #view-chats .composer {
    padding: 8px 10px 9px;
  }

  #view-chats .composer__field { min-height: 48px; }
  #view-chats .composer .btn-icon,
  #view-chats .composer .vb-emoji-btn { width: 40px; height: 40px; }

  #view-chats .vb-emoji-panel {
    right: 8px;
    width: calc(100vw - 16px);
  }

  /* Композер не перекрывает историю: он в потоке flex-колонки,
     дополнительно страхуемся нижним паддингом ленты */
  #view-chats #messages { scroll-padding-bottom: 8px; }
}

/* ---------- 19. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  #view-chats .vb-emoji-panel,
  #view-chats #messages .bubble-send-pop,
  #view-chats .composer .btn-send {
    animation: none !important;
  }
  #view-chats .thread-header__status .vb-typing i { animation: none; opacity: 0.7; }
}