/* ============================================================
   Agua · iOS-слой (дизайн 2026, по мотивам iOS 26 «Liquid Glass»)
   Подключается ПОСЛЕДНИМ, после styles.css и agua-27.css.

   Принципы (как у Apple):
   1. Стекло — только у СЛОЯ НАВИГАЦИИ, который плавает над контентом:
      таб-бар / сайдбар, шапки, сегменты, фильтры, меню, шторки, поле ввода.
      Это настоящее стекло браузера (backdrop-filter): размывает тот контент,
      что под ним, одинаково на телефоне и ПК. Никаких WebGL-подложек.
   2. Контент (посты, профиль, чаты, настройки) — спокойные непрозрачные
      поверхности. Стеклянные карточки читаются хуже и стоят дорого: каждая
      пересчитывается на каждом кадре прокрутки.
   3. Выделение вкладки — линза: отрывается, растёт чуть больше панели,
      летит к нажатой вкладке и садится обратно (agua-glass.js → glide).
   4. Цвет приходит из оформления: акцент, фон, карточка — переменные темы,
      поэтому свои оформления и «Космос»/«Мурманск» выглядят цельно.
   ============================================================ */

/* ---------- 1. Токены ---------- */
:root {
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-card: 26px;
  --r-row: 16px;
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  /* контентная поверхность — непрозрачная карточка оформления */
  --surface: var(--card-solid, var(--card));
  --surface-2: color-mix(in srgb, var(--text) 7%, var(--surface));
  --hairline: color-mix(in srgb, var(--text) 9%, transparent);
  /* материал «стекло»: тон берётся у карточки оформления */
  --mat-fill: color-mix(in srgb, var(--card-solid, var(--card)) 58%, transparent);
  --mat-fill-thick: color-mix(in srgb, var(--card-solid, var(--card)) 80%, transparent);
  --mat-blur: blur(22px) saturate(1.8);
  --mat-blur-thick: blur(32px) saturate(1.8);
  --mat-edge: inset 0 .5px 0 rgba(255, 255, 255, .22), inset 0 0 0 .5px rgba(255, 255, 255, .09);
  --mat-shadow: 0 12px 32px -12px rgba(0, 0, 0, .55);
  /* выделение вкладки (сидит под иконкой) и «бегунок» сегмента */
  --sel-fill: color-mix(in srgb, var(--accent) 22%, color-mix(in srgb, var(--text) 7%, transparent));
  --sel-ink: color-mix(in oklab, var(--accent) 80%, var(--text));
  --thumb: color-mix(in srgb, var(--text) 16%, transparent);
  --thumb-shadow: 0 3px 10px -2px rgba(0, 0, 0, .35);
  --bubble-in: color-mix(in srgb, var(--text) 13%, var(--surface));
  --press: color-mix(in srgb, var(--text) 9%, transparent);
}
[data-theme="light"] {
  --mat-fill: color-mix(in srgb, var(--card-solid, var(--card)) 62%, transparent);
  --mat-fill-thick: color-mix(in srgb, var(--card-solid, var(--card)) 84%, transparent);
  --mat-edge: inset 0 .5px 0 rgba(255, 255, 255, .95), inset 0 0 0 .5px rgba(0, 0, 0, .07);
  --mat-shadow: 0 12px 30px -14px rgba(20, 24, 32, .28);
  --sel-ink: color-mix(in oklab, var(--accent) 78%, #000);
  --thumb: #fff;
  --thumb-shadow: 0 3px 10px -3px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .04);
  --bubble-in: color-mix(in srgb, var(--text) 8%, var(--surface));
}
/* Базовая палитра без оформления — как системные цвета iOS: фон чёрный /
   серо-голубой, карточки на шаг светлее, серые тексты контрастные (≥4.5:1). */
:root:not([data-skin]):not([data-theme="light"]) {
  --bg: #000; --bg-2: #0a0a0b; --bg-solid: #000;
  --card: #151517; --card-2: #121214; --pill: #232326; --pill-2: #2d2d31;
  --text: #fff; --text-2: #c7c7cc; --text-3: #8e8e93;
  --border: rgba(255, 255, 255, .09); --border-soft: rgba(255, 255, 255, .055);
  --accent: #30d158; --accent-strong: #28b44b; --accent-dark: #0f3d1c;
}
:root:not([data-skin])[data-theme="light"] {
  --bg: #f2f2f7; --bg-2: #e9e9ef; --bg-solid: #f2f2f7;
  --card: #ffffff; --card-2: #ffffff; --pill: #e7e7ec; --pill-2: #dadadf;
  --text: #0a0a0c; --text-2: #3c3c43; --text-3: #6c6c72;
  --border: rgba(60, 60, 67, .14); --border-soft: rgba(60, 60, 67, .08);
}

/* ---------- 2. Основа ---------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
input, textarea { caret-color: var(--accent); }
/* длинный текст — системным шрифтом обычной толщины, как в iOS (SF Pro / Segoe);
   скруглённый жирный остаётся у заголовков, имён и кнопок */
.post-body, .comment-text, .dm-text, .profile-bio, .user-row .desc, .chat-item .chat-preview,
.empty p, .notice-card p, .settings-section p, .modal p, .ai-box, .quoted-post .qp-text {
  font-family: var(--font-text); font-weight: 400; letter-spacing: -.005em;
}
.post-body b, .post-body strong, .dm-text b { font-weight: 650; }
.c, .views, .t-count, .stat-btn b, .profile-stats b, .chat-time, .dm-time, .app-version { font-variant-numeric: tabular-nums; }
h1, h2, h3, .topbar h1, .profile-name-row h2 { text-wrap: balance; }

/* обои и анимированные фоны: на время прокрутки замирают — иначе всё стекло
   над ними пересчитывается каждый кадр (это и лагало на всех устройствах) */
#skin-bg::before, #skin-bg::after { will-change: transform; }
html.is-scrolling #skin-bg::before, html.is-scrolling #skin-bg::after { animation-play-state: paused !important; }

/* ---------- 3. Материал «стекло» ---------- */
html body :is(.topbar, .feed-tabs, .chat-head, .dm-composer, .feed-search-fab, .gc-here-pill) {
  background: var(--mat-fill) !important;
  -webkit-backdrop-filter: var(--mat-blur) !important; backdrop-filter: var(--mat-blur) !important;
  border: 0 !important;
  box-shadow: var(--mat-edge), var(--mat-shadow) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body :is(.topbar, .feed-tabs, .chat-head, .dm-composer, .left .nav, .feed-filter) { background: var(--mat-fill-thick) !important; }
}

/* ---------- 4. Навигация: таб-бар (телефон) и сайдбар (ПК) ---------- */
html body .left .nav > .mobile-nav-indicator { display: none !important; }
html body .left .nav {
  background: var(--mat-fill) !important;
  -webkit-backdrop-filter: var(--mat-blur) !important; backdrop-filter: var(--mat-blur) !important;
  border: 0 !important;
  box-shadow: var(--mat-edge), var(--mat-shadow) !important;
  overflow: visible !important;
}
html body .left .nav-item:not(.nav-create) { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body .left .nav-item.active:not(.nav-create) { color: var(--sel-ink) !important; }

@media (min-width: 681px) {
  html body .left .nav { border-radius: 30px !important; padding: 8px !important; gap: 4px !important; }
  html body .left .nav-item { min-height: 50px; border-radius: 22px; font-family: var(--font-bold); font-weight: 700; }
  html body .left .nav-item.nav-create {
    margin-top: 8px; border-radius: 22px;
    background: var(--accent) !important; color: var(--accent-ink) !important;
    box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .35), 0 8px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent) !important;
  }
}

@media (max-width: 680px) {
  /* iOS 26: капсула с четырьмя вкладками + отдельная круглая кнопка «Создать» */
  html body .left .nav {
    /* ряд — ровно по высоте капсулы (66 − 2×5): круглая «+» (62px) раньше
       растягивала его, и вкладки с выделением съезжали на 3px вниз */
    /* 4 вкладки | промежуток 16px | круглая «+». Капсула кончается на 7px правее
       последней вкладки — как слева, иначе плашка у профиля упиралась в край */
    display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) 16px 62px; grid-template-rows: 56px; grid-auto-flow: column;
    align-items: center; gap: 0 !important;
    height: 66px; padding: 5px 6px !important;
    background: transparent !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  /* сама капсула — под четырьмя вкладками; кнопка «Создать» — своим кругом */
  html body .left .nav::before {
    content: ""; position: absolute; z-index: -1; inset: 0 77px 0 0; border-radius: 999px;
    background: var(--mat-fill);
    -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
    box-shadow: var(--mat-edge), var(--mat-shadow);
  }
  html body .left .nav > .nav-item:not(.nav-create) { order: 1; }
  html body .left .nav > .nav-item.nav-create { order: 2; grid-column: 6; justify-self: end; }
  html body .left .nav > a[data-nav="search"] { display: none !important; }
  /* как в SpanchGram: только иконки, ровно по центру кнопки; у профиля —
     только аватарка, без имени */
  html body .left .nav-item:not(.nav-create) {
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 0 !important; padding: 0 !important; height: 56px !important; min-height: 56px !important;
    border-radius: 999px !important; margin: 0 1px;
  }
  html body .left .nav-item:not(.nav-create) > span:not(.badge):not(.avatar):not(.ava-ring) { display: none !important; }
  html body .left .nav-item:not(.nav-create) .ic { width: 27px; height: 27px; margin: 0 !important; }
  html body .left .nav-item .nav-avatar { width: 30px !important; height: 30px !important; margin: 0 !important; }
  html body .left .nav-item .badge { left: 50% !important; transform: translateX(4px) !important; }
  html body .left .nav-item.nav-create {
    width: 62px !important; height: 62px !important; border-radius: 50% !important;
    background: color-mix(in srgb, var(--accent) 92%, transparent) !important; color: var(--accent-ink) !important;
    -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
    box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .45), inset 0 0 0 .5px rgba(255, 255, 255, .2), 0 12px 28px -12px color-mix(in srgb, var(--accent) 80%, #000) !important;
  }
  html body .left .nav-item.nav-create .ic { width: 27px !important; height: 27px !important; }
  html body .left .nav-item .badge { top: 3px !important; }
}

/* Выделение (одно на группу) — капля (agua-glass.js → glide). В покое —
   спокойная плашка ПОД иконками; в полёте плашка гаснет, а над иконками
   проявляется линза .seg-lens (обе двигает одна и та же траектория). */
html body .seg-glider {
  background: var(--sel-fill) !important;
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .12) !important;
  transition: none !important;
  z-index: 0;
}
/* меню — нейтральная плашка, как в SpanchGram / Telegram: цвет текста ~10% */
html body .left .nav > .seg-glider { background: color-mix(in srgb, var(--text) 11%, transparent) !important; box-shadow: none !important; }
html body :is(.tabs, .ptabs, .set-tabs, .seg) > .seg-glider { background: var(--thumb) !important; box-shadow: var(--thumb-shadow) !important; }
/* слой линзы — вне раскладки (иначе общее правило agua-27 «дети с плашкой —
   relative» ставило его в сетку и сдвигало все кнопки меню) */
html body .has-glider > .seg-lens, html body .seg-lens {
  position: absolute !important; left: 0; top: 0; z-index: 3 !important; pointer-events: none;
  border-radius: 999px; opacity: 0;
  background: color-mix(in srgb, #fff 6%, transparent);
  -webkit-backdrop-filter: saturate(1.9) brightness(1.12) contrast(1.05);
  backdrop-filter: saturate(1.9) brightness(1.12) contrast(1.05);
  box-shadow:
    inset 1px 1.5px 1px rgba(255, 255, 255, .5),
    inset -1px -1.5px 1px rgba(255, 255, 255, .2),
    inset 0 0 0 .66px rgba(255, 255, 255, .45),
    inset 0 0 14px rgba(255, 255, 255, .1),
    0 12px 28px -12px rgba(0, 0, 0, .45);
}
[data-theme="light"] body .seg-lens {
  background: color-mix(in srgb, #fff 24%, transparent);
  box-shadow:
    inset 1px 1.5px 1px #fff, inset -1px -1.5px 1px rgba(255, 255, 255, .7),
    inset 0 0 0 .66px rgba(0, 0, 0, .07), 0 12px 28px -12px rgba(20, 24, 32, .32);
}
html body .set-tabs > .seg-lens { border-radius: 999px; }
:is(.tabs, .ptabs, .set-tabs, .seg, .left .nav).has-glider { overflow: visible !important; }

/* ---------- 5. Шапки ---------- */
html body .topbar {
  border-radius: 999px !important; padding: 6px 8px !important; min-height: 56px;
  margin-bottom: 12px;
}
html body .topbar h1 { font-size: 1.22rem; font-weight: 700; letter-spacing: -.015em; }
/* шапка без кнопки «назад» («Сообщения», «Поиск»): заголовок не жмётся к краю */
html body .topbar > div:first-child { padding-left: 12px; }
html body .topbar .sub { font-size: .84rem; font-weight: 600; }
html body .icon-btn {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border: 0; color: var(--text);
}
html body .topbar .icon-btn { width: 44px; height: 44px; border-radius: 50%; }

/* ---------- 6. Сегменты и фильтры ---------- */
html body :is(.tabs, .ptabs) {
  border-radius: 999px !important; padding: 4px !important; gap: 0 !important;
}
html body .feed-tabs { border-radius: 999px !important; padding: 4px !important; }
html body :is(.tab, .ptab) {
  background: transparent !important; box-shadow: none !important;
  font-family: var(--font-bold); font-weight: 700; color: var(--text-2);
  min-height: 42px; border-radius: 999px !important;
}
html body .has-glider > :is(.tab, .ptab).active, html body :is(.tab, .ptab).active { color: var(--text) !important; }
/* вкладки настроек: серый iOS-сегмент. Своей заливки у вкладок нет НИКОГДА —
   раньше с обоями каждая получала своё стекло, и выбранными казались все */
html body .set-tabs {
  background: color-mix(in srgb, var(--text) 9%, transparent) !important;
  border: 0 !important; box-shadow: none !important; padding: 3px !important; border-radius: 999px !important;
}
html body .set-tab {
  background: transparent !important; box-shadow: none !important; border: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: var(--text-2) !important;
}
html body .has-glider > .set-tab.active, html body .set-tab.active { color: var(--text) !important; }
/* фильтры ленты — стеклянные капсулы */
html body .feed-filter {
  background: var(--mat-fill) !important; color: var(--text-2) !important;
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  border: 0 !important; box-shadow: var(--mat-edge) !important;
  min-height: 36px; padding: 0 15px; font-weight: 700;
}
html body .feed-filter.active, html body .feed-mood-opt.active {
  background: color-mix(in srgb, var(--accent) 24%, var(--mat-fill)) !important; color: var(--sel-ink) !important;
}

/* ---------- 7. Контент: посты и карточки ---------- */
html body :is(.post, .pinned-frame, .profile-header, .settings-section, .notice-card, .composer, .bug-card, .comment-dock .comment-box) {
  background: var(--surface) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 .5px var(--hairline) !important;
}
/* Карточки правой колонки — жидкое стекло (WebGL, agua-glass.js). Пока оно
   не нарисовалось (или WebGL нет) — обычное матовое CSS-стекло того же тона. */
html body .right :is(.side-card, .online-card):not(.lgx-host-liquid) {
  background: var(--mat-fill) !important;
  -webkit-backdrop-filter: var(--mat-blur) !important; backdrop-filter: var(--mat-blur) !important;
  border: 0 !important;
  /* блики по кромке как у жидкого стекла: светлее сверху-слева, слабее снизу-справа */
  box-shadow: inset 1px 1.5px 1px rgba(255, 255, 255, .22), inset -1px -1.5px 1px rgba(255, 255, 255, .07),
    inset 0 0 0 .66px rgba(255, 255, 255, .12), var(--mat-shadow) !important;
}
[data-theme="light"] body .right :is(.side-card, .online-card):not(.lgx-host-liquid) {
  box-shadow: inset 1px 1.5px 1px #fff, inset -1px -1.5px 1px rgba(255, 255, 255, .6), inset 0 0 0 .66px rgba(0, 0, 0, .06), var(--mat-shadow) !important;
}
/* у жидкого стекла — тонкая светлая кромка (стекло само рисует блик и тень) */
html body .right :is(.side-card, .online-card).lgx-host-liquid { border: 1px solid rgba(255, 255, 255, .14) !important; }
[data-theme="light"] body .right :is(.side-card, .online-card).lgx-host-liquid { border-color: rgba(255, 255, 255, .7) !important; }
/* С обоями («Космос», «Мурманск», своё оформление) посты и блоки — матовое
   стекло: обои видно сквозь них, как раньше, но без WebGL под каждым постом */
:root:is([data-skin="custom"], [data-skin="space"], [data-skin="murmansk"]) body :is(.post, .pinned-frame, .profile-header, .settings-section, .notice-card, .composer, .bug-card) {
  background: color-mix(in srgb, var(--card-solid, var(--card)) 58%, transparent) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.6) !important; backdrop-filter: blur(22px) saturate(1.6) !important;
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .14), inset 0 0 0 .5px rgba(255, 255, 255, .07) !important;
}
:root[data-theme="light"]:is([data-skin="custom"], [data-skin="space"], [data-skin="murmansk"]) body :is(.post, .pinned-frame, .profile-header, .settings-section, .notice-card, .composer, .bug-card) {
  background: color-mix(in srgb, var(--card-solid, var(--card)) 70%, transparent) !important;
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .9), inset 0 0 0 .5px rgba(0, 0, 0, .05) !important;
}
html body .comment-dock .comment-box {
  background: var(--mat-fill-thick) !important;
  -webkit-backdrop-filter: var(--mat-blur) !important; backdrop-filter: var(--mat-blur) !important;
  box-shadow: var(--mat-edge), var(--mat-shadow) !important;
  border-radius: 24px !important;
}
html body :is(.post, .side-card, .online-card, .settings-section, .notice-card) { border-radius: var(--r-card) !important; }
html body .post { padding: 16px 16px 8px !important; margin-bottom: 12px; }
html body .post-head { gap: 11px; }
html body .post-head .dname { font-size: 1rem; font-weight: 700; }
html body .post-head :is(.uname, .time, .dot-sep) { font-family: var(--font-text); font-weight: 400; font-size: .9rem; color: var(--text-3); }
html body .post-head .icon-btn[data-menu] { width: 36px; height: 36px; background: transparent; color: var(--text-3); }
html body .post-body { font-size: 1.02rem; line-height: 1.45; margin-top: 8px; color: var(--text); }
/* кнопки под постом: чистые иконки со счётчиком, без «таблеток»; при нажатии —
   короткая подсветка-круг (как у кнопок панели iOS) */
html body .post-actions { margin-top: 8px !important; gap: 2px !important; }
html body .action-left, html body .action-right { gap: 2px !important; }
html body .post-actions .act, html body .post-actions .views {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  min-width: 44px; height: 40px; padding: 0 9px !important; border-radius: 999px;
  color: var(--text-2) !important; gap: 5px;
}
html body .post-actions .act .ic, html body .post-actions .views .ic { width: 22px !important; height: 22px !important; }
html body .post-actions .act .c, html body .post-actions .views .c { font-family: var(--font-text); font-weight: 500; font-size: .9rem; }
html body .post-actions .act:active { background: var(--press) !important; transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { html body .post-actions .act:hover { background: var(--press) !important; } }
html body .post-actions :is(.act.liked, .act.fav-on, .act.rep-on) { color: var(--sel-ink) !important; }
html body .post-actions .views { color: var(--text-3) !important; pointer-events: none; }
/* превью комментария под постом и цитата — вложенная поверхность на шаг светлее */
html body :is(.comment-preview, .quoted-post, .ai-box, .poll-opt) {
  background: var(--surface-2) !important; border: 0 !important; box-shadow: none !important;
}
html body .stories-rail .avatar { background: var(--surface-2); }

/* ---------- 8. Аватарки без фото — цвет из оформления ---------- */
/* --ah — сдвиг оттенка ЧИСЛОМ (в относительном цвете оттенок h — число,
   «+ 5deg» сделал бы всю запись ошибкой и фон пропал бы) */
html body .avatar.ava-letter { background: var(--accent); color: var(--accent-ink); }
html body .cover.cover-blank {
  background:
    radial-gradient(120% 160% at 12% 0%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 64%),
    radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
    var(--surface-2) !important;
}
@supports (color: oklch(from red l c calc(h + 10))) {
  html body .avatar.ava-letter { background: oklch(from var(--accent) l c calc(h + var(--ah, 0))); }
  html body .cover.cover-blank {
    background:
      radial-gradient(120% 160% at 12% 0%, color-mix(in srgb, oklch(from var(--accent) l c calc(h + var(--ah, 0))) 40%, transparent), transparent 64%),
      radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),
      var(--surface-2) !important;
  }
}

/* ---------- 9. Кнопки ---------- */
html body .btn {
  border-radius: 999px; font-family: var(--font-bold); font-weight: 700;
  background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text);
  border: 0; box-shadow: none;
}
html body .btn.primary { background: var(--accent); color: var(--accent-ink); }
html body .btn.ghost { background: color-mix(in srgb, var(--text) 8%, transparent) !important; color: var(--text) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body .btn.danger { background: color-mix(in srgb, var(--danger) 15%, transparent) !important; color: color-mix(in srgb, var(--danger) 78%, var(--text)) !important; }
[data-theme="light"] body .btn.danger { color: #c62828 !important; }

/* ---------- 10. Профиль ---------- */
html body .profile-header { overflow: hidden; }
html body .profile-actions .btn, html body .profile-actions .icon-btn { background: color-mix(in srgb, var(--text) 10%, var(--surface)); }
html body .profile-actions .btn.primary { background: var(--accent); color: var(--accent-ink); }
html body .profile-avatar { border-color: var(--surface) !important; }

/* ---------- 11. Настройки — сгруппированные списки iOS ---------- */
html body .settings-section { padding: 16px 18px !important; margin-bottom: 14px; }
html body .settings-section :is(h2, h4) {
  font-family: var(--font-bold); font-weight: 700; font-size: .78rem !important;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-3) !important;
  margin-bottom: 12px !important;
}
html body .adm-enter { border-radius: var(--r-card) !important; }

/* ---------- 12. Сообщения ---------- */
html body .chat-item {
  border-radius: var(--r-row); padding: 10px 10px; margin-bottom: 2px;
}
html body .chat-item .chat-name { font-weight: 700; }
html body .chat-item .chat-preview { font-size: .92rem; color: var(--text-3); }
html body .chat-item.gc-row, html body #activity-row { background: var(--surface) !important; box-shadow: inset 0 0 0 .5px var(--hairline) !important; border-radius: var(--r-card) !important; }
/* чат */
html body .chat-head {
  border-radius: 999px !important; margin: 8px 0 4px; padding: 6px 8px !important;
  border-bottom: 0 !important;
}
@media (max-width: 900px) {
  html body .chat-head { margin: calc(8px + env(safe-area-inset-top, 0px)) 0 4px; padding-top: 6px !important; position: relative; z-index: 5; }
}
html body .chat-head .icon-btn { width: 40px; height: 40px; border-radius: 50%; }
html body .dm-msgs { padding-top: 6px; }
html body .dm-msg { max-width: 76%; margin-top: 8px; }
html body .dm-msg.cont { margin-top: 2px; }
html body .dm-bubble {
  background: var(--bubble-in) !important; border: 0 !important; box-shadow: none !important;
  border-radius: 20px 20px 20px 6px; padding: 8px 13px 6px;
}
html body .dm-msg.mine .dm-bubble { background: var(--accent) !important; color: var(--accent-ink); border-radius: 20px 20px 6px 20px; }
html body .dm-msg.cont .dm-bubble { border-top-left-radius: 8px; }
html body .dm-msg.mine.cont .dm-bubble { border-top-left-radius: 20px; border-top-right-radius: 8px; }
html body .dm-text { font-size: 1rem; line-height: 1.34; }
html body .dm-time { font-family: var(--font-text); font-size: .72rem; margin-top: 2px; color: color-mix(in srgb, var(--text) 60%, transparent); }
html body .dm-msg.mine :is(.dm-time, .dm-check, .dm-check.read) { color: color-mix(in srgb, var(--accent-ink) 66%, transparent); }
html body .dm-day {
  background: var(--mat-fill) !important; color: var(--text-2);
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  font-family: var(--font-bold); font-weight: 700;
}
/* плашка о шифровании — в начале переписки: аккуратная капсула по центру,
   замок — ровно посередине по вертикали */
html body .dm-note.dm-e2e {
  align-self: center; align-items: center !important; justify-content: center; gap: 8px !important;
  max-width: min(330px, 92%); margin: 8px auto 14px; padding: 9px 14px;
  border-radius: 18px; background: color-mix(in srgb, var(--text) 6%, transparent);
  font-family: var(--font-text); font-size: .76rem; line-height: 1.35; color: var(--text-3); text-align: left;
}
html body .dm-note.dm-e2e .ic { width: 15px !important; height: 15px !important; margin: 0 !important; flex: none; align-self: center; }
html body .dm-init :is(.dm-msg, .dm-day, .dm-note) { animation: none !important; }
/* поле ввода — жидкое стекло «regular»: прозрачнее матового, блики по кромке,
   без тени снизу (она ложилась под капсулой тёмным размытием) */
html body .dm-composer {
  border-radius: 28px !important; padding: 5px !important;
  background: color-mix(in srgb, var(--card-solid, var(--card)) 30%, transparent) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.9) brightness(1.04) !important; backdrop-filter: blur(12px) saturate(1.9) brightness(1.04) !important;
  box-shadow: inset 1px 1.5px 1px rgba(255, 255, 255, .28), inset -1px -1.5px 1px rgba(255, 255, 255, .1), inset 0 0 0 .66px rgba(255, 255, 255, .2) !important;
}
[data-theme="light"] body .dm-composer {
  background: rgba(255, 255, 255, .42) !important;
  box-shadow: inset 1px 1.5px 1px #fff, inset -1px -1.5px 1px rgba(255, 255, 255, .7), inset 0 0 0 .66px rgba(0, 0, 0, .08) !important;
}
html body .chat-foot { background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* самолётик: у бумажного самолётика «тяжёлый» хвост слева снизу — на глаз
   он стоит по центру, если сдвинуть рисунок на полпикселя вправо-вверх */
html body .dm-composer .send { display: grid !important; place-items: center !important; padding: 0 !important; }
html body .dm-composer .send .ic { margin: 0 !important; transform: translate(-.5px, .5px); }
html body .dm-composer :is(input, textarea, .dm-input) { background: transparent !important; border: 0 !important; font-family: var(--font-text); font-size: 1rem; }
html body .dm-composer .send { background: var(--accent) !important; color: var(--accent-ink) !important; border-radius: 50% !important; }
html body .chat-foot { background: transparent !important; }

/* ---------- 13. Окна, шторки, меню, тосты ---------- */
html body :is(.modal, .sheet, .send-sheet, .comments-sheet, .gcp-sheet) {
  background: var(--mat-fill-thick) !important;
  -webkit-backdrop-filter: var(--mat-blur-thick) !important; backdrop-filter: var(--mat-blur-thick) !important;
  border: 0 !important; box-shadow: var(--mat-edge), 0 30px 80px -20px rgba(0, 0, 0, .6) !important;
}
html body :is(.modal, .sheet) { border-radius: 30px !important; }
html body .send-sheet { border-radius: 30px 30px 0 0 !important; }
html body :is(.msg-menu, .composer-chooser, .cmenu, .post-menu, .ctx-menu) {
  background: var(--mat-fill-thick) !important;
  -webkit-backdrop-filter: var(--mat-blur-thick) !important; backdrop-filter: var(--mat-blur-thick) !important;
  border: 0 !important; box-shadow: var(--mat-edge), 0 24px 60px -16px rgba(0, 0, 0, .55) !important;
  border-radius: 22px !important;
}
/* под окнами, меню «Создать» и выделенным сообщением — размытие всего
   экрана, как было (его ждут: фокус на том, что открыто) */
html body :is(.modal-backdrop, .cc-backdrop, .cs-backdrop, .msg-menu-back) {
  -webkit-backdrop-filter: var(--win-blur) !important; backdrop-filter: var(--win-blur) !important;
}
html body .toast {
  background: var(--mat-fill-thick) !important; color: var(--text) !important;
  -webkit-backdrop-filter: var(--mat-blur-thick); backdrop-filter: var(--mat-blur-thick);
  border: 0 !important; box-shadow: var(--mat-edge), var(--mat-shadow) !important; border-radius: 999px !important;
}

/* ---------- 14. Переходы между экранами ---------- */
/* старое «проявление» каждой колонки на каждом рендере выключено — им
   управляет withTransition (enter-tab / enter-push / enter-pop) */
html body :is(.feed, .right) { animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  html body .feed.enter-tab { animation: aguaTabIn .42s cubic-bezier(.22, 1, .36, 1) both !important; }
  html body .feed.enter-push { animation: aguaPushIn .34s var(--ease-ios) both !important; }
  html body .feed.enter-pop { animation: aguaPopIn .3s var(--ease-ios) both !important; }
}
/* вкладка (лента, поиск, профиль…) проявляется мягко: из прозрачности и чуть
   снизу, с длинным плавным «доездом» — без рывка */
@keyframes aguaTabIn { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes aguaPushIn { from { opacity: 0; transform: translate3d(34px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes aguaPopIn { from { opacity: 0; transform: translate3d(-26px, 0, 0); } to { opacity: 1; transform: none; } }

/* ---------- 15. Доступность ---------- */
@media (prefers-reduced-transparency: reduce) {
  html body :is(.topbar, .feed-tabs, .chat-head, .dm-composer, .feed-filter, .modal, .sheet, .send-sheet, .msg-menu, .toast, .comment-dock .comment-box),
  html body .left .nav, html body .left .nav::before {
    background: var(--surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* ПК: чат ровно по высоте колонки. Было «100dvh − 24px» (876px) при колонке
   832px — чат вылезал на 44px, и поле ввода липло поверх последних сообщений */
@media (min-width: 901px) {
  html body .chat-page { height: 100% !important; min-height: 0; }
}

/* Реакции под сообщением: своя капля, а не полупрозрачная — иначе в своём
   (цветном) пузыре и в некоторых темах она сливалась с сообщением */
html body .dm-react-chip {
  background: var(--surface) !important; color: var(--text) !important;
  border: 0 !important; box-shadow: 0 0 0 .66px var(--hairline), 0 2px 6px -2px rgba(0, 0, 0, .35) !important;
}
html body .dm-react-chip.mine {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)) !important; color: var(--text) !important;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent), 0 2px 6px -2px rgba(0, 0, 0, .35) !important;
}

/* Играет музыка: шапка и вкладки — сразу под плашкой песни, с небольшим
   зазором (раньше между ними было 30–54px пустоты) */
html body.mini-on .feed { padding-top: calc(36px + var(--pill-shift, 0px)) !important; }
@media (max-width: 680px) {
  html body.mini-on .feed { padding-top: calc(62px + var(--pill-shift, 0px)) !important; }
}

/* ============================================================
   ПЛЕЕР «СЕЙЧАС ИГРАЕТ» (эквалайзер) — в духе Apple Music
   Фон — размытая обложка; крупная обложка (на паузе чуть меньше); вокруг —
   мягкая аура цвета обложки, дышит спектром (app.js → startVisualizer);
   название слева; тонкая перемотка с временем снизу; крупные кнопки без кругов.
   ============================================================ */
html body #eq-host.open { background: #000; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body #eq-host .eq-stage { overflow: hidden; justify-content: flex-start; padding-top: calc(78px + env(safe-area-inset-top)); }
html body #eq-host .eq-art-bg {
  position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 35%, rgb(var(--eq-glow, 60,60,70)) 0%, transparent 70%), #0b0b0d;
}
html body #eq-host .eq-art-bg::before {
  content: ""; position: absolute; inset: 0;
  background: var(--eq-art, none) center / cover no-repeat;
  filter: blur(70px) saturate(1.7) brightness(.62); transform: scale(1.15);
}
html body #eq-host .eq-art-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.45) 70%, rgba(0,0,0,.65)); }
html body #eq-host .eq-stage > :not(.eq-art-bg) { position: relative; z-index: 1; }
html body #eq-host .eq-beams { display: none !important; }
/* верх: «свернуть» слева, язычок по центру, текст песни справа */
html body #eq-host .eq-stage > .eq-top { position: absolute !important; left: 0; right: 0; justify-content: space-between; z-index: 6; }
html body #eq-host .eq-grab { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .45); }
html body #eq-host .eq-roundbtn {
  width: 42px; height: 42px; background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .35);
}
html body #eq-host .eq-roundbtn.on { background: #fff; color: #000; }
/* обложка и аура */
html body #eq-host .eq-ring { width: min(84vw, 380px); flex: none; margin-top: 8px; }
html body #eq-host .eq-ring canvas { width: 150%; height: 150%; }
html body #eq-host .eq-cover {
  width: 100%; border-radius: 14px;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .7), 0 0 0 .5px rgba(255, 255, 255, .12);
  transition: none; will-change: transform;
}
/* название и исполнитель — слева, как в iOS; счётчик — тихо справа */
html body #eq-host .eq-meta { text-align: left; width: min(84vw, 380px); max-width: none; margin-top: 34px; }
html body #eq-host .eq-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #eq-host .eq-artist { font-family: var(--font-text); font-size: 1.12rem; color: rgba(255, 255, 255, .62); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #eq-host .eq-pager { justify-content: flex-start; margin-top: 12px; }
html body #eq-host .eq-counter { text-align: left; color: rgba(255, 255, 255, .45); }
/* низ: перемотка + кнопки */
html body #eq-host .eq-bar { position: relative; background: none !important; padding: 26px 0 calc(28px + env(safe-area-inset-bottom)); gap: 22px; margin-top: auto; width: min(84vw, 380px); }
html body #eq-host .eq-seek { width: 100%; max-width: none; flex-direction: column; align-items: stretch; gap: 7px; }
html body #eq-host .eq-track { flex: none !important; width: 100%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .22); transition: height .18s ease; }
html body #eq-host .eq-track:active { height: 10px; }
html body #eq-host .eq-track .fill { border-radius: 3px; background: rgba(255, 255, 255, .9); }
html body #eq-host .eq-times { display: flex; justify-content: space-between; }
html body #eq-host .eq-seek .t { min-width: 0; font-family: var(--font-text); font-size: .76rem; font-weight: 600; color: rgba(255, 255, 255, .55); }
html body #eq-host .eq-controls { gap: 0; width: 100%; justify-content: space-evenly; }
html body #eq-host .eq-controls button { width: 72px; height: 72px; border-radius: 50%; background: transparent !important; box-shadow: none !important; }
html body #eq-host .eq-controls button:active { background: rgba(255, 255, 255, .12) !important; transform: scale(.92); }
html body #eq-host .eq-controls .nav .ic { width: 36px; height: 36px; }
html body #eq-host .eq-play { background: transparent !important; color: #fff !important; }
html body #eq-host .eq-play .ic { width: 46px; height: 46px; }
/* пауза / играть — залитыми символами, как в iOS */
html body #eq-host .eq-play .ic.i7 .i-o { opacity: 0; }
html body #eq-host .eq-play .ic.i7 .i-f { opacity: 1; }
@media (min-width: 900px) and (min-height: 700px) {
  html body #eq-host .eq-stage { justify-content: center; padding-top: 40px; }
  html body #eq-host .eq-bar { margin-top: 10px; }
}

/* «+ Добавить песню» в профиле — матовое стекло, как остальные кнопки-капсулы */
html body .song-add {
  background: var(--mat-fill) !important; color: var(--text) !important;
  -webkit-backdrop-filter: var(--mat-blur) !important; backdrop-filter: var(--mat-blur) !important;
  border: 0 !important; box-shadow: var(--mat-edge), var(--mat-shadow) !important;
  border-radius: 999px !important; min-height: 48px;
}

/* Телефон: матовые посты и стекло внутри ленты должны видеть обои за ней.
   clip-path у колонки (им скругляли верх и обрезали поля) отрезал всё
   стекло внутри от обоев — посты были просто прозрачными, без размытия.
   Скругление не нужно: у экрана телефона и так круглые углы. */
@media (max-width: 680px) {
  html body .feed:not(.reels-col) { clip-path: none !important; -webkit-clip-path: none !important; }
}
/* с обоями вкладка появляется без затухания прозрачности: пока колонка
   полупрозрачна, браузер тоже отрезает стекло от обоев (вспышка без размытия) */
@keyframes aguaTabInSolid { from { transform: translate3d(0, 10px, 0); } to { transform: none; } }
:root:is([data-skin="custom"], [data-skin="space"], [data-skin="murmansk"]) body .feed.enter-tab { animation-name: aguaTabInSolid !important; }
:root:is([data-skin="custom"], [data-skin="space"], [data-skin="murmansk"]) body .feed.enter-push { animation-name: aguaPushInSolid !important; }
:root:is([data-skin="custom"], [data-skin="space"], [data-skin="murmansk"]) body .feed.enter-pop { animation-name: aguaPopInSolid !important; }
@keyframes aguaPushInSolid { from { transform: translate3d(34px, 0, 0); } to { transform: none; } }
@keyframes aguaPopInSolid { from { transform: translate3d(-26px, 0, 0); } to { transform: none; } }

/* перемотка-спектр: холст ровно по размеру полосы (без этого его ширина
   считалась от самой себя и росла каждый кадр) */
html body #eq-host .eq-track { height: 38px !important; background: transparent !important; border-radius: 0; }
html body #eq-host .eq-track:active { height: 38px !important; }
html body #eq-host #eq-wave { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
html body #eq-host .eq-track .fill { display: none; }
/* живой фон: три пятна цветов обложки медленно переливаются (только transform) */
html body #eq-host .eq-mesh { position: absolute; inset: 0; z-index: 1; will-change: transform; }
html body #eq-host .eq-mesh i {
  position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  filter: blur(64px); opacity: .75; will-change: transform;
}
html body #eq-host .eq-mesh i:nth-child(1) { left: -10%; top: -6%; background: var(--eq-m1, #3a3f8f); animation: eqBlobA 18s ease-in-out infinite alternate; }
html body #eq-host .eq-mesh i:nth-child(2) { right: -14%; top: 22%; background: var(--eq-m2, #1f7a5a); animation: eqBlobB 22s ease-in-out infinite alternate; }
html body #eq-host .eq-mesh i:nth-child(3) { left: 8%; bottom: -16%; background: var(--eq-m3, #7a2f6a); animation: eqBlobC 26s ease-in-out infinite alternate; }
@keyframes eqBlobA { to { transform: translate3d(18%, 14%, 0) scale(1.15); } }
@keyframes eqBlobB { to { transform: translate3d(-22%, 10%, 0) scale(.9); } }
@keyframes eqBlobC { to { transform: translate3d(16%, -18%, 0) scale(1.1); } }
html body #eq-host .eq-art-bg::before { opacity: .45; z-index: 0; }
html body #eq-host .eq-art-bg::after { z-index: 2; }
@media (prefers-reduced-motion: reduce) { html body #eq-host .eq-mesh i { animation: none; } }

/* Комментарии под постом — одной карточкой, как пост: в обычной теме плотная
   поверхность, с обоями — матовое стекло (раньше они висели прямо на обоях) */
html body #comment-list:has(.comment) {
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: inset 0 0 0 .5px var(--hairline);
  padding: 2px 16px; margin-top: 4px;
}
html body #comment-list:has(.comment) > .comment:first-child { border-top: 0; }
:root:is([data-skin="custom"], [data-skin="space"], [data-skin="murmansk"]) body #comment-list:has(.comment) {
  background: color-mix(in srgb, var(--card-solid, var(--card)) 58%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .14), inset 0 0 0 .5px rgba(255, 255, 255, .07);
}
:root[data-theme="light"]:is([data-skin="custom"], [data-skin="space"], [data-skin="murmansk"]) body #comment-list:has(.comment) {
  background: color-mix(in srgb, var(--card-solid, var(--card)) 70%, transparent);
  box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .9), inset 0 0 0 .5px rgba(0, 0, 0, .05);
}

/* «Плёнка» (просмотр видео): никаких обоев — ни анимированных, ни статичных,
   ни видео; фон и всё под плашкой меню — просто чёрные */
html.video-mode #skin-bg { visibility: hidden !important; }
html.video-mode #skin-bg::before, html.video-mode #skin-bg::after { animation-play-state: paused !important; }
html.video-mode, html.video-mode body, html.video-mode body .feed { background: #000 !important; }

/* ---------- Ввод комментария: одна строка как в чате ----------
   GIF слева от поля, круглый самолётик «Отправить» справа */
html body .comment-box .cm-field { display: flex; align-items: flex-end; gap: 6px; }
html body .comment-box .cm-field > :is(textarea, .emoji-edit) {
  flex: 1; min-width: 0; width: auto !important; min-height: 40px !important; max-height: 140px; overflow-y: auto;
  padding: 9px 14px !important; line-height: 22px; border-radius: 20px !important; font-size: max(16px, 1rem);
}
html body .comment-box .cm-field > .icon-btn { flex: none; width: 40px; height: 40px; display: grid !important; place-items: center !important; padding: 0 !important; border-radius: 50% !important; }
html body .comment-box .cm-send { background: var(--accent) !important; color: var(--accent-ink) !important; }
html body .comment-box .cm-send .ic { margin: 0 !important; transform: translate(-.5px, .5px); }
html body .comment-box .cm-send:disabled { opacity: .45; }
html body .comment-box .cm-gif-preview { margin: 0 0 8px; }
html body .comment-dock .comment-box { align-items: flex-end; }
/* текст песни — на всю обложку, матовое стекло поверх неё, строки слева как в Apple Music */
html body #eq-host .eq-lyrics {
  width: 100%; border-radius: 14px; background: rgba(12, 12, 14, .58);
  -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4);
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .7), 0 0 0 .5px rgba(255, 255, 255, .12);
}
html body #eq-host .eq-lyrics-scroll { text-align: left; padding: 0 8%; }
html body #eq-host .eq-ln { transform-origin: left center; font-size: clamp(17px, 4.6vw, 24px); margin: 5% 0; }
html body #eq-host .eq-ln.cur { font-size: clamp(20px, 5.4vw, 28px); }
html body #eq-host .eq-lyrics.empty-mode .eq-lyr-empty { text-align: center; }