/* ============================================================
   eco-skin-v2.css — дизайн-канон экосистемы ВЫШКА для мессенджера
   Слой v2 (2026-09-07, волна M1). Глубокое доведение до 1:1 канона:
   геометрия каркаса (панель 340, шапки 64), сквизиры-аватары,
   пузыри эталона (свои = brand, время под пузырём), композер-пилюля,
   день-разделители, тёмная тема всех экранов, мобайл 390.
   Подключается ПОСЛЕДНИМ <link> в messenger.html (замена v1).
   ТОЛЬКО презентационный слой: классы, разметка, API/WS не тронуты.
   Эталон: локальный прототип redesign (порт 4190), tokens.css канона.
   ============================================================ */

/* ---------- 0. Шрифт (self-hosted, CSP-safe) ---------- */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url(/fonts/onest-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url(/fonts/onest-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Токены: светлая тема (канон) ---------- */

:root {
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-lift: #fbfcff;
  --surface-2: #eef2fa;
  --text: #0f172a;
  --text-muted: #516180;
  --muted: #516180;
  --accent: #1a56db;
  --accent-strong: #1447b8;
  --accent-2: #087f58;
  --success: #087f58;
  --danger: #c33349;
  --brand-soft: #eaf0ff;
  --accent-soft: #eaf0ff;
  --accent-soft-strong: rgba(26, 86, 219, 0.2);
  --border: #e2e8f4;
  --bubble-out: #1a56db;          /* канон: свои = бренд-синий */
  --bubble-out-ink: #ffffff;
  --bubble-in: #ffffff;
  --radius: 16px;
  --radius-bubble: 18px;
  --composer-pill-radius: 22px;
  --shadow: 0 1px 2px rgb(23 43 99 / 5%), 0 4px 14px rgb(23 43 99 / 5%);
  --shadow-lift: 0 10px 34px rgb(23 43 99 / 8%);
  --shadow-pop: 0 12px 34px rgb(23 43 99 / 14%);
  --grad-accent: var(--accent);
  --grad-header: var(--surface);
  --grad-bubble-out: var(--bubble-out);
  --eco-scrim: rgba(15, 23, 42, 0.45);

  /* v2: геометрия каркаса эталона */
  --v2-avatar-ink: #17345f;
  --v2-on-avatar: #17345f;
  --v2-tap: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ---------- 1b. Токены: тёмная тема (канон) ---------- */

html[data-theme="dark"] {
  --bg: #0b1220;
  --surface: #111c2e;
  --surface-lift: #17243a;
  --surface-2: #142137;
  --text: #edf3ff;
  --text-muted: #9fb0cd;
  --muted: #9fb0cd;
  --accent: #6b96ff;
  --accent-strong: #91baff;
  --accent-2: #2fbe8e;
  --success: #2fbe8e;
  --danger: #e2687c;
  --brand-soft: rgba(107, 150, 255, 0.14);
  --accent-soft: rgba(107, 150, 255, 0.15);
  --accent-soft-strong: rgba(107, 150, 255, 0.32);
  --border: #223049;
  --bubble-out: #2563eb;          /* канон dark: свой пузырь — яркий бренд */
  --bubble-out-ink: #ffffff;
  --bubble-in: #17243a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.32);
  --shadow-lift: 0 12px 36px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.52);
  --grad-accent: var(--accent);
  --grad-header: var(--surface);
  --grad-bubble-out: var(--bubble-out);
  --eco-scrim: rgba(4, 8, 16, 0.6);
  --v2-avatar-ink: #e5edff;
  --v2-on-avatar: #e5edff;
}

/* ---------- 2. База: шрифт, выделение, фокус, скроллбары ---------- */

body {
  font-family: "Onest", system-ui, -apple-system, sans-serif;
}

::selection {
  background: #c9ddff;
  color: #0f172a;
}

html[data-theme="dark"] ::selection {
  background: #244c81;
  color: #edf3ff;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-muted) 32%, transparent) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 28%, transparent);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text-muted) 45%, transparent);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* ---------- 3. Каркас: панель чатов 340, шапки 56 ---------- */

.app {
  --list-width: 340px;
  --header-h: 56px;
}

@media (max-width: 1100px) {
  .app { --list-width: 300px; }
}

@media (max-width: 860px) {
  .app { --list-width: 100%; }
}

/* ---------- 4. Навигация: sidenav / bottomnav ---------- */

.sidenav,
.bottomnav {
  background: var(--surface);
  border-color: var(--border);
}

.sidenav__btn,
.bottomnav__btn {
  color: var(--text-muted);
  border-radius: 14px;
  transition: background var(--motion-fast), color var(--motion-fast);
}

.sidenav__btn:hover,
.bottomnav__btn:hover {
  background: var(--surface-2);
  color: var(--text);
}

.sidenav__btn.is-active,
.bottomnav__btn.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 0 #163f98;
}

html[data-theme="dark"] .sidenav__btn.is-active,
html[data-theme="dark"] .bottomnav__btn.is-active {
  background: var(--accent);
  color: #0b1220;
  box-shadow: none;
}

.bottomnav {
  box-shadow: 0 -6px 24px rgb(23 43 99 / 6%);
}

html[data-theme="dark"] .bottomnav {
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
}

/* ---------- 5. Панель чатов: шапка, поиск, строки, бейджи ---------- */

.list-header,
.thread-header,
.view-header {
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.list-header::after,
.thread-header::after,
.view-header::after { content: none; }

.list-header__title,
.view-header h1 {
  color: var(--text);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.thread-header__name {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.thread-header__status {
  color: var(--text-muted);
}

.thread-header__status.is-online { color: var(--accent-2); }

.thread-header__status::before {
  background: var(--accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 22%, transparent);
}

.list-header .btn-icon,
.thread-header .btn-icon,
.view-header .btn-icon,
.list-header .btn-text,
.view-header .btn-text,
.thread-header .btn-back {
  color: var(--text-muted);
}

.list-header .btn-icon:hover,
.thread-header .btn-icon:hover,
.view-header .btn-icon:hover {
  background: var(--surface-2);
  color: var(--text);
}

.list-header .btn-text,
.view-header .btn-text { color: var(--accent); }

/* Кнопка «Новый чат»: синий квадрат 40x40 r14 как в эталоне */
#btn-new-chat.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 0 #163f98;
  transition: transform 160ms, box-shadow 160ms;
}

#btn-new-chat.btn-icon:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 #163f98;
}

#btn-new-chat.btn-icon:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 #163f98;
}

/* Кнопка темы (eco-skin-init.js) */
.eco-theme-btn { color: var(--text-muted); }
.eco-theme-btn:hover { background: var(--surface-2); color: var(--text); }

.view-header.view-header--overlay {
  background: linear-gradient(180deg, rgba(11, 18, 32, 0.55), transparent);
  color: #fff;
  border-bottom: none;
}
.view-header.view-header--overlay h1 { color: #fff; }
.view-header.view-header--overlay .btn-icon { color: #fff; }
.view-header.view-header--overlay .btn-icon:hover { background: rgba(255, 255, 255, 0.14); }

/* Поиск: пилюля на brand-soft, фокус → surface */
.search {
  padding: 0 16px;
}

.search__input {
  min-height: 40px;
  border-radius: 14px;
  background-color: var(--brand-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%23516180' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 13px center;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 13px;
  padding-left: 37px;
  transition: border-color 180ms, background-color 180ms, box-shadow 180ms;
}

.search__input::placeholder { color: var(--text-muted); opacity: 1; }

.search__input:focus {
  box-shadow: none;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%231a56db' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  border-color: var(--accent);
  outline: none;
}

.search-hits {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Строки списка: r18, hover/active канона */
.chat-row {
  border-radius: 18px;
  margin: 2px 10px;
  padding: 11px 12px;
  width: calc(100% - 20px);
  min-height: 72px;
  transition: background var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
}

.chat-row:hover { background: var(--brand-soft); transform: none; }
.chat-row:active { transform: scale(0.986); }

.chat-row.is-active {
  background: var(--brand-soft);
  border-color: var(--border);
  box-shadow: inset 3px 0 var(--accent);
}

/* Аватары: сквизир 46x48 r17, пастель + тёмные инициалы, кольцо-декор */
.chat-row__avatar {
  width: 46px;
  height: 48px;
  border-radius: 17px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.04em;
  color: var(--v2-on-avatar) !important;
  border: 1px solid rgb(15 23 42 / 5%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 41%);
  position: relative;
  overflow: hidden;
}

.chat-row__avatar:not(:has(img)) {
  background-image: linear-gradient(rgb(255 255 255 / 78%), rgb(255 255 255 / 78%)) !important;
}

html[data-theme="dark"] .chat-row__avatar:not(:has(img)) {
  background-image: linear-gradient(rgb(11 18 32 / 52%), rgb(11 18 32 / 52%)) !important;
}

.chat-row__avatar::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  right: -11px;
  bottom: -13px;
  border: 1px solid rgb(15 23 42 / 7%);
  border-radius: 50%;
}

#panel-list .chat-row__avatar::after,
.search-hits .chat-row__avatar::after {
  width: 24px !important;
  height: 24px !important;
  right: -11px !important;
  bottom: -13px !important;
  border-color: rgb(15 23 42 / 7%) !important;
}

.chat-row__avatar { font-size: 13px; }

.chat-row__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Имя/время/превью */
.chat-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.chat-row__time {
  color: var(--text-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.chat-row.is-unread .chat-row__time { color: var(--muted); }

.chat-row__preview {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.chat-row__preview-icon { color: var(--text-muted); }

.chat-row__badge {
  background: var(--accent);
  color: #fff;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 600;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgb(26 86 219 / 25%);
}

html[data-theme="dark"] .chat-row__badge { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }

/* ---------- 6. Диалог: шапка, фон, разделители, пузыри ---------- */

.panel--thread {
  background:
    radial-gradient(ellipse at 100% 30%, color-mix(in srgb, var(--brand-soft) 70%, transparent), transparent 60%),
    var(--bg);
}

/* Шапка диалога: аватар-сквизир (вставка eco-skin-init v2) */
.thread-header .vy2-header-avatar {
  width: 42px;
  height: 44px;
  border-radius: 14px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--v2-on-avatar) !important;
  border: 1px solid rgb(15 23 42 / 5%);
}

.thread-header .vy2-header-avatar:not(:has(img)) {
  background-image: linear-gradient(rgb(255 255 255 / 78%), rgb(255 255 255 / 78%)) !important;
}

html[data-theme="dark"] .thread-header .vy2-header-avatar:not(:has(img)) {
  background-image: linear-gradient(rgb(11 18 32 / 52%), rgb(11 18 32 / 52%)) !important;
}

.thread-header .vy2-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thread-header .btn-call-audio,
.thread-header #btn-call-audio,
.thread-header #btn-call-video {
  border-radius: 12px;
}

/* Сообщения: колонка, группы по краям (скоуп #messages — бьёт legacy) */
#messages.messages {
  padding: 20px clamp(14px, 2.5vw, 28px) 14px;
  display: flex;
  flex-direction: column;
}

#messages .msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(83%, 640px);
  margin: 0;
  background: transparent;
}

#messages .msg--out {
  align-self: flex-end;
  align-items: flex-end;
  max-width: min(77%, 640px);
}

#messages .msg--in { align-self: flex-start; }

/* Ритм групп: плотно внутри группы, воздушно на смене стороны */
#messages .msg--out + .msg--out { margin-top: 3px; }
#messages .msg--in + .msg--in { margin-top: 3px; }
#messages .msg--in + .msg--out,
#messages .msg--out + .msg--in { margin-top: 14px; }
#messages .maxi-daysep + .msg { margin-top: 2px; }

/* Входящие: ряд с мини-аватаром (вставка eco-skin-init v2) */
#messages .msg--in:has(.vy2-msg-avatar) {
  flex-direction: row;
  align-items: flex-end;
  gap: 7px;
}

/* Пузырь-обёртка: прозрачная, красим содержимое — время уходит ПОД пузырь */
#messages .bubble {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: var(--radius-bubble);
  position: relative;
  width: fit-content;
  max-width: 100%;
}

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

#messages .bubble__text,
#messages .bubble__img,
#messages .bubble__video {
  background: var(--bubble-in) !important;
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent) !important;
  border-radius: 18px 18px 18px 12px !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 3%) !important;
}

#messages .bubble__text {
  padding: 11px 14px !important;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

#messages .bubble__text:empty { display: none; }

#messages .bubble__img,
#messages .bubble__video {
  padding: 4px !important;
  border-radius: 18px 18px 18px 12px !important;
  max-width: 100%;
}

#messages .bubble__img { border-radius: 14px !important; }

#messages .msg--out .bubble__text,
#messages .msg--out .bubble__img,
#messages .msg--out .bubble__video {
  background: var(--bubble-out) !important;
  color: var(--bubble-out-ink) !important;
  border-color: transparent !important;
  border-radius: 18px 18px 12px 18px !important;
  box-shadow: none !important;
}

/* Свои пузыри: текст белым, линки внутри — светлые */
#messages .msg--out .bubble__text a { color: #dce8ff; }

/* Ответ-цитата: мягкий чип над текстом */
#messages .bubble__reply {
  background: var(--brand-soft);
  border-left: 2px solid var(--accent);
  border-radius: 0 10px 10px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
  padding: 6px 10px;
  margin-bottom: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#messages .msg--out .bubble__reply {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-left-color: color-mix(in srgb, var(--accent) 70%, transparent);
  color: color-mix(in srgb, var(--text) 80%, var(--accent));
}

html[data-theme="dark"] #messages .msg--out .bubble__reply {
  background: rgba(255, 255, 255, 0.1);
  border-left-color: rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.88);
}

/* Время/статусы: ПОД пузырём, вне карточки */
#messages .bubble__meta {
  float: none !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 !important;
  padding: 2px 4px 0;
  position: static !important;
  top: auto !important;
  font-size: 9px;
  line-height: 1.2;
  color: var(--text-muted) !important;
  background: transparent !important;
  font-variant-numeric: tabular-nums;
}

#messages .msg--out .bubble__meta { color: var(--text-muted) !important; align-self: flex-end; }
#messages .msg--in .bubble__meta { align-self: flex-start; }
#messages .msg--out .bubble .bubble__meta .ticks,
#messages .msg--out .bubble__meta .ticks { color: var(--accent); }
#messages .bubble__edited { font-size: 9px; opacity: 0.75; }

/* Богатые сообщения (медиа/файлы/реакции/голос) — красим сам пузырь-карточку */
#messages .bubble:has(.bubble__img),
#messages .bubble:has(.bubble__video),
#messages .bubble:has(.bubble-mosaic),
#messages .bubble:has(.voice-player),
#messages .bubble:has(.file-chip),
#messages .bubble:has(.bubble__reacts),
#messages .bubble:has(.bubble-react) {
  background: var(--bubble-in) !important;
  padding: 4px !important;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent) !important;
  box-shadow: 0 1px 2px rgb(15 23 42 / 3%) !important;
  border-radius: 18px 18px 18px 12px !important;
  gap: 0;
}

#messages .bubble:has(.bubble__img) .bubble__text,
#messages .bubble:has(.bubble__video) .bubble__text,
#messages .bubble:has(.bubble-mosaic) .bubble__text,
#messages .bubble:has(.voice-player) .bubble__text,
#messages .bubble:has(.file-chip) .bubble__text {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 10px 4px !important;
}

#messages .bubble:has(.bubble__img) .bubble__img,
#messages .bubble:has(.bubble__video) .bubble__video {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  padding: 0 !important;
}

#messages .msg--out .bubble:has(.bubble__img),
#messages .msg--out .bubble:has(.bubble__video),
#messages .msg--out .bubble:has(.bubble-mosaic),
#messages .msg--out .bubble:has(.voice-player),
#messages .msg--out .bubble:has(.file-chip),
#messages .msg--out .bubble:has(.bubble__reacts),
#messages .msg--out .bubble:has(.bubble-react) {
  background: var(--bubble-out) !important;
  border-color: transparent !important;
  border-radius: 18px 18px 12px 18px !important;
  box-shadow: none !important;
}

#messages .msg--out .bubble:has(.bubble__img) .bubble__text,
#messages .msg--out .bubble:has(.bubble__video) .bubble__text,
#messages .msg--out .bubble:has(.bubble-mosaic) .bubble__text,
#messages .msg--out .bubble:has(.voice-player) .bubble__text,
#messages .msg--out .bubble:has(.file-chip) .bubble__text {
  color: var(--bubble-out-ink) !important;
}

/* Внутри своих КАРТОЧЕК (медиа/файлы/голос/реакции) мета — светлая */
#messages .msg--out .bubble:is(:has(.bubble__img), :has(.bubble__video), :has(.bubble-mosaic), :has(.voice-player), :has(.file-chip), :has(.bubble__reacts), :has(.bubble-react)) .bubble__meta {
  color: rgba(255, 255, 255, 0.78) !important;
}

#messages .msg--out .bubble:is(:has(.bubble__img), :has(.bubble__video), :has(.bubble-mosaic), :has(.voice-player), :has(.file-chip), :has(.bubble__reacts), :has(.bubble-react)) .bubble__meta .ticks {
  color: #ffffff !important;
}

#messages .msg--out .bubble .file-chip,
#messages .msg--out .bubble .voice-player { color: #fff; }

/* Прогресс отправки / ошибка */
#messages .bubble__send {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 2px 4px 0;
}

#messages .bubble__send.is-fail { color: var(--danger); }

#messages .bubble__send-track {
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--text-muted) 22%, transparent);
  overflow: hidden;
}

#messages .bubble__send-bar { background: var(--accent); }

#messages .bubble__retry {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--danger-soft, rgba(195, 51, 73, 0.1));
  color: var(--danger);
  font-weight: 600;
}

/* Реакции: спокойные чипы канона */
#messages .bubble-react {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#messages .bubble-react.is-mine {
  background: var(--brand-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

#messages .bubble-react__n { color: inherit; }

#messages .msg--out .bubble-react {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--text);
}

#messages .msg--out .bubble-react.is-mine {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Мини-аватар входящей группы (вставка eco-skin-init v2) */
#messages .msg .vy2-msg-avatar {
  width: 26px;
  height: 28px;
  border-radius: 9px;
  flex: 0 0 26px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--v2-on-avatar) !important;
  border: 1px solid rgb(15 23 42 / 5%);
  overflow: hidden;
  align-self: flex-end;
}

#messages .msg .vy2-msg-avatar:not(:has(img)) {
  background-image: linear-gradient(rgb(255 255 255 / 78%), rgb(255 255 255 / 78%)) !important;
}

html[data-theme="dark"] #messages .msg .vy2-msg-avatar:not(:has(img)) {
  background-image: linear-gradient(rgb(11 18 32 / 52%), rgb(11 18 32 / 52%)) !important;
}

/* Разделители дат: линии + мелкий текст как в эталоне */
#messages .maxi-daysep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 14px;
  align-self: stretch;
}

#messages .maxi-daysep::before,
#messages .maxi-daysep::after {
  content: "";
  flex: 1;
  max-width: 58px;
  height: 1px;
  background: var(--border);
}

#messages .maxi-daysep span {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
  font-size: 10px;
  padding: 0;
}

/* Пустое состояние: каноничная карточка + «Выберите чат» */
.thread-empty {
  margin: auto;
}

.thread-empty__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lift);
  color: var(--text);
}

.thread-empty__icon {
  background: var(--brand-soft);
  color: var(--accent);
  border-radius: 16px;
}

#messages.messages:empty::after {
  content: "Выберите чат";
  margin: auto;
  color: var(--text-muted);
  font-size: 14px;
}

.messages--chatbg.has-custom-bg .thread-empty__card {
  background: rgba(255, 255, 255, 0.94);
}

html[data-theme="dark"] .messages--chatbg.has-custom-bg .thread-empty__card {
  background: rgba(17, 28, 46, 0.94);
}

.messages--chatbg.has-custom-bg .msg--in .bubble,
.messages--chatbg.has-custom-bg .bubble:has(.bubble__img) {
  background: rgba(255, 255, 255, 0.94);
}

html[data-theme="dark"] .messages--chatbg.has-custom-bg .msg--in .bubble,
html[data-theme="dark"] .messages--chatbg.has-custom-bg .bubble:has(.bubble__img) {
  background: rgba(30, 36, 48, 0.92);
}

.messages--chatbg.has-custom-bg .msg--out .bubble__text {
  background: var(--bubble-out);
}

/* ---------- 7. Композер: карточка + пилюля 22px ---------- */

.composer-wrap {
  background: linear-gradient(0deg, var(--bg) 80%, color-mix(in srgb, var(--bg) 90%, transparent));
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  box-shadow: none;
}

.composer {
  background: transparent;
  border: none;
  padding: 10px 12px 12px;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}

.composer__field {
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  box-shadow: 0 1px 3px rgb(15 23 42 / 3%);
  transition: border-color var(--motion-base), box-shadow var(--motion-base);
}

.composer__field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft-strong);
}

.composer__input::placeholder { color: var(--text-muted); opacity: 1; }

.composer .btn-icon--attach { color: var(--text-muted); }
.composer .btn-icon--attach:hover { background: var(--brand-soft); color: var(--accent); }

.btn-mic {
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--accent);
}

.btn-mic:hover { background: var(--accent-soft); color: var(--accent); }

.btn-send {
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgb(26 86 219 / 28%);
}

html[data-theme="dark"] .btn-send { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }

.btn-send:not(:disabled):hover {
  background: var(--accent-strong);
  box-shadow: 0 6px 18px rgb(26 86 219 / 34%);
}

.reply-bar { background: transparent; }
.reply-bar__body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 12px;
  padding: 8px 10px;
}
.reply-bar__label { color: var(--accent); font-weight: 600; }
.reply-bar__text { color: var(--text-muted); }

.record-bar { background: var(--surface); border-radius: 14px; }
.record-bar__dot { background: var(--danger); animation: v2-rec-signal 1.6s ease-in-out infinite; }

@keyframes v2-rec-signal { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------- 8. Кнопки ---------- */

.btn-primary {
  background: var(--accent);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgb(26 86 219 / 22%);
}

.btn-primary:not(:disabled):hover {
  background: var(--accent-strong);
  box-shadow: 0 6px 18px rgb(26 86 219 / 28%);
}

.btn-primary:disabled { opacity: 0.55; }

.btn-text:active { background: var(--brand-soft); }
.btn-icon { border-radius: 12px; }
.btn-icon:hover { background: var(--surface-2); }

/* ---------- 9. Листы, меню, диалоги, тост ---------- */

.sheet-scrim,
.vy-ask__scrim { background: var(--eco-scrim); }

.sheet {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-lift);
  color: var(--text);
}

.sheet__head h2 { color: var(--text); }

.msg-menu,
.msg-act__menu,
.msg-act__picker.react-picker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
}

.msg-menu button,
.msg-act__menu button { color: var(--text); }

.msg-menu button:hover,
.msg-act__menu button:hover { background: var(--surface-2); }

.react-picker__btn { border-radius: 10px; }
.react-picker__btn:hover { background: var(--surface-2); }

.vy-ask__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  box-shadow: var(--shadow-lift);
  color: var(--text);
}

.vy-ask__btn { border-radius: 12px; background: var(--surface-2); color: var(--text); }
.vy-ask__btn--ok { background: var(--accent); color: #fff; }
.vy-ask__btn--danger { background: #c33349; color: #fff; }

.toast {
  background: rgba(15, 23, 42, 0.94);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  color: #fff;
}

html[data-theme="dark"] .toast {
  background: #223049;
  border: 1px solid var(--border);
}

/* ---------- 10. Настройки (все экраны, включая тёмную) ---------- */

.view--settings,
.settings-scroll {
  background: var(--bg);
}

.settings-card {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.settings-card strong,
.settings-card h2,
.settings-card h3,
.settings-card label { color: var(--text); }

.settings-card--profile {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.settings-card--profile .settings-profile__name,
.settings-profile strong,
.settings-card--profile .settings-profile [class*="__"] { color: var(--text); }

.settings-card--profile .settings-profile__hint,
.settings-card--profile .settings-profile span:not([class]) { color: var(--text-muted); }

.settings-profile__avatar {
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent-soft-strong);
}

.settings-section-title,
.settings-group__title { color: var(--text-muted); }

.seg { border-radius: 14px; background: var(--surface-2); }
.seg__btn { border-radius: 11px; color: var(--text-muted); }

.seg__btn.is-active {
  color: var(--accent);
  background: var(--surface);
  box-shadow: 0 1px 3px rgb(23 43 99 / 10%);
}

html[data-theme="dark"] .seg__btn.is-active {
  background: var(--surface-lift);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.settings-row,
.settings-item { color: var(--text); }

.settings-toggle input:checked + .settings-toggle__track {
  background: var(--accent);
  box-shadow: none;
}

.btn-chatbg-upload { background: var(--accent); }

.btn-logout {
  background: rgba(195, 51, 73, 0.08);
  color: var(--danger);
}

.btn-logout:active { background: rgba(195, 51, 73, 0.16); }

.cache-seg__btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--brand-soft);
}

.memory-meter__fill { background: var(--accent); }

.bg-tile { border-color: var(--border); }
.bg-tile.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft-strong); }

/* ---------- 11. Лента / клипы / звонки ---------- */

.view--feed,
.view--calls,
.view--clips {
  background: var(--bg);
}

.feed-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
}

.story__ring { background: color-mix(in srgb, var(--text-muted) 30%, var(--surface-2)); }

.story--unseen .story__ring {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
}

.calls-list .call-row,
.calls-list > * {
  color: var(--text);
}

.feed-compose-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text-muted);
}

.feed-compose__input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
}

/* ---------- 12. Фон чата по умолчанию: каноничные пресеты ---------- */

html[data-vy-chatbg-light="mist"] .messages--chatbg,
html[data-theme="light"][data-vy-chatbg="mist"] .messages--chatbg {
  background: linear-gradient(168deg, #f6f8fc 0%, #eef2fa 55%, #e7edf9 100%);
}

html[data-vy-chatbg-dark="dusk"] .messages--chatbg,
html[data-theme="dark"][data-vy-chatbg="dusk"] .messages--chatbg {
  background: linear-gradient(168deg, #0b1220 0%, #111c2e 55%, #17243a 100%);
}

.bg-tile__swatch--mist.bg-tile__swatch--light {
  background: linear-gradient(168deg, #f6f8fc, #e7edf9);
}

.bg-tile__swatch--dusk.bg-tile__swatch--dark {
  background: linear-gradient(168deg, #111c2e, #17243a);
}

/* ---------- 13. Голосовые сообщения ---------- */

.msg--out .voice-player__play {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.voice-player {
  background: transparent;
  color: var(--text);
}

.voice-player__play {
  background: var(--brand-soft);
  color: var(--accent);
}

.voice-player__wave { color: var(--text-muted); }

/* ---------- 14. Мелкая фактура ---------- */

.loading { color: var(--text-muted); }

.maxi-skel {
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    color-mix(in srgb, var(--surface-2) 55%, var(--surface)) 45%,
    var(--surface-2) 65%
  );
}

.eco-theme-btn--fixed {
  position: fixed;
  top: calc(10px + var(--safe-top, 0px));
  right: 12px;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* ---------- 15. Мобайл 390: одна колонка, без обрезок ---------- */

@media (max-width: 860px) {
  .app { --list-width: 100%; }

  /* NAV_R2: only the list reserves global navigation space. */
  .app.is-thread-open { padding-bottom: 0; }
  .app.is-thread-open .bottomnav { display: none; }
  .app.is-thread-open .panel--thread { bottom: 0; }

  .list-header__title { font-size: 22px; }

  #btn-new-chat.btn-icon { width: 42px; height: 42px; }

  .chat-row {
    margin: 2px 8px;
    width: calc(100% - 16px);
    padding: 12px 12px;
    min-height: 70px;
  }

  .chat-row__name { font-size: 14px; }
  .chat-row__time { font-size: 11px; }

  .thread-header .vy2-header-avatar { width: 38px; height: 40px; border-radius: 12px; font-size: 12px; }

  #messages.messages { padding: 16px 12px 12px; }

  .msg { max-width: 94%; }
  .msg--out { max-width: 88%; }

  .bubble__text { padding: 10px 12px; font-size: 13px; }

  .composer { padding: 8px 10px 10px; }
  .composer__input { font-size: 16px; }

  .search { padding: 0 12px; }

  .bottomnav { padding-bottom: env(safe-area-inset-bottom, 0px); }

  #messages.messages:empty::after { padding-top: 30vh; }
}

/* Мелкие экраны ≤380: шапка диалога без аватара — экономим место */
@media (max-width: 380px) {
  .thread-header .vy2-header-avatar { display: none; }
}

/* ---------- 16. Доступность движения ---------- */

@media (prefers-reduced-motion: reduce) {
  .chatlist .chat-row,
  .view:not(.hidden),
  .msg.maxi-new .bubble,
  .btn-send:not(.hidden),
  .bubble-react.maxi-new,
  .toast,
  #btn-new-chat.btn-icon,
  .record-bar__dot {
    animation: none !important;
    transition: none !important;
  }
}

/* skin3-patch: hidden input в confirm-модалке не должен рисоваться (Q4) */
.vy-ask__input[hidden]{display:none!important}