/* 💬 Раздел «Сообщения» — ОДИН вид на оба фронта.
   🔴 Панель рисует общий код `VD.msgsInto` (assets/vd-core.js), и живёт она в двух местах:
   листом в оболочке приложения и страницей `/messages` на сервере. Стили поэтому лежат ОТДЕЛЬНЫМ
   файлом: у оболочки свой `vd-app.css`, у серверных страниц — питоновские строки бандла, и
   раздел, описанный в одном из них, на второй поверхности приехал бы голым. Тем же приёмом
   сделаны «Уведомления» (`vd-alerts.css`) и метка «вы записаны» (`vd-mytours.css`).
   🔴 Своё пространство имён `vdm-*`: панель не вправе зависеть от классов хозяина (`.favitem`
   есть в оболочке и нет на серверной странице). Цвета — через токены темы, они есть у обоих. */

.vdm{text-align:left}
.vdm-row{display:flex; align-items:center; gap:11px; padding:9px 10px; border:1px solid var(--line, #e3e9e6);
  border-radius:12px; background:var(--card, #fff); margin-bottom:8px; cursor:pointer;
  color:var(--ink, #13211d); text-align:left; width:100%; font:inherit}
.vdm-row:hover{border-color:var(--brand-2, #0b8f6a)}
.vdm-row.vdm-ask{cursor:default; flex-wrap:wrap}
.vdm-who{font-weight:700; font-size:14.5px; flex:1; min-width:0}
.vdm-who small{display:block; font-weight:600; font-size:12px; color:var(--muted, #5c6b64);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vdm-when{flex:0 0 auto; font-size:11px; color:var(--muted, #5c6b64); white-space:nowrap}
.vdm-badge{flex:0 0 auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:#f5a524; color:#13211d; font-size:11px; font-weight:900; line-height:18px; text-align:center}
.vdm-none{text-align:center; color:var(--muted, #5c6b64); padding:18px 8px; font-size:13.5px; line-height:1.5}

.vdm-body{max-height:46vh; overflow-y:auto; padding:4px 0; margin-bottom:8px}
.vdm-line{display:flex; margin:4px 0}
/* 🔴 Пузырь — колонка: текст, под ним час. Час стоит СВОЕЙ строкой, а не хвостом текста,
   иначе длинное слово переносит время на пустую строку и ломает пузырь. */
/* 🔴 Чужой пузырь ОБЯЗАН быть виден на белой странице: `--bg` (#f4f7f6) почти не отличается
   от неё, и реплика собеседника читалась как текст без пузыря вовсе (снимок прода 13.09.2026).
   Своя рамка — дешевле, чем подбирать оттенок под каждую тему. */
.vdm-line > span{display:flex; flex-direction:column; max-width:82%; padding:8px 12px;
  border-radius:14px; font-size:14px; background:var(--bg, #eef2f0); color:var(--ink, #13211d);
  border:1px solid var(--line, #e3e9e6); overflow-wrap:anywhere}
.vdm-txt{white-space:pre-wrap}
.vdm-meta{display:flex; align-items:baseline; gap:6px; align-self:flex-end; margin-top:2px}
.vdm-at{font-size:10.5px; opacity:.6; line-height:1}
.vdm-ed{font-size:10.5px; opacity:.6; line-height:1; font-style:italic}
/* удалённая реплика: пустая коробка с пояснением, а не исчезнувшая строка */
.vdm-line.gone > span{opacity:.6; font-style:italic}
.vdm-line.gone.mine > span{background:var(--bg, #f4f7f6); color:var(--muted, #5c6b64)}
/* правка и удаление своей реплики — мелкими подписями в строке со временем, внутри пузыря */
.vdm-mini{cursor:pointer; border:0; background:transparent; color:inherit; font:inherit;
  font-size:10.5px; font-weight:700; line-height:1; padding:0; opacity:.75;
  text-decoration:underline; text-underline-offset:2px}
.vdm-mini:hover{opacity:1}
/* 🔴 У СВОЕГО пузыря фон брендовый, поэтому красный «удалить» на нём нечитаем — там обе
   подписи белые, а отличает их насыщенность. У чужого пузыря красный работает как обычно. */
.vdm-mini.warn{color:#b3324a}
.vdm-line.mine .vdm-mini{color:#fff}
.vdm-line.mine .vdm-mini.warn{opacity:.9}
.vdm-typing{margin-left:8px; font-size:12px; font-weight:600; color:var(--muted, #5c6b64); font-style:italic}
.vdm-line.mine{justify-content:flex-end}
.vdm-line.mine > span{background:var(--brand, #0b8f6a); color:#fff; border-color:transparent}
.vdm-line.mine .vdm-at{opacity:.8}
/* полоса с датой между днями переписки */
.vdm-day{text-align:center; font-size:11px; font-weight:700; color:var(--muted, #5c6b64);
  margin:10px 0 6px; text-transform:uppercase; letter-spacing:.03em}
/* 📷 Снимок в пузыре. 🔴 Потолок высоты — в долях ЭКРАНА, а не в пикселях: на телефоне
   260px это треть ленты, и одна фотография выдавливала подпись с часом за нижний край.
   Ширину не растягиваем — узкий кадр остаётся узким (`width:auto`). */
.vdm-shot{display:block; max-width:100%; width:auto; max-height:min(220px, 26vh);
  border-radius:10px; cursor:zoom-in; object-fit:contain}
.vdm-txt + .vdm-shot, .vdm-shot + .vdm-txt{margin-top:6px}
/* 🔎 строка поиска над списком разговоров */
.vdm-find{display:flex; margin-bottom:10px}
.vdm-find input{flex:1; min-width:0; padding:9px 12px; border-radius:12px;
  border:1px solid var(--line, #e3e9e6); background:var(--card, #fff); color:var(--ink, #13211d);
  font:inherit; font-size:14px}
/* 💬 СТРОКА ВВОДА — ОДНА КАПСУЛА.
   🔴 До 13.09.2026 камера и отправка стояли СНАРУЖИ поля, каждая со своей рамкой, а поле
   растягивалось между ними: три оторванные друг от друга коробки вместо строки ввода
   («че за пиздец с кнопками», снимок прода). Рамка теперь одна — на `.vdm-field`, — а значки
   лежат внутри неё и не имеют своей. */
.vdm-form{display:flex}
.vdm-field{flex:1; min-width:0; display:flex; align-items:flex-end; gap:4px; padding:4px;
  border:1px solid var(--line, #e3e9e6); border-radius:22px; background:var(--card, #fff)}
.vdm-field:focus-within{border-color:var(--brand-2, #0b8f6a)}
.vdm-field textarea{flex:1; min-width:0; padding:9px 6px; border:0; background:transparent;
  color:var(--ink, #13211d); font:inherit; font-size:15px; resize:none; max-height:120px;
  line-height:1.35; outline:none}
.vdm-clip{flex:0 0 auto; width:36px; height:36px; border-radius:50%; cursor:pointer; border:0;
  background:transparent; font-size:17px; display:flex; align-items:center; justify-content:center;
  color:var(--muted, #5c6b64)}
.vdm-clip:hover{background:var(--bg, #eef2f0)}
.vdm-clip:disabled{opacity:.5; cursor:default}
.vdm-send{flex:0 0 auto; width:36px; height:36px; padding:0; border:none; border-radius:50%;
  background:var(--brand, #0b8f6a); color:#fff; cursor:pointer; display:flex; align-items:center;
  justify-content:center}
/* 🔴 В режиме правки кнопка несёт подпись «сохранить», и ей нужна ширина. Отличает её КЛАСС,
   а не `:empty`: у обычной кнопки внутри лежит svg, то есть пустой она не бывает никогда. */
.vdm-send.wide{width:auto; padding:0 14px; border-radius:18px; font:inherit;
  font-size:13px; font-weight:700}
/* 🔴 Подпись внутри строки ввода («отмена» при правке) — своя кнопка, а не круглый `.vdm-ico`:
   у того фиксированные 34px под значок, и слово вылезало ПОВЕРХ «сохранить» (снимок прода). */
.vdm-textbtn{flex:0 0 auto; height:36px; padding:0 10px; border:0; border-radius:18px;
  background:transparent; color:var(--muted, #5c6b64); font:inherit; font-size:13px;
  font-weight:700; white-space:nowrap; cursor:pointer}
.vdm-textbtn:hover{background:var(--bg, #eef2f0); color:var(--ink, #13211d)}
.vdm-act{cursor:pointer; padding:8px 13px; border-radius:999px; border:1px solid var(--line, #e3e9e6);
  background:transparent; color:var(--muted, #5c6b64); font:inherit; font-size:12.5px; font-weight:700}
.vdm-act.warn{color:#b3324a; border-color:#f0bdc8}
/* 🔴 Заголовок разговора — имя собеседника: на странице у панели своего заголовка нет, а
   человек должен видеть, КОМУ он сейчас пишет. Здесь же вся навигация разговора: «назад»
   слева, «⋯» справа. Опасные действия НЕ стоят рядом с отправкой — это разные по цене вещи. */
.vdm-head{display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px;
  margin:2px 0 10px; color:var(--ink, #13211d)}
.vdm-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vdm-ico{flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:transparent; color:var(--muted, #5c6b64); font-size:17px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1}
.vdm-ico:hover{background:var(--bg, #eef2f0); color:var(--ink, #13211d)}
.vdm-more{position:relative; flex:0 0 auto; display:flex}
/* 🔴 Меню поверх ленты, а не в потоке: иначе его появление сдвигало бы переписку вниз */
.vdm-menu{position:absolute; top:38px; right:0; z-index:5; min-width:170px; padding:5px;
  border:1px solid var(--line, #e3e9e6); border-radius:12px; background:var(--card, #fff);
  box-shadow:0 10px 26px rgba(0,0,0,.16); display:flex; flex-direction:column; gap:2px}
.vdm-mitem{cursor:pointer; border:0; background:transparent; text-align:left; padding:9px 11px;
  border-radius:8px; font:inherit; font-size:13.5px; font-weight:700; color:var(--ink, #13211d)}
.vdm-mitem:hover{background:var(--bg, #eef2f0)}
.vdm-mitem.warn{color:#b3324a}
/* 🚫 Заблокированные — ОДНА строка в списке (значок + счётчик) и отдельный экран за ней.
   🔴 Развёрнутый список здесь занимал бы место разговоров, ради которых раздел открыт:
   у кого полсотни блокировок, тот видел бы полэкрана не того (разбор владельца 13.09.2026). */
.vdm-blocks{border-style:dashed; color:var(--muted, #5c6b64)}
.vdm-blocks .vdm-badge{background:var(--line, #e3e9e6); color:var(--muted, #5c6b64)}
.vdm-brow{display:flex; align-items:center; gap:10px; padding:8px 2px;
  border-bottom:1px solid var(--line, #e3e9e6)}
.vdm-brow:last-child{border-bottom:0}
/* «показать ещё» — последней строкой внутри прокрутки списка, во всю его ширину */
.vdm-more-rows{display:block; width:100%; margin:8px 0 2px}

html[data-theme=dark] .vdm-row{background:#17211d; border-color:#27332e; color:#e7efea}
html[data-theme=dark] .vdm-line > span{background:#1f2a25; color:#e7efea}
html[data-theme=dark] .vdm-field{background:#17211d; border-color:#27332e}
html[data-theme=dark] .vdm-field textarea{color:#e7efea}
html[data-theme=dark] .vdm-find input{background:#17211d; border-color:#27332e; color:#e7efea}
html[data-theme=dark] .vdm-clip:hover,
html[data-theme=dark] .vdm-ico:hover,
html[data-theme=dark] .vdm-textbtn:hover,
html[data-theme=dark] .vdm-mitem:hover{background:#1f2a25; color:#e7efea}
html[data-theme=dark] .vdm-menu{background:#17211d; border-color:#27332e}
html[data-theme=dark] .vdm-mitem{color:#e7efea}
html[data-theme=dark] .vdm-mitem.warn{color:#ff8ba3}
html[data-theme=dark] .vdm-brow{border-color:#27332e}
html[data-theme=dark] .vdm-blocks .vdm-badge{background:#27332e; color:#b8c6bf}
html[data-theme=dark] .vdm-head{color:#e7efea}