/* 💬 Раздел «Сообщения» — ОДИН вид на оба фронта.
   🔴 Панель рисует общий код `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);
  border-radius:12px; background:var(--card); margin-bottom:8px; cursor:pointer;
  color:var(--ink); text-align:left; width:100%; font:inherit}
.vdm-row:hover{border-color:var(--brand-2)}
.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);
  overflow:hidden; text-overflow:ellipsis; 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); 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}
.vdm-line span{max-width:82%; padding:8px 12px; border-radius:14px; font-size:14px;
  background:var(--bg); color:var(--ink); overflow-wrap:anywhere}
.vdm-line.mine{justify-content:flex-end}
.vdm-line.mine span{background:var(--brand); color:#fff}
.vdm-form{display:flex; gap:8px}
.vdm-form input{flex:1; min-width:0; padding:11px 13px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font:inherit; font-size:15px}
.vdm-send{flex:0 0 auto; padding:0 14px; border:none; border-radius:12px; background:var(--brand);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center}
.vdm-acts{display:flex; gap:8px; margin-top:10px; justify-content:center; flex-wrap:wrap}
.vdm-act{cursor:pointer; padding:8px 13px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--muted); 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)}

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-form input{background:#17211d; border-color:#27332e; color:#e7efea}
html[data-theme=dark] .vdm-head{color:#e7efea}