/* Вид рабочей панели владельца — согласованный макет VILK от 04.11.2026 (классы vx-*).
 *
 * Отдельным файлом, а не в <style>: так CSP панели обходится без 'unsafe-inline' для стилей
 * (style-src 'self'), и на страницах нет ни одного атрибута style. Скриптов нет вовсе.
 *
 * Шрифт Inter — SIL Open Font License 1.1 (src/panel/shrifty/Inter-OFL.txt), отдаётся самой панелью.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/shrifty/inter-cyrillic.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/shrifty/inter-latin.woff2) format('woff2-variations');
  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;
}

:root {
  --vx-bg: #131517; --vx-side: #171a1d; --vx-panel: #1b1e21; --vx-raised: #25292d; --vx-line: #33383d;
  --vx-text: #f0f0ed; --vx-muted: #b2b8bb; --vx-faint: #959da3; --vx-gold: #e5c793; --vx-gold-ink: #211d16;
  --vx-green: #91d5b0; --vx-red: #f0a4a4; --vx-blue: #a8c5ef; --vx-warn: #e9cb91;
  color-scheme: dark;
}
/* Светлой темы нет нарочно: согласован один вид — тёмный из макета 04.11. Светлую палитру пришлось бы
   придумать самому, и владелец увидел бы на своём ноутбуке не то, что утвердил. */

* { box-sizing: border-box }
body { margin: 0; padding: 16px; background: var(--vx-bg); color: var(--vx-text); font: 13px/1.5 Inter, Arial, sans-serif }
svg.lucide { vertical-align: middle; flex-shrink: 0 }
.vx-root { max-width: 1700px; margin-inline: auto; background: var(--vx-bg); border: 1px solid var(--vx-line); border-radius: 16px; overflow: clip; isolation: isolate }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
button, a, input { outline-offset: 4px }
:focus-visible { outline: 2px solid var(--vx-gold) }
::selection { background: var(--vx-gold); color: var(--vx-gold-ink) }
input { caret-color: var(--vx-gold) }
h1, h2, h3, p { margin: 0 }
h1 { font-size: 26px; line-height: 1.25; letter-spacing: -.025em; font-weight: 600 }
h2 { font-size: 16px; line-height: 1.4; letter-spacing: -.015em; font-weight: 550 }
h3 { font-size: 14px; font-weight: 550 }
a { color: inherit; text-decoration: none }
.vx-muted { color: var(--vx-muted) }
.vx-faint { color: var(--vx-faint) }
.vx-num { font-variant-numeric: tabular-nums; letter-spacing: -.015em }

/* Шапка */
.vx-top { min-height: 68px; display: flex; align-items: center; gap: 20px; padding: 14px 24px; border-bottom: 1px solid var(--vx-line); background: var(--vx-side) }
.vx-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 170px }
.vx-wordmark { font-size: 25px; font-weight: 650; letter-spacing: -.035em }
.vx-brand-divider { width: 1px; height: 22px; background: var(--vx-line) }
.vx-brand-label { font-size: 11px; line-height: 1.35; color: var(--vx-muted) }
.vx-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 80px; max-width: 390px; color: var(--vx-muted) }
.vx-search input { min-width: 0; width: 100%; border: 0; background: transparent; padding: 5px 0; outline-offset: 3px }
input::placeholder { color: var(--vx-faint); opacity: 1 }
.vx-top-end { margin-left: auto; display: flex; gap: 14px; align-items: center }
.vx-avatar { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--vx-raised); border-radius: 9px; color: var(--vx-muted); font-weight: 550 }

/* Меню слева. Без скриптов: на телефоне его открывает спрятанный флажок, а не кнопка с обработчиком. */
.vx-menu-vkl { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0 }
.vx-main-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr) }
.vx-sidebar { background: var(--vx-side); padding: 22px 12px; display: flex; flex-direction: column; gap: 24px; border-right: 1px solid var(--vx-line) }
.vx-nav { display: grid; gap: 4px }
.vx-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; width: 100%; border-radius: 8px; color: var(--vx-muted); text-align: left }
.vx-nav a:hover { background: var(--vx-raised); color: var(--vx-text) }
.vx-nav a[aria-current="page"] { color: var(--vx-gold); background: color-mix(in srgb, var(--vx-gold) 10%, transparent) }
.vx-side-footer { margin-top: auto; padding: 10px 12px 4px; color: var(--vx-faint); font-size: 11px }
.vx-side-footer a { color: var(--vx-muted); padding: 7px 0; display: flex; align-items: center; gap: 8px }
.vx-content { min-width: 0; padding: 26px 26px 30px; min-height: 830px }

/* Заголовок страницы и действия */
.vx-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px }
.vx-page-head p { color: var(--vx-muted); margin-top: 6px; max-width: 65ch }
.vx-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.vx-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 35px; padding: 7px 11px; border: 1px solid var(--vx-line); border-radius: 7px; background: transparent; color: var(--vx-text); white-space: nowrap; line-height: 1.3 }
.vx-button:hover { background: var(--vx-raised) }
.vx-button-quiet { border-color: transparent; color: var(--vx-muted) }
.vx-button-quiet:hover { color: var(--vx-text) }
.vx-button-primary { background: var(--vx-gold); color: var(--vx-gold-ink); border-color: transparent; font-weight: 550 }
.vx-icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 6px; border: 0; background: transparent; border-radius: 6px; color: var(--vx-muted) }
.vx-icon-button:hover { background: var(--vx-raised); color: var(--vx-text) }
.vx-mobile-menu { display: none }
.vx-field { width: 100%; min-height: 37px; border: 1px solid var(--vx-line); border-radius: 7px; background: var(--vx-bg); padding: 8px 10px; color: var(--vx-text) }
.vx-bottom-note { display: flex; align-items: center; gap: 7px; color: var(--vx-muted); font-size: 11px }

/* Период — ссылками, не выпадающим списком: на странице нет скриптов, а ссылка работает всегда. */
.vx-period { display: flex; align-items: center; gap: 3px }
.vx-period a { padding: 7px 10px; border-radius: 6px; color: var(--vx-muted); font-size: 12px; white-space: nowrap }
.vx-period a[aria-current="page"] { background: var(--vx-raised); color: var(--vx-text) }
.vx-period a:hover { color: var(--vx-text) }

/* Показатели */
.vx-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; border-top: 1px solid var(--vx-line); border-bottom: 1px solid var(--vx-line) }
.vx-metric { padding: 17px 16px; text-align: left; border-right: 1px solid var(--vx-line); min-width: 0; display: block }
.vx-metric:first-child { padding-left: 0 }
.vx-metric:last-child { border-right: 0; padding-right: 0 }
a.vx-metric:hover .vx-metric-value { color: var(--vx-gold) }
.vx-metric-label { color: var(--vx-muted); display: flex; align-items: center; gap: 5px; font-size: 12px }
.vx-metric-value { display: block; font-size: 27px; line-height: 1.35; font-weight: 550; letter-spacing: -.035em; margin: 5px 0 }
.vx-metric-foot { font-size: 11px; color: var(--vx-muted); display: block }

/* Полотна */
.vx-overview-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px }
.vx-panel { min-width: 0; background: var(--vx-panel); border-radius: 12px; padding: 18px }
.vx-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 17px }
.vx-panel-sub { font-size: 11px; color: var(--vx-muted); margin-top: 3px }
.vx-panel-note { font-size: 11px; color: var(--vx-muted); margin-top: 16px; max-width: 70ch }
.vx-text-action { color: var(--vx-muted); padding: 3px 0; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; text-align: left }
.vx-text-action:hover { color: var(--vx-gold) }
.vx-section { margin-top: 24px }
.vx-inline-note { padding: 12px 14px; background: var(--vx-panel); border-radius: 8px; display: flex; gap: 10px; align-items: flex-start; color: var(--vx-muted); font-size: 12px; margin-bottom: 18px }
.vx-inline-note strong { color: var(--vx-text); font-weight: 500 }
.vx-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 5px; padding: 3px 6px; font-size: 11px; line-height: 1.4; font-weight: 450; color: var(--vx-muted); background: var(--vx-raised); white-space: nowrap }
.vx-badge[data-tone="warn"] { color: var(--vx-warn); background: color-mix(in srgb, var(--vx-warn) 11%, transparent) }
.vx-badge[data-tone="good"] { color: var(--vx-green); background: color-mix(in srgb, var(--vx-green) 10%, transparent) }
.vx-badge[data-tone="bad"] { color: var(--vx-red); background: color-mix(in srgb, var(--vx-red) 10%, transparent) }
.vx-badge[data-tone="info"] { color: var(--vx-blue); background: color-mix(in srgb, var(--vx-blue) 10%, transparent) }

/* Столбики посещений */
.vx-chart { width: 100%; height: auto; display: block }
.vx-chart text { font-family: Inter, Arial, sans-serif; font-size: 11px; fill: var(--vx-muted) }
.vx-chart .vx-gridline { stroke: var(--vx-line); stroke-width: 1 }
.vx-chart .vx-bar { fill: color-mix(in srgb, var(--vx-gold) 62%, var(--vx-panel)) }
.vx-chart .vx-bar-segodnya { fill: var(--vx-gold) }
.vx-chart .vx-bar-podpis { fill: var(--vx-text) }

/* Что требует внимания */
.vx-attention-row { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 10px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--vx-line) }
.vx-attention-row:first-of-type { padding-top: 0 }
.vx-attention-row:last-child { border: 0; padding-bottom: 0 }
.vx-attention-icon { color: var(--vx-warn); padding-top: 2px }
.vx-attention-text { font-size: 12px }
.vx-attention-text strong { display: block; font-weight: 500; margin-bottom: 2px }
.vx-attention-text span { color: var(--vx-muted); font-size: 11px }

/* Воронка */
.vx-funnel { display: grid; gap: 12px }
.vx-funnel-step { display: grid; grid-template-columns: minmax(100px, 1fr) 1.1fr 44px; gap: 12px; align-items: center; font-size: 12px }
.vx-track { height: 6px; background: var(--vx-raised); border-radius: 2px; overflow: hidden }
.vx-fill { height: 100%; background: var(--vx-gold); opacity: .8; border-radius: 2px; display: block }
/* Доля шага воронки — классом, а не атрибутом style: CSP панели не разрешает стили в разметке. */
.vx-fill.vx-dolya-0 { width: 0% }
.vx-fill.vx-dolya-5 { width: 5% }
.vx-fill.vx-dolya-10 { width: 10% }
.vx-fill.vx-dolya-15 { width: 15% }
.vx-fill.vx-dolya-20 { width: 20% }
.vx-fill.vx-dolya-25 { width: 25% }
.vx-fill.vx-dolya-30 { width: 30% }
.vx-fill.vx-dolya-35 { width: 35% }
.vx-fill.vx-dolya-40 { width: 40% }
.vx-fill.vx-dolya-45 { width: 45% }
.vx-fill.vx-dolya-50 { width: 50% }
.vx-fill.vx-dolya-55 { width: 55% }
.vx-fill.vx-dolya-60 { width: 60% }
.vx-fill.vx-dolya-65 { width: 65% }
.vx-fill.vx-dolya-70 { width: 70% }
.vx-fill.vx-dolya-75 { width: 75% }
.vx-fill.vx-dolya-80 { width: 80% }
.vx-fill.vx-dolya-85 { width: 85% }
.vx-fill.vx-dolya-90 { width: 90% }
.vx-fill.vx-dolya-95 { width: 95% }
.vx-fill.vx-dolya-100 { width: 100% }

/* Таблицы */
.vx-table-wrap { overflow: auto; scrollbar-color: var(--vx-line) var(--vx-bg) }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px }
th { color: var(--vx-muted); font-size: 11px; font-weight: 450; white-space: nowrap; border-bottom: 1px solid var(--vx-line); padding: 10px 9px }
td { border-bottom: 1px solid var(--vx-line); padding: 13px 9px; vertical-align: middle }
th:first-child, td:first-child { padding-left: 0 }
th:last-child, td:last-child { padding-right: 0 }
tbody tr:last-child td { border-bottom: 0 }
.vx-table-note { margin: 0 0 12px; font-size: 11px; color: var(--vx-faint) }
.vx-cell-sub { display: block; font-size: 11px; color: var(--vx-muted); margin-top: 3px; font-weight: 400 }
.vx-cell-end { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.vx-toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap }
.vx-toolbar-niz { margin: 18px 0 0 }
.vx-tabs { display: flex; gap: 3px; flex-wrap: wrap }
.vx-tab { padding: 7px 10px; color: var(--vx-muted); border-radius: 6px; font-size: 12px }
.vx-tab[aria-current="page"] { background: var(--vx-raised); color: var(--vx-text) }
/* Вкладка-кнопка (режим ответа в поддержке) без своего фона браузера: иначе неактивная — светлая плашка с бледным текстом. */
button.vx-tab { background: transparent; border: 0 }
.vx-poisk { display: block; max-width: 420px; margin-bottom: 18px }
.vx-poisk .vx-cell-sub { margin-bottom: 6px }
.vx-poisk-stroka { display: flex; gap: 8px; align-items: center }

/* Списки карточками (предварительные записи) */
.vx-spisok { display: grid; gap: 8px }
.vx-spisok > div { background: var(--vx-panel); border-radius: 10px; padding: 12px 14px; font-size: 12px }
.vx-spisok a { color: var(--vx-gold) }

/* Определения, затраты, правила */
.vx-definition { display: grid; grid-template-columns: 1fr auto; gap: 12px 15px; font-size: 12px }
.vx-definition dt { color: var(--vx-muted) }
.vx-definition dd { margin: 0; text-align: right; overflow-wrap: anywhere }
.vx-cost-lines { display: grid; gap: 13px }
.vx-cost-line { display: flex; justify-content: space-between; gap: 15px; font-size: 12px }
.vx-cost-total { border-top: 1px solid var(--vx-line); padding-top: 13px; font-weight: 500 }
.vx-rule { padding: 12px 0; border-bottom: 1px solid var(--vx-line) }
.vx-rule:last-child { border: 0 }
.vx-rule strong { display: block; font-size: 12px; font-weight: 500 }
.vx-rule p { color: var(--vx-muted); font-size: 11px; margin-top: 5px }
.vx-prose p { font-size: 12px; color: var(--vx-muted); margin: 9px 0 16px; max-width: 80ch }
.vx-prose h3 { margin-top: 13px }
.vx-empty { padding: 34px 22px; text-align: center; max-width: 620px; margin: auto }
.vx-empty p { color: var(--vx-muted); margin: 8px 0 17px }

/* Вход: карточка по центру, без рамки панели — у входа нет меню, и рамка высотой 830 пикселей торчала
   пустой. Одна колонка: поля и кнопки одной ширины, подпись над полем (test/panel-vhod-vid.mjs). */
.vx-root-vhod { border: 0; max-width: none; background: transparent }
.vx-root-vhod .vx-content { min-height: 0; padding: 0 }
.vx-vhod { max-width: 380px; margin: 12vh auto 24px; padding: 28px 24px; border: 1px solid var(--vx-line); border-radius: 14px; background: var(--vx-panel) }
.vx-vhod-golova { display: grid; justify-items: center; gap: 10px; color: var(--vx-muted) }
.vx-vhod-golova h1 { color: var(--vx-text); font-size: 22px; text-align: center }
.vx-vhod p { color: var(--vx-muted); margin: 10px 0 20px; text-align: center }
.vx-vhod form { display: grid; gap: 10px }
.vx-vhod form + form { margin-top: 10px }
.vx-vhod hr { border: 0; border-top: 1px solid var(--vx-line); margin: 22px 0 }
.vx-vhod label { color: var(--vx-muted); font-size: 12px }
.vx-vhod .vx-field { font-size: 16px; min-height: 42px }
.vx-vhod .vx-button { width: 100%; min-height: 42px }
.vx-vhod .vx-kod { font-size: 22px; letter-spacing: 4px; text-align: center }
.vx-oshibka { color: var(--vx-red) }

@media (min-width: 1250px) {
  .vx-main-grid { grid-template-columns: 210px minmax(0, 1fr) }
  .vx-content { padding: 30px 34px }
  .vx-overview-grid { grid-template-columns: 1.5fr 1fr }
}
@media (max-width: 900px) {
  .vx-main-grid { grid-template-columns: 164px minmax(0, 1fr) }
  .vx-brand { flex-basis: 144px }
  .vx-top { padding: 13px 18px; gap: 14px }
  .vx-brand-label, .vx-brand-divider { display: none }
  .vx-content { padding: 23px 20px }
  .vx-nav a { padding: 10px 8px; gap: 8px; font-size: 12px }
  .vx-overview-grid { grid-template-columns: 1fr }
  .vx-metrics { grid-template-columns: repeat(2, 1fr) }
  .vx-metric:nth-child(2) { border-right: 0 }
  .vx-metric:nth-child(3) { padding-left: 0; border-top: 1px solid var(--vx-line) }
  .vx-metric:nth-child(4) { padding-left: 16px; border-top: 1px solid var(--vx-line) }
}
@media (max-width: 650px) {
  body { padding: 8px }
  /* График — картинка с фиксированным полем 630 единиц: на телефоне она сжимается почти вдвое, и
     подписи 11 единиц превращались в нечитаемые 6 пикселей. Увеличиваем в единицах картинки. */
  .vx-chart text { font-size: 19px }
  .vx-root { border-radius: 10px }
  .vx-top { gap: 10px; padding: 12px 14px; flex-wrap: wrap }
  .vx-brand { flex: 1 }
  .vx-wordmark { font-size: 24px }
  .vx-top-end { gap: 9px }
  .vx-search { order: 4; flex-basis: 100%; max-width: none; background: var(--vx-bg); border-radius: 6px; padding: 5px 9px }
  .vx-top .vx-avatar { display: none }
  .vx-mobile-menu { display: inline-flex }
  .vx-main-grid { display: block }
  .vx-sidebar { display: none; border: 0; border-bottom: 1px solid var(--vx-line); padding: 10px }
  .vx-menu-vkl:checked ~ .vx-main-grid .vx-sidebar { display: flex }
  .vx-nav { grid-template-columns: 1fr 1fr }
  .vx-side-footer { display: none }
  .vx-content { padding: 22px 16px; min-height: 700px }
  h1 { font-size: 24px }
  .vx-page-head { flex-wrap: wrap; gap: 14px; margin-bottom: 20px }
  .vx-page-head > .vx-actions { width: 100% }
  .vx-metric-value { font-size: 25px }
  .vx-panel { padding: 16px }
  .vx-table-wrap table:not(.vx-table-chisla) { min-width: 570px }
  .vx-table-chisla :is(th, td):not(:first-child) { padding-left: 5px }
  .vx-table-chisla :is(th, td):not(:last-child) { padding-right: 5px }
  .vx-button { min-height: 40px }
  .vx-field, .vx-search input { font-size: 16px }
}
@media (pointer: coarse) {
  button { min-height: 44px }
  .vx-icon-button { min-width: 44px; min-height: 44px }
  input { min-height: 44px; font-size: 16px }
}
@media (prefers-reduced-motion: no-preference) {
  .vx-button, .vx-nav a { transition: background-color .16s ease-out, color .16s ease-out }
}

/* Клиенты (CRM): ссылка на карточку в таблице и формы без скриптов — подпись над полем, поля столбиком. */
.vx-row-link { color: var(--vx-gold) }
.vx-row-link:hover { text-decoration: underline }
.vx-forma { display: grid; gap: 10px; max-width: 520px; margin-top: 14px }
.vx-forma label { display: grid; gap: 4px; font-size: 12px; color: var(--vx-muted) }
.vx-forma textarea.vx-field { min-height: 76px; resize: vertical }

/* Рабочее место поддержки (классы vs-*, макет VILK Support). Скриптов нет: столбец сведений
   прячется шириной экрана, а на телефоне открывается отдельной страницей по ссылке «Клиент». */
.vs-queue-counts { flex-wrap: wrap; margin-bottom: 14px }
.vs-filter .vx-num { color: var(--vx-faint) }
.vs-ticket-list { display: grid }
.vs-ticket { display: grid; gap: 5px; padding: 12px 4px; border-bottom: 1px solid var(--vx-line); color: inherit }
.vs-ticket:last-child { border-bottom: 0 }
.vs-ticket:hover { background: var(--vx-raised) }
.vs-ticket-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.vs-ticket-tema { flex: 1 1 320px; min-width: 0 }
.vs-ticket-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--vx-muted); font-size: 12px }
.vs-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px }
.vs-thread-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px }
.vs-thread-title { font-size: 18px }
.vs-status-line { color: var(--vx-muted); font-size: 12px; margin-top: 4px }
.vs-conversation { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start }
.vs-messages { display: grid; gap: 10px; max-height: 60vh; overflow: auto; padding-right: 4px }
.vs-bubble { background: var(--vx-raised); border: 1px solid var(--vx-line); border-radius: 10px; padding: 9px 11px }
.vs-bubble[data-kto="operator"] { border-color: color-mix(in srgb, var(--vx-gold) 40%, var(--vx-line)) }
.vs-bubble[data-kto="zametka"] { background: color-mix(in srgb, var(--vx-warn) 8%, var(--vx-panel)) }
.vs-bubble[data-kto="sistema"] { background: transparent; color: var(--vx-muted) }
.vs-bubble p { white-space: pre-wrap; overflow-wrap: anywhere }
.vs-bubble-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 5px; color: var(--vx-faint); font-size: 11px }
.vs-message-state { color: var(--vx-faint); font-size: 11px; margin-top: 5px }
.vs-message-error { margin-bottom: 12px }
.vs-composer { display: grid; gap: 8px; margin-top: 14px; border-top: 1px solid var(--vx-line); padding-top: 12px }
.vs-composer label { font-size: 12px; color: var(--vx-muted) }
:is(.vs-composer, .vs-reshenie) textarea { width: 100%; background: var(--vx-bg); color: var(--vx-text); border: 1px solid var(--vx-line); border-radius: 8px; padding: 9px 10px; resize: vertical }
.vs-conversation ~ .vx-panel { margin-top: 16px }
.vs-reshenie { display: grid; gap: 8px; justify-items: start }
.vs-reshenie > label[for] { font-size: 12px; color: var(--vx-muted) }
.vs-composer-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--vx-muted); font-size: 12px }
.vs-composer-actions { display: flex; flex-wrap: wrap; gap: 8px }
.vs-draft-hint { color: var(--vx-faint); font-size: 11px }
.vs-thread-actions { display: grid; gap: 8px }
.vs-thread-actions form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.vs-inline { display: inline-flex; align-items: center; gap: 6px; color: var(--vx-muted); font-size: 12px }
.vs-inline select, .vs-inline input { background: var(--vx-bg); color: var(--vx-text); border: 1px solid var(--vx-line); border-radius: 7px; padding: 6px 8px }
.vs-context { display: grid; gap: 14px }
.vs-context dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 12px }
.vs-context dt { color: var(--vx-faint) }
.vs-context h3 { font-size: 12px; color: var(--vx-faint); margin-top: 12px }
.vs-people { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; font-size: 12px }
.vs-people li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.vs-people span { color: var(--vx-muted) }
.vs-history { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; font-size: 12px }
.vs-history li { display: flex; flex-wrap: wrap; gap: 8px; color: var(--vx-muted) }
.vs-scope-note { margin-top: 10px }
.vs-show-context { display: none }
@media (max-width: 1180px) {
  .vs-conversation { grid-template-columns: minmax(0, 1fr) }
  /* Столбец сведений ушёл — его открывает ссылка «Клиент» отдельной страницей. */
  .vs-context { display: none }
  .vs-show-context { display: inline-flex; align-items: center; gap: 4px }
}