/* =========================================================================
   MONARQUE — ЕДИНЫЙ КОМПОНЕНТ ВЫДВИЖНЫХ САЙДБАРОВ (left | right)

   Требование владельца (дословно):
     «Сайдбары выдвигаются на всю ширину экрана на мобилках. Поверх
      центрального блока, который не сдвигается вместе с сайдбаром, а
      накрывается сайдбаром сверху.»
     «Точно между шапкой и контентом, чтобы ничего не загораживать.»

   РАСКЛАДКА
   • Мобильный (< 768px): панель НА ВСЮ ШИРИНУ экрана, ПОВЕРХ центрального
     блока. #view / #news / #foot не получают ни margin, ни padding — их
     ширина и позиция не меняются вообще (бриф, п.4 и п.7 проверки).
   • Панель занимает область МЕЖДУ шапкой и нижней границей экрана
     (top = --site-h, bottom = 0). Шапка (z-index 90) остаётся выше и видна.
   • Десктоп (>= 768px): прежнее поведение — панель как колонка, контент
     подстраивается по ширине (margin-inline, только в десктопной зоне).

   Один CSS на обе стороны: сторона задаётся модификатором --left / --right.

   Здесь же живут стили плашки диалога (.mnq-dlg). Один HTML-класс — одно
   оформление: плашку рисует одна функция MNQ.dialogs.threadCard(), её
   вызывают и кабинет Резидента, и правый сайдбар.

   Нижней панели иконок здесь нет: это зона задачи по Студии, в границы
   этой задачи она не входит.

   Подключается в index.html после news.css.
   ========================================================================= */

:root {
  /* Ширина панели на десктопе — колонка как у прежнего #news-side. */
  --mnq-sb-w: 320px;
  /* ---------------------------------------------------------------------
     «Достаточная ширина» для автооткрытия сайдбаров на десктопе
     (CONCEPT.md §5.7 — пороги не зашиваются в код).

     Требование владельца (дословно): «На десктопах сайдбары должны быть
     раскрыты при наличии достаточной ширины экрана.»

     Значение читает компонент (showcases/sidebars.js, resolveMinDesktopWidth)
     и меняется ЗДЕСЬ, без правки логики: 1280 px = две колонки по 320 px
     плюс 640 px читаемого центрального блока. Экран уже порога — сайдбары
     закрыты и открываются язычком или свайпом.
     --------------------------------------------------------------------- */
  --mnq-sb-open-min-width: 1280px;
  /* Высота полосы табов секций (на десктопе её нет). */
  --mnq-sb-tabs-h: 0px;
  --mnq-sb-z: 60;
}

@media (max-width: 767px) {
  :root {
    /* Мобильный: панель на всю ширину экрана (бриф, п.4). */
    --mnq-sb-w: 100vw;
    /* Своя полоса язычков под шапкой (и под полосой табов, если она есть).
       Язычок живёт ВНУТРИ этой полосы, а не поверх контента (см. §5). */
    --mnq-sb-strip-h: 44px;
    /* Зазор между полосой язычков и началом контента. */
    --mnq-sb-strip-gap: 8px;
  }
  html.mnq-mtabs-on { --mnq-sb-tabs-h: 50px; }
}

/* -------------------------------------------------------------------------
   1. Корень компонента.
   Все fixed-элементы (панели, язычки, табы секций) живут в одном контейнере.
   Слой — как у контента (z-index: 1), поэтому шапка (90), консьерж (100) и
   модалки (120+) остаются выше.
   ------------------------------------------------------------------------- */
.mnq-sb-root {
  position: static;
  z-index: auto;
}

/* -------------------------------------------------------------------------
   2. Панель. Одна разметка, сторона — модификатором.
   ------------------------------------------------------------------------- */
.mnq-sb {
  position: fixed;
  /* Панель начинается ПОД шапкой: шапка остаётся видна и доступна. */
  inset-block-start: var(--site-h, 5rem);
  inset-block-end: 0;
  inline-size: var(--mnq-sb-w);
  max-inline-size: 100vw;
  z-index: var(--mnq-sb-z);
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  background: linear-gradient(180deg, rgba(18, 18, 20, 0.985) 0%, rgba(11, 11, 13, 0.995) 100%);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  visibility: hidden;
  overscroll-behavior: contain;
}

.mnq-sb--left {
  inset-inline-start: 0;
  border-inline-start: 0;
  border-radius: 0 16px 16px 0;
  transform: translateX(calc(-100% - 2px));
}

.mnq-sb--right {
  inset-inline-end: 0;
  border-inline-end: 0;
  border-radius: 16px 0 0 16px;
  transform: translateX(calc(100% + 2px));
}

html[data-mnq-sb-left="open"] .mnq-sb--left,
html[data-mnq-sb-right="open"] .mnq-sb--right {
  transform: translateX(0);
  visibility: visible;
}

/* Пока панель закрыта — она не должна ловить фокус и тапы. */
.mnq-sb[data-open="true"] { visibility: visible; }

.mnq-sb.is-dragging { transition: none; }

/* Арабская вязь: направление письма обратное, и «выдвижение» тоже. */
html[dir="rtl"] .mnq-sb--left { transform: translateX(calc(100% + 2px)); }
html[dir="rtl"] .mnq-sb--right { transform: translateX(calc(-100% - 2px)); }
html[dir="rtl"][data-mnq-sb-left="open"] .mnq-sb--left,
html[dir="rtl"][data-mnq-sb-right="open"] .mnq-sb--right { transform: translateX(0); }

.mnq-sb__inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.mnq-sb__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  border-block-end: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  flex: 0 0 auto;
}

.mnq-sb__title {
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted, #9a9a95);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mnq-sb__close {
  flex: 0 0 auto;
  inline-size: 32px;
  block-size: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 9px;
  background: transparent;
  color: var(--muted, #9a9a95);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.mnq-sb__close:hover { color: var(--ink, #fff); border-color: var(--line-2, rgba(255, 255, 255, 0.2)); }

.mnq-sb__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
  scrollbar-width: thin;
}

.mnq-sb__empty {
  margin: 0;
  padding: 22px 14px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted, #9a9a95);
}

/* -------------------------------------------------------------------------
   3. Язычок в верхней части экрана у своего края.
   Тап — открыть/закрыть. Лежит поверх панели (z-index выше), поэтому когда
   панель открыта, он же служит «ручкой» для закрытия.
   ------------------------------------------------------------------------- */
.mnq-sb-handle {
  position: fixed;
  inset-block-start: calc(var(--site-h, 5rem) + var(--mnq-sb-tabs-h, 0px) + 8px);
  z-index: calc(var(--mnq-sb-z) + 4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 92px;
  padding: 0;
  border: 1px solid var(--line-2, rgba(255, 255, 255, 0.2));
  background: rgba(18, 18, 20, 0.94);
  color: var(--acc, #ff9000);
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px -18px rgba(0, 0, 0, 0.9);
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease,
              inset-inline-start 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              inset-inline-end 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              inset-block-start 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mnq-sb-handle:hover,
.mnq-sb-handle:focus-visible { background: rgba(255, 144, 0, 0.16); color: #ffd9a8; }

/* Закрытая панель — язычок у края экрана. Открытая (десктоп) — язычок
   переезжает на внутренний край панели, как гребень выдвижного ящика: он
   остаётся нажимаемым («тап → закрыть»), но не лежит поверх содержимого. */
.mnq-sb-handle--left {
  inset-inline-start: 0;
  border-inline-start: 0;
  border-radius: 0 10px 10px 0;
}
.mnq-sb-handle--right {
  inset-inline-end: 0;
  border-inline-end: 0;
  border-radius: 10px 0 0 10px;
}

html[data-mnq-sb-left="open"] .mnq-sb-handle--left {
  inset-inline-start: var(--mnq-sb-w);
  border-radius: 0 10px 10px 0;
}
html[data-mnq-sb-right="open"] .mnq-sb-handle--right {
  inset-inline-end: var(--mnq-sb-w);
  border-radius: 10px 0 0 10px;
}
html[dir="rtl"][data-mnq-sb-left="open"] .mnq-sb-handle--left {
  border-radius: 10px 0 0 10px;
}
html[dir="rtl"][data-mnq-sb-right="open"] .mnq-sb-handle--right {
  border-radius: 0 10px 10px 0;
}

.mnq-sb-handle__chev { display: none; }

.mnq-sb-handle__text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-block-size: 84px;
}
html[dir="rtl"] .mnq-sb-handle--left .mnq-sb-handle__text,
html[dir="rtl"] .mnq-sb-handle--right .mnq-sb-handle__text {
  writing-mode: vertical-lr;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------
   4. Десктоп: панель — колонка, контент подстраивается по ширине.
   На мобильном этих правил НЕТ вообще: центральный блок не сдвигается и не
   сжимается, его накрывает панель (требование владельца).
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  #view,
  #news,
  #foot {
    transition: margin-inline-start 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                margin-inline-end 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html[data-mnq-sb-right="open"] #view,
  html[data-mnq-sb-right="open"] #news,
  html[data-mnq-sb-right="open"] #foot {
    margin-inline-end: var(--mnq-sb-w);
  }

  html[data-mnq-sb-left="open"] #view,
  html[data-mnq-sb-left="open"] #news,
  html[data-mnq-sb-left="open"] #foot {
    margin-inline-start: var(--mnq-sb-w);
  }

  /* Плашка консьержа не должна оказаться под панелью: она переезжает
     вместе с контентом (то же правило, что было у прежнего #news-side). */
  html[data-mnq-sb-right="open"] body div.mnq-cq.mnq-cq {
    inset-inline-end: calc(var(--mnq-sb-w) + 14px);
  }
  html[data-mnq-sb-left="open"] body div.mnq-cq.mnq-cq {
    inset-inline-start: calc(var(--mnq-sb-w) + 14px);
  }

  /* -----------------------------------------------------------------------
     4.1. Центральный блок не сжимается в нечитаемое.

     Раскрытая ПАРА панелей забирает у центра 2 × var(--mnq-sb-w) — при
     1280 px окне остаётся 640 px. Сетки карточек считают число колонок по
     ширине ОКНА (@media в styles.css), а не по ширине блока: на 640 px центр
     продолжает получать пять колонок по 106 px, и имена профилей обрезаются.

     Здесь блок объявляется контейнером, и число колонок пересчитывается по
     ФАКТИЧЕСКОЙ ширине центра. Правила включаются ТОЛЬКО когда раскрыты ОБЕ
     панели (и только на десктопе, т.к. блок стоит в этой media-зоне): один
     сайдбар и закрытые панели показывают ровно то, что показывали раньше.

     Границы подобраны по ширине карточки, а не «на глаз»:
       центр ≥ 1180 px — 5 колонок (карточка ≈ 228 px, базовая сетка);
       центр ≤ 1180 px — 4 колонки (≈ 287 px);
       центр ≤  940 px — 3 колонки (≈ 306 px);
       центр ≤  700 px — 2 колонки (≈ 345 px).
     Ниже карточка уже не обрезает ни имя, ни город, ни подписи.
     ----------------------------------------------------------------------- */
  main#view {
    /* Собственный контейнер: @container ниже считает ширину самого блока. */
    container-type: inline-size;
    container-name: mnq-center;
  }

  @container mnq-center (max-width: 1180px) {
    html[data-mnq-sb-left="open"][data-mnq-sb-right="open"] #view .grid--profiles {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @container mnq-center (max-width: 940px) {
    html[data-mnq-sb-left="open"][data-mnq-sb-right="open"] #view .grid--profiles {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @container mnq-center (max-width: 700px) {
    html[data-mnq-sb-left="open"][data-mnq-sb-right="open"] #view .grid--profiles {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

/* -------------------------------------------------------------------------
   5. Мобильный режим: панель на всю ширину, поверх центрального блока.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .mnq-sb {
    inline-size: 100vw;
    /* Полная ширина — панель не «колонка с полями», а экран целиком. */
    border-radius: 0;
    border-inline: 0;
  }
  .mnq-sb--left { transform: translateX(-100%); }
  .mnq-sb--right { transform: translateX(100%); }
  html[dir="rtl"] .mnq-sb--left { transform: translateX(100%); }
  html[dir="rtl"] .mnq-sb--right { transform: translateX(-100%); }
  html[data-mnq-sb-left="open"] .mnq-sb--left,
  html[data-mnq-sb-right="open"] .mnq-sb--right,
  html[dir="rtl"][data-mnq-sb-left="open"] .mnq-sb--left,
  html[dir="rtl"][data-mnq-sb-right="open"] .mnq-sb--right { transform: translateX(0); }

  /* -----------------------------------------------------------------------
     D-6. ПОЛОСА ЯЗЫЧКОВ МЕЖДУ ШАПКОЙ И КОНТЕНТОМ.

     Требование владельца (дословно): «Точно между шапкой и контентом,
     чтобы ничего не загораживать».

     Было: язычок 44×76 стоял НАД контентом (top = шапка + табы + 10) и
     закрывал верхние углы карточек и текст первого экрана — и на первом
     экране, и при прокрутке.

     Стало: под шапкой (и под полосой табов секций, если она есть) идёт
     СВОЯ полоса высотой 44 px. Язычок живёт ВНУТРИ неё, ровно 44×44,
     и не выходит за её пределы. Контент начинается НИЖЕ полосы
     (отступ у первого блока, см. §5.1), поэтому язычок не может лечь
     на карточку или абзац ни на первом экране, ни при прокрутке:
     уезжающий вверх контент уходит ПОД полосу, как под шапку.

     Полоса — фон того же тона, что полоса табов, поэтому читается как
     продолжение шапки, а не как «плавающая кнопка» поверх страницы.
     ----------------------------------------------------------------------- */
  .mnq-sb-root::before {
    content: "";
    position: fixed;
    inset-block-start: calc(var(--site-h, 5rem) + var(--mnq-sb-tabs-h, 0px));
    inset-inline: 0;
    block-size: var(--mnq-sb-strip-h, 44px);
    /* Ниже полосы табов (z-2) и ниже панели: открытая панель накрывает полосу. */
    z-index: calc(var(--mnq-sb-z) - 3);
    background: rgba(11, 11, 13, 0.96);
    border-block-end: 1px solid var(--line, rgba(255, 255, 255, 0.1));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: none;
  }

  /* Язычок — 44×44 внутри полосы. Тап-зона ровно 44×44 (бриф, п.2).
     Подпись в квадрат не влезает — остаётся стрелка, смысл дублирует aria-label. */
  .mnq-sb-handle {
    inline-size: 44px;
    block-size: var(--mnq-sb-strip-h, 44px);
    /* Ровно верх полосы: язычок занимает её целиком и не выходит за неё. */
    inset-block-start: calc(var(--site-h, 5rem) + var(--mnq-sb-tabs-h, 0px));
    border-radius: 0 10px 10px 0;
  }
  .mnq-sb-handle--right { border-radius: 10px 0 0 10px; }
  /* Открытая панель накрывает полосу — язычок переезжает в шапку панели,
     к её верхнему краю: он остаётся кнопкой «закрыть», но не лежит ни на
     полосе табов, ни на содержимом панели (шапка панели держит для него
     отступ 48 px, см. ниже). */
  html[data-mnq-sb-left="open"] .mnq-sb-handle--left,
  html[data-mnq-sb-right="open"] .mnq-sb-handle--right {
    inset-block-start: calc(var(--site-h, 5rem) + 6px);
  }
  html[data-mnq-sb-left="open"] .mnq-sb-handle--left { inset-inline-start: 0; }
  html[data-mnq-sb-right="open"] .mnq-sb-handle--right { inset-inline-end: 0; }
  .mnq-sb-handle__text { display: none; }
  .mnq-sb-handle__chev {
    display: block;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
  }
  .mnq-sb-handle--left .mnq-sb-handle__chev::before { content: "\203A"; }
  .mnq-sb-handle--right .mnq-sb-handle__chev::before { content: "\2039"; }
  html[data-mnq-sb-left="open"] .mnq-sb-handle--left .mnq-sb-handle__chev::before { content: "\2039"; }
  html[data-mnq-sb-right="open"] .mnq-sb-handle--right .mnq-sb-handle__chev::before { content: "\203A"; }
  html[dir="rtl"] .mnq-sb-handle--left .mnq-sb-handle__chev::before { content: "\2039"; }
  html[dir="rtl"] .mnq-sb-handle--right .mnq-sb-handle__chev::before { content: "\203A"; }
  html[dir="rtl"][data-mnq-sb-left="open"] .mnq-sb-handle--left .mnq-sb-handle__chev::before { content: "\203A"; }
  html[dir="rtl"][data-mnq-sb-right="open"] .mnq-sb-handle--right .mnq-sb-handle__chev::before { content: "\2039"; }

  /* Язычок открытой панели не наезжает на заголовок шапки панели.
     D-4: полоса язычка теперь 44 px, поэтому отступ шапки тоже 44+. */
  html[data-mnq-sb-left="open"] .mnq-sb--left .mnq-sb__head { padding-inline-start: 48px; }
  html[data-mnq-sb-right="open"] .mnq-sb--right .mnq-sb__head { padding-inline-end: 48px; }

  /* Открытая панель накрывает экран целиком — язычок ПРОТИВОПОЛОЖНОЙ стороны
     оказался бы поверх её содержимого. У открытой панели есть свой язычок
     («закрыть») и кнопка ✕, поэтому второй на это время убирается. */
  html[data-mnq-sb-left="open"] .mnq-sb-handle--right,
  html[data-mnq-sb-right="open"] .mnq-sb-handle--left { display: none; }

  /* Полноэкранная панель — крупные строки под палец. */
  .mnq-sb__head { padding-block: 12px; }
  .mnq-sb__body { padding: 12px 14px 22px; }

  /* Плавающая кнопка консьержа (z-index 100, выше панели) не должна висеть
     поверх открытой панели: она занимает весь экран между шапкой и низом. */
  html[data-mnq-sb-left="open"] .mnq-cq__stage,
  html[data-mnq-sb-right="open"] .mnq-cq__stage { display: none; }
}

/* -------------------------------------------------------------------------
   6. Полоса табов секций под шапкой (мобильный).
   Секции не оборачиваются в контейнер — скрывается всё, кроме активной.
   Полоса лежит ПОД панелью сайдбара: открытая панель накрывает и её.
   ------------------------------------------------------------------------- */
.mnq-mtabs {
  position: fixed;
  inset-block-start: var(--site-h, 5rem);
  inset-inline: 0;
  z-index: calc(var(--mnq-sb-z) - 2);
  display: flex;
  gap: 6px;
  align-items: center;
  block-size: 50px;
  padding: 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  border-block-end: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  background: rgba(11, 11, 13, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.mnq-mtabs::-webkit-scrollbar { display: none; }

.mnq-mtab {
  flex: 0 0 auto;
  max-inline-size: 68vw;
  padding: 8px 13px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #9a9a95);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}
.mnq-mtab.is-active {
  color: #0a0a0a;
  background: var(--acc, #ff9000);
  border-color: var(--acc, #ff9000);
}

/* На десктопе полосы нет и секции не прячутся: правило скрытия живёт только
   в мобильной медиа-зоне. */
@media (min-width: 768px) {
  .mnq-mtabs { display: none; }
}

@media (max-width: 767px) {
  .mnq-mtab-hidden { display: none !important; }

  /* -----------------------------------------------------------------------
     5.1. КОНТЕНТ НАЧИНАЕТСЯ НИЖЕ ПОЛОСЫ ЯЗЫЧКОВ.

     Видна всегда ровно одна секция, и каждая может оказаться первой на
     экране — значит отступ нужен каждой, а не только первой в разметке.
     Высота отступа = шапка + полоса табов (если есть) + полоса язычков +
     зазор. Токены те же, что у шапки и у самой полосы, поэтому отступ не
     разъезжается при смене витрины (у каждой свой --site-h).

     !important — потому что отступ первого блока уже задан в sites.css
     (компенсация липкой шапки) с более высокой специфичностью; здесь он
     не отменяется, а ДОПОЛНЯЕТСЯ полосой язычков. Иначе язычок снова
     оказался бы над контентом.

     :has(#mnq-sb-root) — полоса существует только там, где смонтирован
     компонент сайдбаров. Экран регистрации живёт без него, и лишних
     44 px пустоты над заголовком там быть не должно.
     ----------------------------------------------------------------------- */
  html:has(#mnq-sb-root)[data-showcase] main#view > :first-child,
  html:has(#mnq-sb-root)[data-showcase] main#view > section,
  html:has(#mnq-sb-root)[data-showcase] main#view > .cc {
    padding-block-start: calc(
      var(--site-h, 5rem) + var(--mnq-sb-tabs-h, 0px) +
      var(--mnq-sb-strip-h, 44px) + var(--mnq-sb-strip-gap, 8px)
    ) !important;
  }

  /* Переход по якорю и scrollIntoView тоже не должны уводить содержимое
     под полосу язычков: карточка обязана встать ПОД ней, а не за ней. */
  html:has(#mnq-sb-root) {
    scroll-padding-top: calc(
      var(--site-h, 5rem) + var(--mnq-sb-tabs-h, 0px) +
      var(--mnq-sb-strip-h, 44px) + var(--mnq-sb-strip-gap, 8px)
    );
  }
}

/* -------------------------------------------------------------------------
   7. Плашка диалога (.mnq-dlg) — ОДНА на всю экосистему.
   Тот же класс, что в кабинете Резидента: кабинет и правый сайдбар рисуются
   одной функцией MNQ.dialogs.threadCard().
   ------------------------------------------------------------------------- */
.mnq-dlgs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  max-height: 560px;
  overflow-y: auto;
}

.mnq-dlg {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  width: 100%;
  padding: 9px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}
.mnq-dlg:hover { border-color: var(--line-2); background: rgba(255, 255, 255, 0.03); }
.mnq-dlg.is-open { border-color: var(--acc); background: rgba(255, 144, 0, 0.07); }
.mnq-dlg__ph {
  position: relative;
  width: 40px;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  overflow: hidden;
  background: #141414;
}
.mnq-dlg__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mnq-dlg__body { min-width: 0; }
.mnq-dlg__name {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mnq-dlg__meta {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.mnq-dlg__preview {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.45;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mnq-dlg__flag {
  flex: 0 0 auto;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 700;
  background: var(--acc);
  color: #0a0a0a;
}
.mnq-dlg.is-declined .mnq-dlg__name { color: var(--muted); }
.mnq-dlgs__empty {
  padding: 22px 14px;
  text-align: center;
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
}

/* В сайдбаре список живёт на всю высоту панели, а не в 560px. */
.mnq-sb .mnq-dlgs,
.mnq-dlgs--side {
  max-height: none;
  padding: 0;
  overflow: visible;
}

@media (max-width: 1100px) {
  .mnq-cab .mnq-dlgs { max-height: none; }
}

/* На полноэкранной мобильной панели плашка крупнее — её читают пальцем. */
@media (max-width: 767px) {
  .mnq-sb .mnq-dlg {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    padding: 11px;
  }
  .mnq-sb .mnq-dlg__ph { width: 44px; }
  .mnq-sb .mnq-dlg__name { font-size: 13px; }
  .mnq-sb .mnq-dlg__preview { font-size: 11.5px; }
}

/* -------------------------------------------------------------------------
   8. Гость: прежний #news-side теперь живёт внутри правой панели.
   Обнуляем его «страничную» геометрию, чтобы он вёл себя как содержимое
   панели, а не как колонка страницы.
   ------------------------------------------------------------------------- */
html .mnq-sb #news-side {
  position: static;
  display: block;
  inline-size: auto;
  max-inline-size: none;
  margin: 0;
  padding: 0;
}
html .mnq-sb #news-side .mnq-news-side {
  max-inline-size: none;
  margin: 0;
  /* Панель уже даёт рамку: вторая рамка внутри неё была бы двойной. */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Пустой контейнер не оставляет пустого места внутри панели. */
html .mnq-sb #news-side:empty { display: none; }

/* -------------------------------------------------------------------------
   9. Содержимое левого сайдбара: ПЛОСКОЕ общее меню.
   Никаких табов, никаких сайтов экосистемы — требование владельца.
   ------------------------------------------------------------------------- */
.mnq-sb-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mnq-sb-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink, #fff);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
.mnq-sb-link:hover,
.mnq-sb-link:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line, rgba(255, 255, 255, 0.1));
}

.mnq-sb-link__label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.mnq-sb-link__sub {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #9a9a95);
}

@media (max-width: 767px) {
  .mnq-sb-link { padding: 13px 12px; }
  .mnq-sb-link__label { font-size: 15px; }
}

.mnq-sb-block {
  margin-block-start: 14px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--line, rgba(255, 255, 255, 0.1));
}

.mnq-sb-block__title {
  display: block;
  margin-block-end: 8px;
  padding-inline-start: 11px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #9a9a95);
}

.mnq-sb-langs {
  display: flex;
  gap: 6px;
  padding-inline: 11px;
}

.mnq-sb-lang {
  flex: 1 1 0;
  padding: 7px 0;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #9a9a95);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}
.mnq-sb-lang.is-active {
  color: #0a0a0a;
  background: var(--acc, #ff9000);
  border-color: var(--acc, #ff9000);
}

/* -------------------------------------------------------------------------
   10. Уважение к prefers-reduced-motion.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mnq-sb,
  .mnq-sb-handle,
  #view,
  #news,
  #foot {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   D-4: язычок на мобильном стал 44 px — он больше не должен наезжать на
   содержимое открытой панели. Отступ получает и шапка, и тело панели.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  html[data-mnq-sb-left="open"] .mnq-sb--left .mnq-sb__body { padding-inline-start: 56px; }
  html[data-mnq-sb-right="open"] .mnq-sb--right .mnq-sb__body { padding-inline-end: 56px; }
}

/* -------------------------------------------------------------------------
   12. СВЕТЛАЯ ВИТРИНА: ПАНЕЛЬ ВСЕГДА ТЁМНАЯ — ТЕКСТ ВСЕГДА СВЕТЛЫЙ.

   Панель сайдбара залита собственным тёмным фоном (п.2), но текст в ней
   берёт токены темы сайта (`--ink`, `--muted`, `--line`). На тёмных
   витринах это светлый текст на тёмном — всё читается. У Конкурса тема
   светлая (sites.css: «единственный СВЕТЛЫЙ сайт»), и там те же токены
   дают тёмный текст на тёмной панели: подписи меню и имена диалогов тонут.

   Раньше это было почти незаметно: левая панель на десктопе всегда была
   закрыта, а правая колонка новостей — узкая. Теперь панели раскрыты по
   умолчанию, поэтому токены панели задаются явно — ровно так же, как это
   уже сделано в legal.css для документов: «тема сайта меняется, а текст
   должен читаться всегда». Правило одно и живёт в этом файле: другие
   витрины не затрагиваются, содержимое панелей не меняется.
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  html[data-showcase="miss"] .mnq-sb,
  html[data-showcase="miss"] .mnq-sb-handle,
  html[data-showcase="miss"] .mnq-sb-root {
    /* Заголовки внутри панели красит правило витрины
       `html[data-showcase="miss"] h1..h3 { color: var(--site-text) }`, поэтому
       переопределяем и сами токены витрины — в границах панели. */
    --site-text: #f7f2e6;
    --site-text-soft: #ded5c2;
    --site-muted: #b9ab8b;
    --ink: #f7f2e6;
    --ink-2: #ded5c2;
    --muted: #b9ab8b;
    --line: rgba(255, 255, 255, 0.10);
    --line-2: rgba(255, 255, 255, 0.22);
    --acc: #d9c08a;
    --gold-line: rgba(255, 255, 255, 0.10);
    --gold-line-strong: rgba(255, 255, 255, 0.22);
  }
}