/* ============================================================================
   УВЕДОМЛЕНИЯ — список писем, само сообщение, опросы, настройка вида.

   Подключается после deos.css и только уточняет то, что там уже названо.
   Своих цветов, отступов и скруглений здесь нет: всё берётся из переменных
   дизайн-кода.
   ========================================================================= */

/* ══════════════════════════════════════════════════ СПИСОК ПИСЕМ
   ПИСЬМА ЛЕЖАТ СПИСКОМ, А НЕ КАРТОЧКАМИ. Ряд карточек с рамками,
   скруглениями и тенями вместо строк — это не список: письма в нём не
   читаются столбиком, высота каждого зависит от длины заголовка, а
   прокручивается такой ряд вместе со всем экраном.

   Строка письма — обычная строка таблицы-сетки (.grid-row): столбцы
   описаны один раз и общие у шапки и строк, у списка своя прокрутка.
   Поэтому здесь описано только то, чего у строки нет по общему правилу:
   как в одну строку укладываются заголовок и начало текста.

   Раскладка одна на обе стороны: у компании — что пришло, у мастера —
   что отправлено. Это одна и та же вещь, и выглядеть она обязана
   одинаково. */
.notice-letter-main {
  display: flex; align-items: baseline; gap: var(--sp-100);
  min-width: 0; overflow: hidden;
}
/* Заголовок обрезается многоточием: письмо с длинным заголовком иначе
   растягивает строку на три ряда, и список перестаёт читаться столбиком.

   Место в ячейке достаётся сначала заголовку и лишь потом началу текста:
   пока они делили его поровну, от заголовка оставалось два слова, а от
   текста — половина первого предложения, и по строке нельзя было узнать
   ни одно, ни другое. */
.notice-letter-title {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--fw-med);
}
.notice-letter.fresh .notice-letter-title { font-weight: var(--fw-bold); }

/* Начало текста — в той же строке, что и заголовок, и тем же кеглем, что
   подпись. Второй строкой оно читается как само письмо, и открывать его
   после этого незачем. */
.notice-letter-peek {
  flex: 1 1 0; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink3);
}

/* Столбца «Дошло» в списке больше нет (решение заказчика 25.08: «дошло в
   целом можешь скрыть, сделай всю статистику внутри попросту»), и его
   правило убрано вместе с ним: мёртвое правило вида читается
   действующим и зовёт завести рядом третье. */

/* Метки в ячейке: вид, важность, кому. Стоят в ряд и не переносятся —
   перенос ломает рост строки. */
/* МЕСТО МЕТКАМ ДАЁТСЯ РАНЬШЕ ЗАГОЛОВКА (`flex: none`): метка короткая и
   постоянной ширины, а заголовок обрезается многоточием и без того. Пока
   этого не было объявлено, две метки подряд ужимались и текст ложился
   поверх них — видно на снимке экрана заказчика 25.08. */
.notice-letter-marks {
  display: inline-flex; align-items: center; gap: var(--sp-050);
  flex: none; min-width: 0;
}

/* ═══════════════════════════════════════════════ САМО СООБЩЕНИЕ
   Рисуется одним и тем же кодом у компании, в предпросмотре отправителя
   и в разделе отправленного. Поэтому и оформление у него одно.

   СВОИХ РАМОК И ОБВОДОК У САМОГО СООБЩЕНИЯ НЕТ. Оно — обычная карточка
   дизайн-кода (.card): подложка, скругление и тень описаны там один раз.
   Оформление живёт у ЧАСТЕЙ: заливка, способ, граница, цвет и начертание
   линии — те же наборы, что у блоков коммерческого предложения.

   ПОЛОСЫ АКЦЕНТА СВЕРХУ БОЛЬШЕ НЕТ ВОВСЕ. «Очень не нравится эта
   полоска акцента в сообщении. Её бы убрать полностью и сделать
   настройку фонов, обводок итд как в настройках КП». Убрана; цвет
   остался у метки вида — она и красится им. */
.notice-view {
  display: flex; flex-direction: column;
}

.notice-view-from {
  display: flex; align-items: center; gap: var(--sp-100);
  padding: var(--sp-150) var(--gap);
  border-bottom: var(--bw) solid var(--line);
  font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink3);
}
/* ЗАГОЛОВОК ПИСЬМА — ЭТО ЗАГОЛОВОК КАРТОЧКИ, И БОЛЬШЕ НИЧЕГО.
   Начертание и вес ему даёт общее правило заголовков (`h1…h4` в
   deos.css): узел собран тегом `h3`, и оба свойства приходили к нему
   оттуда. Здесь они стояли ВТОРОЙ РАЗ, теми же словами, — то есть
   правило выглядело своим, а не описывало ничего своего.

   Осталось ровно то, чем заголовок письма отличается от `h3`: кегль и
   междустрочие карточного заголовка. Вместе с наследуемым это в точности
   `.card-title` из дизайн-кода — и правильнее, чтобы имя у него было то
   же; сменить его может только разметка (`static/shell/inbox.js`), и до
   тех пор описание живёт здесь. */
.notice-view-title { font-size: var(--fs-l); line-height: var(--lh-l); }

/* МАКЕТ. Положений три, и все три — про то, как изображения стоят
   ПОПЕРЁК сообщения: прижаты влево (текст обтекает справа), вправо
   (обтекает слева) или во всю ширину по середине. Вверх-вниз части
   переставляются перетаскиванием, и вторым способом это делать не надо
   (см. core/notices.py, LAYOUTS).

   Прежние имена «сверху» и «снизу» оставлены в правилах нарочно:
   разосланные письма несут их в базе, и раскладываться они обязаны так
   же, как раскладывались, — колонкой. */
/* ЧАСТИ ИДУТ ОДНА ПОД ДРУГОЙ ВСЕГДА. Боковой колонки с обтеканием
   больше нет: «нужно было просто упирать изображение влево, вправо или
   по центру НЕ ОГИБАЯ другие объекты или текст» (заказчик 25.08). */
.notice-parts { display: flex; flex-direction: column;
                gap: var(--gap); padding: var(--gap); }

.notice-words {
  display: flex; flex-direction: column; gap: var(--sp-150);
  flex: 1 1 auto; min-width: 0;
}
/* Часть сообщения — место в потоке И СВОЁ ОФОРМЛЕНИЕ. Заливка, способ,
   граница, цвет и начертание линии — те же имена, что у блоков
   коммерческого предложения (/kit/blockstyle.js): настраивают в них одно
   и то же, и выбор обязан быть один.

   ЗНАЧЕНИЯ ЗДЕСЬ СВОИ, И ЭТО НЕ РАСХОЖДЕНИЕ. Лист печатают — заливки у
   него бумажные, светлые, одни и те же при любой теме. Сообщение живёт
   на экране и обязано жить по теме: у тёмной подложки светлая плашка
   выжигает глаз. Имя одно, значение по месту. */
/* ПАЛИТРА БЛОКА НА ЭКРАНЕ. Строение заливок и узоров — общее
   (`.wblock` в deos.css); здесь только краски, и все они идут от темы:
   письмо читают в программе, а она бывает светлой и тёмной. */
.notice-block {
  --wb-grey: var(--a-100);        --wb-grey-2: var(--a-200);
  --wb-accent: var(--acc-weak);   --wb-accent-2: var(--acc-weak-2);
  --wb-sand: var(--warn-weak);    --wb-sand-2: var(--warn-weak-2);
  --wb-sky: var(--info-weak);     --wb-sky-2: var(--info-weak-2);
  --wb-rose: var(--danger-weak);  --wb-rose-2: var(--danger-weak-2);
  --wb-lilac: #F0EAFA;            --wb-lilac-2: #E0D6F3;
  --wb-olive: #F0F3DE;            --wb-olive-2: #DFE6BF;
  --wb-own-ink: var(--ink3);      --wb-own-base: var(--card);
  /* Узоры уходят во ВТОРУЮ КРАСКУ: на экране обе видны и обе читаются. */
  --wb-pat-base: var(--block-fill);
  --wb-grad-angle: 180deg;  --wb-grad-end: var(--block-fill-2);  --wb-grad-stop: 100%;
  --wb-hatch-2: var(--block-fill-2);  --wb-hatch-step: 6px;
  --wb-dots-ink: var(--block-fill-2); --wb-dots-gap: transparent;
  --wb-dots-r: 1.5px;  --wb-dots-edge: 1.5px;  --wb-dots-size: 10px;
}
/* Сиреневый и оливковый заданы числом: готового токена такой краски в
   теме нет, а в тёмной оба должны быть тёмными, а не приглушёнными. */
:root[data-theme="dark"] .notice-block {
  --wb-lilac: #2B2440;  --wb-lilac-2: #342C4C;
  --wb-olive: #2B3018;  --wb-olive-2: #33391D;
}

.notice-block {
  display: flex; flex-direction: column; gap: var(--sp-150);
  min-width: 0;
}

/* ЦВЕТ ЛИНИИ — ОДИН НАБОР НА ГРАНИЦУ БЛОКА И НА ЧЕРТУ РАЗДЕЛИТЕЛЯ.
   Проставляется он, только когда граница есть, — об этом заботится общий
   набор имён (/kit/blockstyle.js), а не оформление.

   ПОЧЕМУ ДВА ИМЕНИ В КАЖДОЙ ЗАПИСИ. Имён у одного и того же цвета
   действительно два: `ln-green` навешивает `styleClasses`, `dv-ln-green` —
   `dividerClasses`. Берут они цвет ИЗ ОДНОГО МЕСТА (`lineName(block)`),
   поэтому разойтись не могут: у блока с границей стоят оба имени и оба
   означают одно, у блока без границы — только второе. Пока наборов было
   два, они и лежали двумя списками по двенадцать записей, одинаковыми до
   запятой; правка одного списка молча расходилась с другим.

   Добавленные 20.08 цвета (сливовый и ниже) взяты средними по светлоте:
   письмо читают и в светлой теме, и в тёмной, а линия у него одна. Тёмный
   тон листа здесь не годится — на тёмной карточке он пропадает, — как не
   годится и светлый: он пропадает на белой. */
.notice-block.ln-green, .notice-block.dv-ln-green { --block-line: var(--acc); }
.notice-block.ln-ink,   .notice-block.dv-ln-ink   { --block-line: var(--ink); }
.notice-block.ln-grey,  .notice-block.dv-ln-grey  { --block-line: var(--ink3); }
.notice-block.ln-amber, .notice-block.dv-ln-amber { --block-line: var(--warn-ink); }
.notice-block.ln-blue,  .notice-block.dv-ln-blue  { --block-line: var(--info-ink); }
.notice-block.ln-rose,  .notice-block.dv-ln-rose  { --block-line: var(--danger-ink); }
.notice-block.ln-plum,  .notice-block.dv-ln-plum  { --block-line: #6A4A93; }
.notice-block.ln-teal,  .notice-block.dv-ln-teal  { --block-line: #2E8189; }
.notice-block.ln-olive, .notice-block.dv-ln-olive { --block-line: #74872F; }
.notice-block.ln-clay,  .notice-block.dv-ln-clay  { --block-line: #B05A32; }
.notice-block.ln-steel, .notice-block.dv-ln-steel { --block-line: #5E7791; }
/* Свой цвет линии приходит в двух видах сразу — притемнённым и
   высветленным (см. `styleVars` в /kit/blockstyle.js). Выбирает между
   ними тема: какой из них заметен, решает подложка, а её знает
   оформление, а не общий набор имён. */
.notice-block.ln-own,   .notice-block.dv-ln-own {
  --block-line: var(--block-own-line, var(--ink));
}
:root[data-theme="dark"] .notice-block.ln-own,
:root[data-theme="dark"] .notice-block.dv-ln-own {
  --block-line: var(--block-own-line-lit, var(--ink));
}
.notice-block.st-solid  { --block-stroke: solid; }
.notice-block.st-dashed { --block-stroke: dashed; }

.notice-block.bd-line {
  border: var(--bw) var(--block-stroke, solid) var(--block-line, var(--line));
}
.notice-block.bd-left {
  border-left: 3px var(--block-stroke, solid) var(--block-line, var(--line));
}
/* Черта снизу описана ЦЕЛИКОМ ЗДЕСЬ — и сама черта, и отступ над ней.
   Отступ стоял отдельной записью ниже, в ряду с рамкой и чертой слева;
   у тех двоих поле идёт со всех сторон, у этой только снизу, и в общий
   ряд она всё равно не вставала. */
.notice-block.bd-under {
  border-bottom: var(--bw) var(--block-stroke, solid) var(--block-line, var(--line));
  padding-bottom: var(--sp-150);
}
/* Отступ появляется вместе с заливкой или границей: без них он отодвигал
   бы часть от края без всякой причины. */
.notice-block.bd-line,
.notice-block.bd-left,
.notice-block:not(.fill-none) { padding: var(--sp-150); border-radius: var(--r-s); }
/* ЧЕРТА СЛЕВА — ПРЯМАЯ ЧЕРТА, А НЕ ДУГА.
   Скругление коробки сгибает и её левую границу: концы черты уходят
   внутрь и сходят на нет, и вместо линии выходит рваная скобка.
   Заказчик 25.08: «рамка обводки сломана и прерывается каким-то из
   объектов кажется. На светлой теме с ней проблемы в общем» — на светлом
   это видно резче, потому что бледный фон не прячет истончение.

   Левые углы поэтому прямые: черта идёт от верхнего края до нижнего, как
   идёт цитатная черта у всех, кто её рисует. Правые углы остаются
   скруглёнными — там коробка и правда кончается.

   ИМЯ ЗАПИСАНО ДВАЖДЫ, И ЭТО НЕ УКРАШЕНИЕ: предпросмотр окна составления
   объявляет скругление части своим правилом (`.notice-edit
   .notice-block`), и оно того же веса. При равном весе побеждает то, что
   ниже по файлу, — то есть чужое, молча. Свод про это уже написан целой
   статьёй, и я попался в неё снова. */
.notice-edit .notice-block.bd-left,
.notice-block.bd-left { border-radius: 0 var(--r-s) var(--r-s) 0; }

/* ── Части поста ───────────────────────────────────────────────────
   Врезки здесь больше нет: она была тем же текстом с заливкой и чертой,
   а заливку с чертой умеет любая часть (решение заказчика 25.08). Её
   правило убрано вместе с ней — мёртвое правило вида читается
   действующим и зовёт завести рядом третье. */
/* РАЗДЕЛИТЕЛЬ — ЧЕРТА И ОТСТУП, И БОЛЬШЕ НИЧЕГО. Вид черты и величина
   отступа настраиваются: решение заказчика 11.08 — «графические —
   полосы, пунктиры, точки… так и невидимые. С настраиваемым отступом».
   Имена наборов общие на программу (/kit/blockstyle.js), значения свои:
   здесь экранные и по теме, у листа предложения печатные. */
.notice-divider {
  height: 0;
  border-top-width: var(--dv-w, var(--bw));
  border-top-style: var(--dv-s, solid);
  border-top-color: var(--block-line, var(--line));
  margin: var(--dv-gap, var(--sp-100)) 0;
}
.notice-block.dv-solid  { --dv-s: solid;  --dv-w: var(--bw); }
.notice-block.dv-dashed { --dv-s: dashed; --dv-w: var(--bw); }
.notice-block.dv-dotted { --dv-s: dotted; --dv-w: 2px; }
.notice-block.dv-double { --dv-s: double; --dv-w: 3px; }
.notice-block.dv-thick  { --dv-s: solid;  --dv-w: 3px; }
.notice-block.dv-none   { --dv-s: none;   --dv-w: 0; }
/* Цвета черты здесь БОЛЬШЕ НЕТ: у черты и у границы блока он один и тот
   же и объявлен один раз выше, обоими именами сразу. Второй список из
   двенадцати записей, стоявший здесь, повторял тот слово в слово. */

/* НЕВИДИМЫЙ РАЗДЕЛИТЕЛЬ ВСЁ РАВНО НАДО НАЙТИ ГЛАЗОМ — в окне
   составления, но не в готовом письме. Иначе поставленный отступ нельзя
   ни выбрать, ни убрать: щёлкать не по чему. */
.notice-edit .notice-block.dv-none .notice-divider {
  border-top: var(--bw) dashed var(--line);
}
/* КНОПКА ПРИЖИМАЕТСЯ ТУДА, КУДА СКАЗАНО (заказчик 25.08: «нужна
   настройка кнопок — прижать влева, вправо и расположить по центру»).
   Прижимается ряд, а не сама кнопка: в ряду со временем может стоять и
   вторая, и край у них общий. */
.notice-link, .notice-reply { display: flex; }
.notice-link[data-at="center"], .notice-reply[data-at="center"] {
  justify-content: center;
}
.notice-link[data-at="right"], .notice-reply[data-at="right"] {
  justify-content: flex-end;
}
.notice-polls { display: flex; flex-direction: column; gap: var(--sp-150); }

/* ИЗОБРАЖЕНИЯ: СТОЛБИК ПЛИТОК, ПРИЖАТЫЙ КУДА СКАЗАНО.
   Прижимается сам ряд, а не то, что внутри него: изображений в части
   бывает несколько, и край у них общий.

   РАЗМЕР ПРИХОДИТ ИЗ ЧАСТИ ТРЕМЯ СВОЙСТВАМИ (`--pic-w`, `--pic-h`,
   `--pic-fit`) — их ставит рисовальщик. Умолчание записано здесь: во всю
   ширину, высота по самому изображению. */
.notice-shots {
  display: flex; flex-direction: column; gap: var(--sp-100); min-width: 0;
  --pic-w: 100%; --pic-h: auto; --pic-fit: cover;
}
.notice-shots[data-at="left"]   { align-items: flex-start; }
.notice-shots[data-at="center"] { align-items: center; }
.notice-shots[data-at="right"]  { align-items: flex-end; }
.notice-shot { width: var(--pic-w); max-width: 100%; min-width: 0; }
/* Высота задана — изображение вписывается в неё выбранным способом;
   не задана — растёт само, и `object-fit` ни на что не влияет. */
.notice-shot img {
  display: block; width: 100%; height: var(--pic-h);
  object-fit: var(--pic-fit); border-radius: var(--r);
}

.notice-actions {
  display: flex; align-items: center; gap: var(--sp-100);
  padding: 0 var(--gap) var(--gap);
}

/* КРИТИЧЕСКОЕ СООБЩЕНИЕ закрывается только своей кнопкой. Крестик в шапке
   окна при этом убирается совсем: кнопка, которая ничего не делает,
   читается как поломка, а не как запрет. */
.panel-head.notice-forced .icon-btn { display: none; }

/* ═══════════════════════════════════════════════════════ ОПРОСЫ
   Опрос стоит внутри сообщения, и отделяет его подложка, а не рамка:
   рамка — вторая примета там, где хватает первой. Вложен он в коробку с
   отступом --gap, поэтому скругление у него — её скругление МИНУС этот
   отступ: дуги идут параллельно. */
.notice-poll {
  display: flex; flex-direction: column; gap: var(--sp-100);
  padding: var(--sp-150);
  background: var(--a-100);
  border-radius: calc(var(--r-l) - var(--gap));
}
.notice-poll-title { font-weight: var(--fw-semi); }
.notice-poll-options { display: flex; flex-direction: column; gap: var(--sp-050); }
/* Вопрос кнопками: два-три коротких ответа стоят в ряд и нажимаются
   сразу, без отметки и подтверждения. */
.notice-poll-options.as-buttons {
  flex-direction: row; flex-wrap: wrap; gap: var(--sp-100);
}
.notice-poll-option { display: flex; align-items: center; min-height: var(--h-row); }
.notice-poll-state {
  font-size: var(--fs-s); line-height: var(--lh-s); color: var(--ink3);
}

/* ══════════════════════════════════════════════ ОКНО СОСТАВЛЕНИЯ
   МАСТЕРСКАЯ, а не анкета: слева само сообщение, справа настройки. Та же
   раскладка, что у редактора листа коммерческого предложения, — и по той
   же причине: настраивают в обоих случаях вид документа, который увидит
   другой человек, и сравнивать настройку с итогом надо во время набора,
   а не после.

   Настройки уже, чем сообщение: в них поля и сегменты, а в сообщении —
   текст и изображения, которым нужна ширина. */
/* НАСТРОЙКИ СЛЕВА, ПРЕДПРОСМОТР СПРАВА — как в листе предложения и как
   везде в программе. Заказчик потребовал этого прямо: «настройки слева,
   предпросмотр справа так же как и везде делай, я люблю когда всё
   унифицированно и в едином стиле». Прежде было наоборот, и человек,
   переходя между двумя редакторами, каждый раз искал панель заново. */
.notice-compose {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: var(--sp-300);
  align-items: start;
}
/* Обе колонки, «Кому» и ряд ответа идут одной стопкой: между ними тот
   же зазор, что и между карточками программы. */
.notice-compose-wrap { gap: var(--gap); }
.notice-compose-panel { gap: var(--gap); }
/* Сообщение остаётся на виду, пока слева прокручивают настройки: ради
   этого мастерская и заведена. */
.notice-compose-side { gap: var(--sp-100); position: sticky; top: 0; }
@media (max-width: 900px) {
  .notice-compose { grid-template-columns: 1fr; }
  .notice-compose-side { position: static; }
}

/* ═══════════════════════════════════ НАСТРОЙКА ВИДА СООБЩЕНИЯ
   Всё, что ниже, действует ТОЛЬКО внутри .notice-edit — то есть в
   предпросмотре окна составления. Настоящее письмо, которое видит
   компания, об этом слое не знает и выглядит ровно так же, как здесь.

   Своих рамок, обводок и подписей настройка не добавляет: выбранная
   часть отмечена той же слабой заливкой, что и выбранная строка списка
   (.grid-row.picked), а место переноса — чертой фирменного цвета. Ни
   отступов, ни границ вокруг частей нет — иначе предпросмотр показывал
   бы не то сообщение, которое уйдёт. */
.notice-edit .notice-block {
  border-radius: var(--r-s);
  cursor: var(--cur-grab);
}
/* Пустая часть здесь — МЕСТО под неё, а не пустой экран: отступ ей нужен
   ровно такой, чтобы её было куда взять мышью. Полный отступ пустого
   состояния растягивал бы предпросмотр на два экрана из-за двух строк
   «изображений нет» и «опросов нет». */
.notice-edit .empty-state { padding: var(--sp-200) var(--gap); }
.notice-edit .notice-block:hover { background: var(--a-100); }
.notice-edit .notice-block.picked { background: var(--acc-weak); }
.notice-edit .notice-block.dragging { opacity: .4; cursor: var(--cur-hold); }
/* Куда встанет часть, если отпустить сейчас. Черта, а не подсветка: она
   показывает МЕСТО между частями, а подсветка показывала бы соседа. */
.notice-edit .notice-block.drop-before {
  box-shadow: inset 0 var(--bw-sel) 0 var(--acc);
}
.notice-edit .notice-block.drop-after {
  box-shadow: inset 0 calc(var(--bw-sel) * -1) 0 var(--acc);
}

/* Выбранные изображения. Высота считается от роста поля, а не подбирается:
   плитка в два поля — это ровно та высота, на которой изображение видно и
   на которой список из шести штук не занимает весь экран. */
.notice-shot-list { display: flex; flex-wrap: wrap; gap: var(--sp-100); }
.notice-shot-item {
  position: relative;
  display: inline-flex;
  padding: var(--sp-050);
  background: var(--a-100);
  border-radius: var(--r);
}
.notice-shot-item img {
  display: block;
  height: calc(var(--h-field) * 2); width: auto;
  border-radius: calc(var(--r) - var(--sp-050));
}
.notice-shot-item .icon-btn { position: absolute; top: var(--sp-050); right: var(--sp-050); }

/* Правка опроса — не карточка: она лежит внутри карточки настроек, а
   карточка внутри карточки удваивает скругления и тени. Опросы
   разделяются чертой, как строки списка. */
.notice-poll-edit { gap: var(--sp-100); }
.notice-poll-edit + .notice-poll-edit {
  padding-top: var(--sp-150);
  border-top: var(--bw) solid var(--line);
}

/* ═════════════════════════════════════════ ОТВЕТЫ У ОТПРАВИТЕЛЯ
   По каждой компании: открыто, ознакомлено, что выбрано в опросах.
   Список длинный и нужен не всегда — поэтому он лежит в общем
   сворачиваемом списке строками, а здесь описан только ответ на опрос. */
/* ЧИСЛА ПИСЬМА — ПОЛОСА ГЛАВНЫХ ЧИСЕЛ ПРОГРАММЫ (`.snums`), только в
   окне: там нет сетки экранов, и полосе надо сказать, что она карточка.
   Свои краски и свой рост у неё не заводятся — они уже описаны. */
.notice-sums {
  border: var(--bw) solid var(--line); border-radius: var(--r-l);
  background: var(--card);
}
/* Подробности одной компании стоят под списком и отбиты от него так же,
   как отбиты смысловые группы в окне, — воздухом и заголовком. */
.notice-one-company:not(:empty) { margin-top: var(--sp-200); }
.notice-answer {
  display: flex; gap: var(--sp-100);
  font-size: var(--fs-s); line-height: var(--lh-s);
}
.notice-answer-q { color: var(--ink3); }
.notice-answer-a { color: var(--ink); font-weight: var(--fw-med); }


/* ═══════════════════════════════════════ ВЕТКА ОБСУЖДЕНИЯ
   Заказчик 22.08: «прям почтовый мессенджер с клиентами, но чтобы не жрал
   память». Переписка по одной теме идёт ОДНИМ СТОЛБЦОМ сверху вниз.

   ПИСЬМА НЕ РАЗЛОЖЕНЫ ПО КРАЯМ. Так делают в переписке телефона, и там
   это к месту: реплики короткие, их много, а экран узкий. Здесь письма
   длинные — с описанием поломки, снимками экрана и журналом, — и
   разложенные по краям они читались бы вдвое медленнее: глазу пришлось бы
   прыгать за каждым следующим. Сторона видна подложкой и подписью.

   Своих цветов и мер тут нет: подложка — та же, что у выделенного ряда,
   рамка и скругление — общие. Новых имён заведено ровно три, и каждое
   отвечает за своё: письмо, его шапка, кто написал. */
.msg {
  display: flex; flex-direction: column; gap: var(--sp-100);
  padding: var(--sp-150);
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  background: var(--a-100);
}
/* Своё письмо — подложкой фирменного цвета. Не рамкой: рамка у письма уже
   есть, и вторая, другого цвета, спорила бы с первой. */
.msg-own { background: var(--acc-weak); border-color: var(--acc-solid); }
.msg-who { font-weight: var(--fw-med); color: var(--ink); }
/* Поле ответа стоит ПОД последним письмом и отделено от него воздухом,
   а не чертой: черта здесь читалась бы как ещё одно письмо. */
.msg-reply { margin-top: var(--sp-100); }