/*
 * НейроОфис: оформление клиента LibreChat v0.8.8. Подключается из index.html при сборке образа (docker/brand.mjs).
 * Разделы: карточка уточняющих вопросов; каталог агентов; пустой экран чата с агентом; просмотр файлов; чат;
 * ответ (цитаты, таблицы, схемы); меню и настройки.
 *
 * Карточка уточняющих вопросов (ask_user_question).
 * Все правила привязаны к структуре компонента AskUserQuestions:
 *   корень   — div, у которого прямой потомок-контейнер содержит fieldset[tabindex="-1"][aria-labelledby]
 *              (такой fieldset в клиенте один — шаг пакета вопросов);
 *   панель   — .popover над полем ввода, внутри которой этот корень;
 *   итог     — свёрнутая карточка заданных вопросов в чате ([data-testid="ask-user-question-call"]);
 *   подвал   — «Пропустить» (button.neurooffice-ask-skip) и «Пропустить все» (button.neurooffice-ask-skip-all)
 *              добавляет docker/brand.mjs (раздел «карточка уточняющих вопросов»).
 * Высота панели и карточки в чате — не больше 45 % окна, вопрос прокручивается внутри.
 * Темы высокой контрастности (html.high-contrast) не затрагиваются.
 */

/* ------------------------------------------------------------------ токены */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]),
html:not(.high-contrast) .popover:has(> div > div > fieldset[tabindex="-1"][aria-labelledby]),
html:not(.high-contrast) .popover.\[view-transition-name\:ask-question\] {
  --nq-accent: #2f55ff;
  --nq-accent-hover: #2446e6;
  --nq-accent-ink: #2f55ff;
  --nq-accent-tint: rgba(47, 85, 255, 0.06);
  --nq-accent-tint-hover: rgba(47, 85, 255, 0.1);
  --nq-accent-line: rgba(47, 85, 255, 0.55);
  --nq-ring: rgba(47, 85, 255, 0.3);
  --nq-on-accent: #ffffff;
  --nq-surface: #ffffff;
  --nq-fg: #15171c;
  --nq-muted: #676c76;
  --nq-subtle: #8b909a;
  --nq-line: rgba(17, 24, 39, 0.1);
  --nq-line-strong: rgba(17, 24, 39, 0.2);
  --nq-hover: rgba(17, 24, 39, 0.035);
  --nq-disabled: rgba(17, 24, 39, 0.07);
  --nq-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 12px 32px -12px rgba(17, 24, 39, 0.18);
}
html.dark:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]),
html.dark:not(.high-contrast) .popover:has(> div > div > fieldset[tabindex="-1"][aria-labelledby]),
html.dark:not(.high-contrast) .popover.\[view-transition-name\:ask-question\] {
  --nq-accent: #2f55ff;
  --nq-accent-hover: #4466ff;
  --nq-accent-ink: #8099ff;
  --nq-accent-tint: rgba(47, 85, 255, 0.11);
  --nq-accent-tint-hover: rgba(47, 85, 255, 0.16);
  --nq-accent-line: rgba(110, 137, 255, 0.75);
  --nq-ring: rgba(96, 126, 255, 0.38);
  --nq-surface: #1c1c1e;
  --nq-fg: #ececf1;
  --nq-muted: #a1a3ab;
  --nq-subtle: #7d8089;
  --nq-line: rgba(255, 255, 255, 0.09);
  --nq-line-strong: rgba(255, 255, 255, 0.18);
  --nq-hover: rgba(255, 255, 255, 0.05);
  --nq-disabled: rgba(255, 255, 255, 0.08);
  --nq-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------------ поверхность */
/* Панель над полем ввода: заголовок «Уточняющие вопросы» + шаги пакета. */
html:not(.high-contrast) .popover:has(> div > div > fieldset[tabindex="-1"][aria-labelledby]) {
  background: var(--nq-surface);
  border: 1px solid var(--nq-line);
  border-radius: 16px;
  box-shadow: var(--nq-shadow);
  color: var(--nq-fg);
  overflow: hidden;
  /* панель лежит поверх переписки: не выше 45 % окна, остальное прокручивается внутри,
     ответ модели над ней остаётся видимым */
  max-height: 45vh;
}
html:not(.high-contrast) .popover:has(> div > div > fieldset[tabindex="-1"][aria-labelledby]) > div:first-child {
  border-bottom: 0;
  padding: 8px 8px 0 16px;
  gap: 12px;
}
html:not(.high-contrast) .popover:has(> div > div > fieldset[tabindex="-1"][aria-labelledby]) > div:first-child > p {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--nq-fg);
}
html:not(.high-contrast) .popover:has(> div > div > fieldset[tabindex="-1"][aria-labelledby]) > div:first-child button,
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.justify-end > button {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  color: var(--nq-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html:not(.high-contrast) .popover:has(> div > div > fieldset[tabindex="-1"][aria-labelledby]) > div:first-child button:hover,
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.justify-end > button:hover {
  background: var(--nq-hover);
  color: var(--nq-fg);
}

/* Карточка в чате (тот же компонент без панели). */
html:not(.high-contrast) div.rounded-lg:has(> div > fieldset[tabindex="-1"][aria-labelledby]) {
  background: var(--nq-surface);
  border: 1px solid var(--nq-line);
  border-radius: 16px;
  color: var(--nq-fg);
  overflow: hidden;
  max-height: 45vh;
}
/* Строка «развернуть / закрыть» над карточкой в чате: кнопки в правом верхнем углу, без отдельной полосы. */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) {
  position: relative;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.justify-end:first-child {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  border-bottom: 0;
  padding: 0;
  gap: 2px;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.justify-end:first-child + div:has(> [role="group"]) {
  padding-top: 10px;
  padding-right: 48px;
}
/* без шагов (один вопрос) — освобождаем место под кнопки справа от заголовка */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.justify-end:first-child + div.overflow-y-auto > fieldset > :is(legend, p[id]) {
  padding-right: 40px;
}

/* ------------------------------------------------------------------ шаги */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div:has(> [role="group"]) {
  border-bottom: 1px solid var(--nq-line);
  padding: 2px 12px 8px 16px;
  min-height: 0;
}
html:not(.high-contrast) div.rounded-lg:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div:first-child:has(> [role="group"]) {
  padding-top: 10px;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div:has(> [role="group"]) > p {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: var(--nq-muted);
  font-variant-numeric: tabular-nums;
}
/* точки-шаги дублируют «Вопрос 1 из 3» — не показываются; по шагам — «Назад» и «Далее» */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > [role="group"] {
  display: none;
}

/* ------------------------------------------------------------------ вопрос */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.overflow-y-auto {
  padding: 0 16px;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset[tabindex="-1"] {
  padding: 10px 0 12px;
  min-height: 0;
}
/* краткий заголовок вопроса (legend: «Поставщик») — мелкий серый надзаголовок над вопросом; виден только
   экранному диктору, на экране — сам вопрос */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > p[id] {
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--nq-fg);
  text-wrap: pretty;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > p:not([id]) {
  margin-top: 4px;
  font-size: 14px;
  line-height: 21px;
  color: var(--nq-muted);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ варианты */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 10px;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] > button {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  max-width: none;
  min-height: 38px;
  height: auto;
  margin: 0;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--nq-line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--nq-fg);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  opacity: 1;
  box-shadow: none;
  outline: none;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
/* индикатор выбора: круг (один ответ) или квадрат (несколько) */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] > button::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid var(--nq-line-strong);
  border-radius: 999px;
  background: transparent;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] > button[role="checkbox"]::before {
  border-radius: 5px;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] > button > svg {
  display: none;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] > button:hover:not(:disabled) {
  background: var(--nq-hover);
  border-color: var(--nq-subtle);
  color: var(--nq-fg);
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] > button:hover:not(:disabled)::before {
  border-color: var(--nq-subtle);
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] > button:focus-visible {
  border-color: var(--nq-accent);
  box-shadow: 0 0 0 3px var(--nq-ring);
}
/* выбранный вариант */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] > button:is([aria-pressed="true"], [aria-checked="true"]),
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] > button:is([aria-pressed="true"], [aria-checked="true"]):hover:not(:disabled) {
  background: var(--nq-accent-tint);
  border-color: var(--nq-accent-line);
  color: var(--nq-fg);
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] > button:is([aria-pressed="true"], [aria-checked="true"]):hover:not(:disabled) {
  background: var(--nq-accent-tint-hover);
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] > button[aria-pressed="true"]::before {
  border: 5px solid var(--nq-accent);
  background: var(--nq-on-accent, #fff);
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] > button[aria-checked="true"]::before {
  border-color: var(--nq-accent);
  background: var(--nq-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] > button:disabled {
  opacity: 0.55;
}

/* ------------------------------------------------------------------ свой ответ */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--nq-line-strong);
  border-radius: 12px;
  background: transparent;
  color: var(--nq-fg);
  font-size: 14px;
  line-height: 20px;
  box-shadow: none;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] + textarea {
  border-style: dashed;
}
/* выбран вариант — поле своего ответа приглушено: ответ один, ввод текста снимает выбор варианта */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"]:has(> button[aria-pressed="true"]) + textarea:not(:focus) {
  opacity: 0.6;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > textarea::placeholder {
  color: var(--nq-subtle);
  opacity: 1;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > textarea:hover:not(:disabled):not(:focus) {
  border-color: var(--nq-subtle);
  background: var(--nq-hover);
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] + textarea:focus,
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > div[role="group"] + textarea:not(:placeholder-shown) {
  border-style: solid;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div > fieldset > textarea:focus {
  border-color: var(--nq-accent);
  box-shadow: 0 0 0 3px var(--nq-ring);
}

/* ------------------------------------------------------------------ сообщения */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.text-text-warning {
  padding: 0 16px 8px;
  font-size: 13px;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > button {
  align-self: flex-start;
  margin: 0 16px 8px;
  padding: 0;
  font-size: 13px;
  color: var(--nq-accent-ink);
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > button:hover {
  color: var(--nq-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ кнопки */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child {
  border-top: 1px solid var(--nq-line);
  padding: 8px 12px 8px 6px;
  gap: 4px;
  justify-content: flex-start;
}
/* «Назад» и «Далее» / «Отправить» — справа, «Пропустить» и «Пропустить все» — слева */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child > div {
  margin-left: auto;
  gap: 8px;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child button {
  height: 32px;
  padding: 0 14px;
  white-space: nowrap;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child button:focus-visible {
  box-shadow: 0 0 0 3px var(--nq-ring);
}
/* «Пропустить» — тихая текстовая кнопка */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child > button {
  border: 0;
  background: transparent;
  color: var(--nq-muted);
  padding: 0 10px;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child > button:hover {
  background: var(--nq-hover);
  color: var(--nq-fg);
}
/* «Пропустить все» — ссылка: отправляет данные ответы, остальные вопросы помечаются пропущенными */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child > button.neurooffice-ask-skip-all {
  padding: 0 8px;
  font-size: 13px;
  font-weight: 400;
  /* --nq-muted: 5,3:1 на белом и 7,4:1 на тёмной карточке (AA); --nq-subtle давал 3,2:1 */
  color: var(--nq-muted);
  text-decoration: underline;
  text-decoration-color: var(--nq-line-strong);
  text-underline-offset: 3px;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child > button.neurooffice-ask-skip-all:hover:not(:disabled) {
  background: transparent;
  color: var(--nq-fg);
  text-decoration-color: currentColor;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child > button:disabled {
  opacity: 0.5;
}
/* «Назад» — вторичная */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child > div > button:not(:last-child) {
  border: 1px solid var(--nq-line-strong);
  background: transparent;
  color: var(--nq-fg);
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child > div > button:not(:last-child):hover {
  background: var(--nq-hover);
  border-color: var(--nq-subtle);
}
/* на первом шаге «Назад» недоступна — не показываем */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child > div > button:not(:last-child):disabled {
  display: none;
}
/* «Далее» / «Отправить» — основная */
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child > div > button:last-child {
  border: 1px solid transparent;
  background: var(--nq-accent);
  color: #ffffff;
  min-width: 96px;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child > div > button:last-child:hover {
  background: var(--nq-accent-hover);
  color: #ffffff;
}
html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child > div > button:last-child:disabled {
  background: var(--nq-disabled);
  color: var(--nq-subtle);
  opacity: 1;
}
/* узкий экран: четыре кнопки подвала в одну строку */
@media (max-width: 480px) {
  html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child button {
    padding: 0 10px;
  }
  html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child > button {
    padding: 0 6px;
  }
  html:not(.high-contrast) div:has(> div > fieldset[tabindex="-1"][aria-labelledby]) > div.border-t:last-child > div > button:last-child {
    min-width: 0;
  }
}

/* ------------------------------------------------------------------ один вопрос над полем ввода */
/* Тот же язык: акцент для отмеченных вариантов и «Отправить», без зелёного. */
html:not(.high-contrast) .popover.\[view-transition-name\:ask-question\] button[role="checkbox"][aria-checked="true"] > span:first-child {
  background: var(--nq-accent);
  color: #ffffff;
}
html:not(.high-contrast) .popover.\[view-transition-name\:ask-question\] > div:last-child button.bg-surface-submit {
  background: var(--nq-accent);
  color: #ffffff;
}
html:not(.high-contrast) .popover.\[view-transition-name\:ask-question\] > div:last-child button.bg-surface-submit:hover {
  background: var(--nq-accent-hover);
}

/* ------------------------------------------------------------------ итог в чате */
/* «Ваш ответ» — спокойная плашка вместо полосы слева. */
html:not(.high-contrast) [data-testid="ask-user-question-call"] ~ div > .overflow-hidden > div :is(.min-w-0 > div.border-l-2) {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 0;
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.04);
}
html.dark:not(.high-contrast) [data-testid="ask-user-question-call"] ~ div > .overflow-hidden > div :is(.min-w-0 > div.border-l-2) {
  background: rgba(255, 255, 255, 0.05);
}
/* подписи «Тип приказа» и «Ваш ответ:» — спокойным текстом, без мелкого полужирного */
html:not(.high-contrast) [data-testid="ask-user-question-call"] ~ div > .overflow-hidden > div > div > p.mb-1.text-xs,
html:not(.high-contrast) [data-testid="ask-user-question-call"] ~ div > .overflow-hidden > div :is(.min-w-0 > div.border-l-2) > p:first-child {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}

/* ================================================================== каталог агентов
 * Страница /agents (компонент AgentMarketplace). Область — main, внутри которого есть вкладки категорий
 * (button[role="tab"] с id category-tab-<value>); карточка агента — [role="gridcell"] > [role="button"]
 * (AgentCard: значок категории span, плитка иконки div, текст div). Раздел категории определяется по
 * панели [role="tabpanel"] с id category-panel-<value>; во вкладке «Все» — category-panel-all.
 */
html:not(.high-contrast) {
  --nc-accent: #2f55ff;
  --nc-accent-ink: #2f55ff;
  --nc-tint: #eef2ff;
  --nc-tint-hover: #e4eaff;
  --nc-accent-line: rgba(47, 85, 255, 0.55);
  --nc-ring: rgba(47, 85, 255, 0.3);
  --nc-surface: #ffffff;
  --nc-fg: #15171c;
  --nc-muted: #5f6470;
  --nc-subtle: #6b7079; /* 5,0:1 на белом */
  --nc-line: #e5e7eb;
  --nc-line-strong: #d1d5db;
  --nc-chip: rgba(17, 24, 39, 0.05);
  --nc-shadow-hover: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 28px -14px rgba(17, 24, 39, 0.22);
}
html.dark:not(.high-contrast) {
  --nc-accent-ink: #8ea4ff;
  --nc-tint: rgba(47, 85, 255, 0.16);
  --nc-tint-hover: rgba(47, 85, 255, 0.22);
  --nc-accent-line: rgba(110, 137, 255, 0.75);
  --nc-ring: rgba(96, 126, 255, 0.4);
  --nc-surface: #262628;
  --nc-fg: #ececf1;
  --nc-muted: #a1a3ab;
  --nc-subtle: #9a9da6; /* 5,9:1 на #212121, 5,6:1 на карточке */
  --nc-line: rgba(255, 255, 255, 0.1);
  --nc-line-strong: rgba(255, 255, 255, 0.18);
  --nc-chip: rgba(255, 255, 255, 0.07);
  --nc-shadow-hover: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 32px -16px rgba(0, 0, 0, 0.7);
}

/* ------------------------------------------------------------------ шапка */
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) div.text-center > h1 {
  margin-bottom: 10px;
  font-size: 36px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--nc-fg);
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) div.text-center > h1 + p {
  max-width: 42rem;
  font-size: 16px;
  line-height: 24px;
  color: var(--nc-muted);
  text-wrap: balance;
}

/* ------------------------------------------------------------------ поиск */
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) #agent-search {
  height: 48px;
  border: 1px solid var(--nc-line);
  border-radius: 12px;
  background: var(--nc-surface);
  color: var(--nc-fg);
  font-size: 16px;
  box-shadow: none;
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) #agent-search:placeholder-shown {
  padding-right: 16px;
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) #agent-search::placeholder {
  color: var(--nc-subtle);
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) #agent-search:hover:not(:focus) {
  border-color: var(--nc-line-strong);
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) #agent-search:focus {
  border-color: var(--nc-accent);
  box-shadow: 0 0 0 3px var(--nc-ring);
}

/* ------------------------------------------------------------------ вкладки категорий */
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="tablist"] {
  gap: 8px;
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="tablist"] > button[role="tab"] {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--nc-line);
  border-radius: 999px;
  background: var(--nc-surface);
  color: var(--nc-muted);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  transform: none;
  outline: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="tablist"] > button[role="tab"]:hover {
  border-color: var(--nc-line-strong);
  background: var(--nc-surface);
  color: var(--nc-fg);
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="tablist"] > button[role="tab"][aria-selected="true"] {
  border-color: var(--nc-accent-line);
  background: var(--nc-tint);
  color: var(--nc-accent-ink);
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="tablist"] > button[role="tab"]:focus-visible {
  border-color: var(--nc-accent);
  box-shadow: 0 0 0 3px var(--nc-ring);
}
/* подчёркивание активной вкладки — выбор уже виден по заливке */
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="tablist"] > button[role="tab"] > div[aria-hidden="true"] {
  display: none;
}

/* ------------------------------------------------------------------ заголовок раздела */
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) div.text-left > h2 {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nc-fg);
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) div.text-left > h2 + p {
  margin-top: 6px;
  font-size: 15px;
  line-height: 22px;
  color: var(--nc-muted);
}

/* ------------------------------------------------------------------ сетка и карточки */
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="grid"] {
  margin-left: 0;
  margin-right: 0;
  gap: 16px;
}
/* Плитка иконки слева на две строки; справа — название и описание, под ними значок категории. */
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"] {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 0 16px;
  align-items: start;
  height: 100%;
  min-height: 112px;
  padding: 20px;
  border: 1px solid var(--nc-line);
  border-radius: 16px;
  background: var(--nc-surface);
  color: var(--nc-fg);
  box-shadow: none;
  outline: none;
  transition: border-color 120ms ease, box-shadow 160ms ease;
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] {
  height: 100%;
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"]:hover {
  border-color: var(--nc-accent-line);
  background: var(--nc-surface);
  box-shadow: var(--nc-shadow-hover);
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"]:focus-visible {
  border-color: var(--nc-accent);
  box-shadow: 0 0 0 3px var(--nc-ring);
}
/* плитка иконки: светлая подложка, синий глиф; своя иконка агента (avatar) занимает всю плитку */
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"] > div:first-of-type {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"] > div:first-of-type > div {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--nc-tint);
  color: var(--nc-accent-ink);
  box-shadow: none;
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"] > div:first-of-type > div > div {
  width: 48px;
  height: 48px;
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"] > div:first-of-type svg {
  width: 24px;
  height: 24px;
  color: var(--nc-accent-ink);
  stroke-width: 1.75;
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"] > div:first-of-type img {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: none;
}
/* заглушка загрузки (Skeleton после img, пока изображение не загрузилось) — тем же скруглением, что и плитка */
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"] > div:first-of-type img + [aria-hidden="true"] {
  border-radius: 12px;
}
/* текст */
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"] > div:last-child {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-start;
  min-height: 48px;
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"] > div:last-child > label {
  padding-top: 1px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--nc-fg);
  word-break: normal;
  overflow-wrap: anywhere;
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"] > div:last-child > p {
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--nc-muted);
  -webkit-line-clamp: 3;
  line-clamp: 3;
  text-wrap: pretty;
}
/* «Контакты: …» — служебная подпись, сотруднику не нужна */
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"] > div:last-child > div:has(> span.shrink-0 + span.truncate) {
  display: none;
}
/* значок категории: под описанием, в потоке — не перекрывает название; во вкладках «Все» и «Рекомендуемые»
   (там агенты разных категорий) и в поиске по ним; в разделе категории скрыт — дублирует заголовок */
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"] > span:first-child {
  position: static;
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  margin-top: 12px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--nc-chip);
  color: var(--nc-muted);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
}
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="tabpanel"]:not(#category-panel-all):not(#category-panel-promoted) [role="gridcell"] > [role="button"] > span:first-child {
  display: none;
}
/* «Показаны все агенты» */
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="tabpanel"] > div.mt-8.text-center > p {
  color: var(--nc-subtle);
}

/* ------------------------------------------------------------------ телефон */
@media (max-width: 768px) {
  html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="tablist"] {
    padding-left: 0;
    padding-right: 0;
  }
  html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"] {
    min-height: 0;
    padding: 16px;
    gap: 0 14px;
  }
  html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"] > div:last-child > p {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) div.text-left > h2 {
    font-size: 20px;
    line-height: 26px;
  }
}

/* ------------------------------------------------------------------ окно агента (AgentDetailContent) */
/* Окно: [role="dialog"], у которого плитка иконки div.mt-6 и затем блок названия div.mt-3 > h2. */
html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) > div.mt-6:first-child > div {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--nc-tint);
  color: var(--nc-accent-ink);
  overflow: hidden;
}
html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) > div.mt-6:first-child img {
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 18px;
  box-shadow: none;
}
html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) > div.mt-6:first-child svg {
  width: 32px;
  height: 32px;
  color: var(--nc-accent-ink);
  stroke-width: 1.75;
}
html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) > div.mt-3 > h2 {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) > div.mt-4.text-center {
  margin-top: 8px;
  font-size: 15px;
  line-height: 22px;
  color: var(--nc-muted);
  text-wrap: pretty;
}
html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) button.bg-surface-submit {
  border-radius: 10px;
  background: var(--nc-accent);
  color: #ffffff;
}
html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) button.bg-surface-submit:hover {
  background: #2446e6;
}
html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) button.bg-surface-submit:focus-visible {
  box-shadow: 0 0 0 3px var(--nc-ring);
  --tw-ring-shadow: 0 0 #0000;
}
/* «Контакты: …» в окне агента — так же, как на карточке */
html:not(.high-contrast) [role="dialog"] div.mt-3.text-center + div.justify-center:has(> span.shrink-0 + span.truncate) {
  display: none;
}
/* «Примеры задач» и «Что приложить» (блоки section.neurooffice-agent-section добавляет docker/brand.mjs) */
html:not(.high-contrast) [role="dialog"] section.neurooffice-agent-section {
  margin: 20px 24px 0;
  text-align: left;
}
html:not(.high-contrast) [role="dialog"] section.neurooffice-agent-section > h3 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--nc-fg);
}
html:not(.high-contrast) [role="dialog"] section.neurooffice-agent-section > p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--nc-muted);
  text-wrap: pretty;
}
html:not(.high-contrast) [role="dialog"] section.neurooffice-agent-section > ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html:not(.high-contrast) [role="dialog"] section.neurooffice-agent-section > ul > li > button {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--nc-line);
  border-radius: 10px;
  background: var(--nc-surface);
  color: var(--nc-fg);
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  text-wrap: pretty;
  cursor: pointer;
  outline: none;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
html:not(.high-contrast) [role="dialog"] section.neurooffice-agent-section > ul > li > button:hover {
  border-color: var(--nc-accent-line);
  background: var(--nc-tint);
}
html:not(.high-contrast) [role="dialog"] section.neurooffice-agent-section > ul > li > button:focus-visible {
  border-color: var(--nc-accent);
  box-shadow: 0 0 0 3px var(--nc-ring);
}
/* Кнопка со щитом у поиска — «Настройки администратора» (кто может пользоваться каталогом; видна только
   администратору). Доступ к каталогу задан в librechat.yaml (interface.marketplace) и при перезапуске
   применяется заново, поэтому кнопка скрыта: её изменение не сохранилось бы. */
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) button:has(> svg.lucide-shield-ellipsis) {
  display: none;
}

/* ================================================================== иконки агентов в тёмной теме
 * Иконки каталога (branding/agents/*.svg, адрес assets/agents/…) нарисованы под светлую тему: светлая
 * плитка #EEF2FF и синий глиф #2F55FF. В тёмной теме это белые пятна, а глиф #2F55FF на тёмном фоне
 * читается плохо (контраст ниже 3:1). Фильтр invert(0.9) + hue-rotate(180deg) переводит плитку в тёмную
 * (#21242E), глиф — в светло-синий (#7C9BFF, контраст с плиткой 6:1); тон сохраняется. Контур — тем же
 * фильтром: rgba(59, 91, 218) после него становится акцентным #8099FF; контур — только у крупных иконок
 * (карточка каталога, окно агента, пустой экран чата), у мелких (боковая панель, меню, сообщения) он
 * сливается с глифом. Аватары, загруженные в конструкторе, не затрагиваются. В светлой теме иконки
 * не меняются.
 */
html.dark:not(.high-contrast) img[src*="assets/agents/"] {
  filter: invert(0.9) hue-rotate(180deg);
}
html.dark:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="gridcell"] > [role="button"] > div:first-of-type img[src*="assets/agents/"],
html.dark:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) > div.mt-6:first-child img[src*="assets/agents/"],
html.dark:not(.high-contrast) div.relative.size-10 > div.rounded-full > img[src*="assets/agents/"] {
  outline: 1px solid rgba(59, 91, 218, 0.6);
  outline-offset: -1px;
}

/* ================================================================== пустой экран чата с агентом
 * Компонент Landing: контейнер с иконкой div.relative.size-10, под ним название (SplitText) и описание;
 * примеры запросов (ConversationStarters) — первый блок внутри формы чата ([view-transition-name:chat-form]).
 * Оформление иконки и заголовка применяется, только если в контейнере иконки — svg.lucide-feather
 * (агент без аватара, ConvoIcon → AgentAvatar) или img.bg-token-surface-secondary (аватар агента; тот же класс
 * у аватара ассистента — ассистенты на стенде не используются). Общий помощник «НейроОфис» (modelSpec) и модели
 * показывают иконку провайдера или iconURL — их пустой экран не меняется. Примеры запросов — для всех.
 */
html:not(.high-contrast) div.transform-gpu:has(> div > div > div.relative.size-10 > div > :is(svg.lucide-feather, img.bg-token-surface-secondary)) > div > div:first-child {
  flex-direction: column;
  gap: 14px;
}
html:not(.high-contrast) div.relative.size-10:has(> div > :is(svg.lucide-feather, img.bg-token-surface-secondary)) {
  width: 56px;
  height: 56px;
  margin-bottom: 0;
}
html:not(.high-contrast) div.relative.size-10 > div.rounded-full:has(> :is(svg.lucide-feather, img.bg-token-surface-secondary)) {
  border-radius: 14px;
  background: var(--nc-tint);
  color: var(--nc-accent-ink);
  box-shadow: none;
  overflow: hidden;
}
html:not(.high-contrast) div.relative.size-10 > div.rounded-full:has(> :is(svg.lucide-feather, img.bg-token-surface-secondary))::after {
  display: none;
}
html:not(.high-contrast) div.relative.size-10 > div.rounded-full > svg.lucide-feather {
  width: 28px;
  height: 28px;
  color: var(--nc-accent-ink);
  stroke-width: 1.75;
}
html:not(.high-contrast) div.relative.size-10 > div.rounded-full > img.bg-token-surface-secondary {
  border-radius: 14px;
  background: transparent;
}
/* название и описание */
html:not(.high-contrast) div.transform-gpu:has(> div > div > div.relative.size-10 > div > :is(svg.lucide-feather, img.bg-token-surface-secondary)) > div > div:first-child > div:not(.relative) {
  padding: 0;
}
html:not(.high-contrast) div.transform-gpu:has(> div > div > div.relative.size-10 > div > :is(svg.lucide-feather, img.bg-token-surface-secondary)) p.split-parent {
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--nc-fg);
}
html:not(.high-contrast) div.transform-gpu:has(> div > div > div.relative.size-10 > div > :is(svg.lucide-feather, img.bg-token-surface-secondary)) > div > div.animate-fadeIn {
  max-width: 34rem;
  margin-top: 8px;
  font-size: 15px;
  line-height: 22px;
  color: var(--nc-muted);
  text-wrap: pretty;
}
/* «Контакты: …» под описанием */
html:not(.high-contrast) div.transform-gpu > div > div.animate-fadeIn:has(> span.shrink-0 + span.truncate) {
  display: none;
}

/* ------------------------------------------------------------------ примеры запросов */
html:not(.high-contrast) .\[view-transition-name\:chat-form\] > div.flex-wrap.justify-center:first-child:has(> button) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 672px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
}
html:not(.high-contrast) .\[view-transition-name\:chat-form\] > div.flex-wrap.justify-center:first-child > button {
  justify-content: flex-start;
  max-width: none;
  min-height: 56px;
  padding: 10px 16px;
  border: 1px solid var(--nc-line);
  border-radius: 12px;
  background: var(--nc-surface);
  color: var(--nc-fg);
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  box-shadow: none;
  outline: none;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
html:not(.high-contrast) .\[view-transition-name\:chat-form\] > div.flex-wrap.justify-center:first-child > button > span {
  text-wrap: pretty;
}
html:not(.high-contrast) .\[view-transition-name\:chat-form\] > div.flex-wrap.justify-center:first-child > button:hover {
  border-color: var(--nc-accent-line);
  background: var(--nc-tint);
  color: var(--nc-fg);
}
html:not(.high-contrast) .\[view-transition-name\:chat-form\] > div.flex-wrap.justify-center:first-child > button:focus-visible {
  border-color: var(--nc-accent);
  box-shadow: 0 0 0 3px var(--nc-ring);
}
@media (max-width: 640px) {
  html:not(.high-contrast) .\[view-transition-name\:chat-form\] > div.flex-wrap.justify-center:first-child:has(> button) {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-bottom: 16px;
  }
  html:not(.high-contrast) .\[view-transition-name\:chat-form\] > div.flex-wrap.justify-center:first-child > button {
    min-height: 44px;
  }
}

/* ================================================================== просмотр файлов
 * Правила раздела действуют во всех темах, в том числе высокой контрастности: они не меняют цвета,
 * только раскладку (селекторы начинаются с «html » — так их пропускает проверка branding-catalog).
 *
 * Пока справа открыт просмотр файла (панель #artifacts-panel в группе react-resizable-panels), колонка чата
 * узкая, и полоса навигации по сообщениям (nav с сочетанием Shift+Alt+M у правого края чата) ложится поверх
 * текста и кнопок скачивания. На это время полоса скрыта; после закрытия просмотра возвращается.
 */
html [data-group]:has(> #artifacts-panel) nav[aria-keyshortcuts="Shift+Alt+M"] {
  display: none;
}

/* Выдвижной лист просмотра на экранах до 868 px (#artifact-viewer с role="dialog"): высота задана в vh,
 * а в iOS Safari 100vh больше видимой области при показанной адресной строке — верх листа с кнопками
 * уходил бы под неё. Ограничение по динамической высоте окна (dvh) держит лист в видимой области;
 * браузеры без dvh правило пропускают. */
html #artifact-viewer[role="dialog"] {
  max-height: 100dvh;
}

/* Лист во всю высоту закрывает фон целиком: размытие под ним (backdrop-filter до 32 px) не видно,
 * а считается на каждом кадре — отключаем. Если лист опустить ниже, размытие возвращается. */
html div.fixed.inset-0:has(+ #artifact-viewer[role="dialog"][style*="height: 100vh"]) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ================================================================== чат: шапка, поле ввода, список чатов
 * Шапка чата — div.absolute.top-0.z-20.h-[52px] (компонент Header): в LibreChat фон полупрозрачный, а на
 * широких экранах прозрачный, и текст сообщений при прокрутке проходит под названием агента и закладкой.
 * Фон сплошной, цвет поверхности чата; первое сообщение не закрыто: у списка сообщений отступ сверху 56 px.
 */
html:not(.high-contrast) {
  --nu-active: rgba(47, 85, 255, 0.08);
  --nu-active-hover: rgba(47, 85, 255, 0.12);
}
html.dark:not(.high-contrast) {
  --nu-active: rgba(128, 153, 255, 0.16);
  --nu-active-hover: rgba(128, 153, 255, 0.22);
}
html:not(.high-contrast) div.absolute.top-0.z-20.h-\[52px\].bg-gradient-to-b {
  /* переменные темы LibreChat — тройки RGB */
  background: rgb(var(--presentation));
}

/* ------------------------------------------------------------------ панель под полем ввода */
/* Панель кнопок под полем ввода (div.@container: скрепка, «Поиск», «Выполнить код», сервисы, микрофон).
 * Подписи кнопок LibreChat прячет только по ширине окна (md), поэтому при открытом справа просмотре файла
 * узкая колонка чата переносит кнопки на две-три строки. Панель — контейнер запросов по ширине; уже 640 px
 * у кнопок остаются значки, название — во всплывающей подсказке и в aria-label. */
html:not(.high-contrast) div.\@container.flex-wrap.px-2.pb-2 {
  container-type: inline-size;
}
@container (max-width: 640px) {
  html:not(.high-contrast) div.\@container button > span.hidden.truncate.md\:block,
  html:not(.high-contrast) div.\@container button > svg.hidden.md\:block {
    display: none;
  }
}

/* ------------------------------------------------------------------ меню сервисов */
/* Серая точка «не подключено» у значка сервиса и кнопка-вилка «Подключить» рядом с ним: подключение
 * создаётся само, когда сервис отмечен галкой, поэтому у рабочего сервиса они только сбивают с толку.
 * Цветные точки (подключается, подключено, ошибка, нужен вход) и кнопка повтора при ошибке остаются. */
html:not(.high-contrast) [role="menuitemcheckbox"] div[aria-hidden="true"].rounded-full.bg-status-neutral,
html:not(.high-contrast) [role="menuitemcheckbox"]:has(div[aria-hidden="true"].rounded-full.bg-status-neutral) button:has(> svg.lucide-plug-zap) {
  display: none;
}

/* ------------------------------------------------------------------ список чатов */
/* Открытый чат ([data-testid="convo-item"] с кнопкой aria-current="page"): заливка акцентным оттенком и
 * полужирное название вместо серой заливки с полосой по левому краю. Полосу LibreChat рисует и у чата
 * с открытым меню «…» — она убрана у всех строк. */
html:not(.high-contrast) [data-testid="convo-item"]:has(button[aria-current="page"]) {
  background: var(--nu-active);
}
html:not(.high-contrast) [data-testid="convo-item"]:has(button[aria-current="page"]):hover {
  background: var(--nu-active-hover);
}
html:not(.high-contrast) [data-testid="convo-item"]::before {
  content: none;
}
html:not(.high-contrast) [data-testid="convo-item"] button[aria-current="page"] {
  background: transparent;
  font-weight: 600;
  color: rgb(var(--text-primary));
}

/* ================================================================== ответ: цитаты, таблицы, схемы
 * Разметка ответа модели — div.markdown (prose). */

/* ------------------------------------------------------------------ цитата */
/* В LibreChat — полоса по левому краю, полужирный текст и английские кавычки “…”. Здесь — светло-серый блок
 * без полосы, обычное начертание, русские кавычки «…» (внутренние — „…“). */
html:not(.high-contrast) .markdown blockquote {
  margin: 12px 0;
  padding: 10px 14px;
  border-left: 0;
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.04);
  color: inherit;
  font-style: normal;
  font-weight: 400;
  quotes: "«" "»" "„" "“";
}
html.dark:not(.high-contrast) .markdown blockquote {
  background: rgba(255, 255, 255, 0.05);
}
html:not(.high-contrast) .markdown blockquote p {
  font-style: normal;
  font-weight: 400;
}
html:not(.high-contrast) .markdown blockquote > :first-child {
  margin-top: 0;
}
html:not(.high-contrast) .markdown blockquote > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ числа в таблицах */
/* Ячейку с числом («1 842 000,00», «12,5 %», дата) помечает скрипт страницы (docker/brand.mjs,
 * <script id="neurooffice-ui">): на узком экране число не разрывается на строки, таблица прокручивается
 * по горизонтали (div.markdown-table-wrapper). */
html:not(.high-contrast) .markdown td[data-neurooffice-num] {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ схема на телефоне */
/* Схема (Mermaid) вписывается в ширину колонки: на телефоне блок «Схема» ужимался до нечитаемого мелкого текста,
 * а перетаскивание и масштаб работают только мышью. В колонке уже 600 px схема не мельче 80 % натурального
 * размера (docker/brand.mjs, «схема: не мельче 80 % на узком экране»); до 640 px блок прокручивается
 * по горизонтали (и по вертикали, если выше 70 % экрана), кнопки масштаба не нужны. «Развернуть» в заголовке
 * блока по-прежнему открывает схему на весь экран. */
@media (max-width: 640px) {
  html:not(.high-contrast) .markdown pre div.relative.overflow-hidden.p-4:is(.cursor-grab, .cursor-grabbing) {
    height: auto !important;
    max-height: 70vh;
    padding: 12px;
    overflow: auto;
    overscroll-behavior-x: contain;
  }
  html:not(.high-contrast) .markdown pre div.relative.overflow-hidden.p-4:is(.cursor-grab, .cursor-grabbing) > div.absolute.inset-0 {
    position: relative;
    inset: auto;
    width: max-content;
    min-width: 100%;
    transform: none !important;
  }
  html:not(.high-contrast) .markdown pre div.relative.overflow-hidden.p-4:is(.cursor-grab, .cursor-grabbing) > div.absolute.inset-0 > img {
    max-width: none;
  }
  html:not(.high-contrast) .markdown pre div.relative.overflow-hidden.p-4:is(.cursor-grab, .cursor-grabbing) > div.absolute.bottom-2.right-2 {
    display: none;
  }
}

/* ------------------------------------------------------------------ строка действий */
/* Развёрнутый список «Выполнено действий: N»: вертикальная линия слева от строк (before:w-px) — убрана,
 * строки остаются с отступом под значком. */
html:not(.high-contrast) div.relative.pl-6[class*="before:w-px"]::before {
  content: none;
}

/* ================================================================== меню и настройки */
/* Выбор модели и подменю «Мои агенты»: у активного пункта LibreChat рисует тёмную полосу по левому краю
 * (before:w-0.5). Выбор и так виден по заливке пункта. */
html:not(.high-contrast) [class*="before:w-0.5"]::before {
  content: none;
}

/* Настройки: заголовки групп («Оформление», «Макет») прописными буквами мелким кеглем — обычным регистром,
 * как заголовок раздела. */
html:not(.high-contrast) [role="dialog"] h3.uppercase.tracking-wide {
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: rgb(var(--text-primary));
}

/* ================================================================== онбординг
 * Блоки div.neurooffice-onb на пустом экране чата и в окне агента добавляет docker/brand.mjs (раздел «онбординг»),
 * содержимое рисует скрипт <script id="neurooffice-onb">. Цвета — свои токены с запасными значениями: раздел не
 * зависит от того, как названы токены каталога.
 */
html:not(.high-contrast) {
  --no-accent: var(--nc-accent, #2f55ff);
  --no-accent-ink: var(--nc-accent-ink, #2f55ff);
  --no-tint: var(--nc-tint, #eef2ff);
  --no-ring: var(--nc-ring, rgba(47, 85, 255, 0.3));
  --no-surface: var(--nc-surface, #ffffff);
  --no-fg: var(--nc-fg, #111111);
  --no-muted: var(--nc-muted, #5f6470);
  --no-line: var(--nc-line, #e5e7eb);
  --no-line-strong: var(--nc-line-strong, #d1d5db);
}
html:not(.high-contrast) .neurooffice-onb[hidden] {
  display: none;
}
/* «Что приложить» и чем агент отличается от НейроОфиса — под описанием агента */
html:not(.high-contrast) .neurooffice-onb-top {
  max-width: 40rem;
  margin: -4px auto 20px;
  padding: 0 16px;
  text-align: center;
}
html:not(.high-contrast) .neurooffice-onb-top p {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--no-muted);
  text-wrap: pretty;
}
html:not(.high-contrast) .neurooffice-onb-top p + p {
  margin-top: 6px;
}
html:not(.high-contrast) .neurooffice-onb-top strong {
  font-weight: 600;
  color: var(--no-fg);
}
/* примеры запросов на пустом экране: текст до четырёх строк (в LibreChat — две, и пример с полными данными
   html:not(.high-contrast) обрезался многоточием,
html:not(.high-contrast) как пример,
html:not(.high-contrast) который вставляется в поле ввода) */
html:not(.high-contrast) div:has(+ .neurooffice-onb-bottom) > button > span.line-clamp-2 {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
/* под примерами запросов: «Попробовать на примере» и «Что умеет НейроОфис» */
html:not(.high-contrast) .neurooffice-onb-bottom {
  width: 100%;
  max-width: 44rem;
  margin: -20px auto 24px;
  padding: 0 16px;
  text-align: center;
}
html:not(.high-contrast) .neurooffice-onb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
}
html:not(.high-contrast) .neurooffice-onb-button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--no-line-strong);
  border-radius: 12px;
  background: var(--no-surface);
  color: var(--no-accent-ink);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s, border-color 0.15s;
}
html:not(.high-contrast) .neurooffice-onb-button::-webkit-details-marker {
  display: none;
}
html:not(.high-contrast) .neurooffice-onb-button:hover {
  border-color: var(--no-accent);
  background: var(--no-tint);
}
html:not(.high-contrast) .neurooffice-onb-button:focus-visible,
html:not(.high-contrast) .neurooffice-onb-demo:focus-visible,
html:not(.high-contrast) .neurooffice-onb-help:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--no-ring);
}
html:not(.high-contrast) .neurooffice-onb-help {
  font-size: 14px;
  line-height: 20px;
  color: var(--no-accent-ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  border-radius: 4px;
}
html:not(.high-contrast) .neurooffice-onb-help:hover {
  text-decoration-color: currentColor;
}
/* список примеров раскрывается на всю ширину строки */
html:not(.high-contrast) .neurooffice-onb-menu[open] {
  flex-basis: 100%;
}
html:not(.high-contrast) .neurooffice-onb-menu[open] > .neurooffice-onb-button {
  border-color: var(--no-accent);
  background: var(--no-tint);
}
html:not(.high-contrast) .neurooffice-onb-demos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  text-align: left;
}
html:not(.high-contrast) .neurooffice-onb-demo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--no-line);
  border-radius: 12px;
  background: var(--no-surface);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
html:not(.high-contrast) .neurooffice-onb-demo:hover {
  border-color: var(--no-accent);
  background: var(--no-tint);
}
html:not(.high-contrast) .neurooffice-onb-demo-title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--no-fg);
}
html:not(.high-contrast) .neurooffice-onb-demo-files {
  overflow: hidden;
  font-size: 12px;
  line-height: 18px;
  color: var(--no-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}
html:not(.high-contrast) .neurooffice-onb-try {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
html:not(.high-contrast) .neurooffice-onb-caption {
  font-size: 13px;
  line-height: 18px;
  color: var(--no-muted);
}
html:not(.high-contrast) .neurooffice-onb-status {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--no-muted);
  text-wrap: pretty;
}
html:not(.high-contrast) .neurooffice-onb-status a {
  color: var(--no-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* окно агента: кнопка слева, под текстом «Что приложить» */
html:not(.high-contrast) [role="dialog"] .neurooffice-onb-dialog {
  margin-top: 12px;
}
html:not(.high-contrast) [role="dialog"] .neurooffice-onb-dialog .neurooffice-onb-try {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px 12px;
}
html:not(.high-contrast) [role="dialog"] .neurooffice-onb-dialog .neurooffice-onb-status {
  text-align: left;
}
@media (max-width: 640px) {
  html:not(.high-contrast) .neurooffice-onb-demos {
    grid-template-columns: minmax(0, 1fr);
  }
  html:not(.high-contrast) .neurooffice-onb-bottom {
    margin-top: -12px;
  }
}
/* меню инструментов: пояснение под «Поиском в интернете» */
html:not(.high-contrast) .neurooffice-tool-label {
  display: flex;
  flex-direction: column;
}
html:not(.high-contrast) .neurooffice-tool-label > small {
  max-width: 15rem;
  font-size: 12px;
  line-height: 16px;
  color: var(--no-muted, #5f6470);
  white-space: normal;
}
/* «Артефакты» под полем ввода (docs/artifacts.md): в LibreChat включённая кнопка янтарная (badgeAccents.amber),
 * здесь — в цвете остальных включённых инструментов («Поиск»); стрелка параметров — в том же цвете. */
html:not(.high-contrast) div.flex:has(> button[role="checkbox"][aria-label="Артефакты"]) > button.border-series-4 {
  border-color: rgb(var(--series-1));
  background-color: rgb(var(--series-1) / 0.1);
}
html:not(.high-contrast) div.flex:has(> button[role="checkbox"][aria-label="Артефакты"]) > button.border-series-4:hover {
  background-color: rgb(var(--series-1) / 0.2);
}
/* страница входа: кто выдаёт учётную запись */
html:not(.high-contrast) .neurooffice-login-note {
  max-width: 22rem;
  margin: 20px auto 0;
  text-wrap: balance;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  color: var(--no-muted, #5f6470);
}

/* ================================================================== фирменный стиль: шрифты, цвета, логотип
 * Бренд Дзеты: Golos Text — интерфейс и текст ответов, Martian Grotesk — заголовки, Martian Mono — код и цифры
 * (лицензия SIL OFL 1.1, branding/fonts/OFL-*.txt). Файлы — подмножества «кириллица + латиница + типографские
 * знаки» в WOFF2 (переменные по насыщенности: Golos 400–700, Grotesk 400–700, Mono 400–600; ширина Grotesk и Mono
 * закреплена обычной). docker/brand.mjs кладёт их в assets/fonts/ с хешем содержимого в имени и подставляет эти
 * имена в url() ниже. Цвета: белый #FFFFFF, чернила #111111, акцент #2F55FF; тёмная тема — графит, акцент #8C9BFF.
 * Переменные LibreChat (--surface-*, --text-*, --accent-*, --green-*) переопределяются для светлой и тёмной темы;
 * темы высокой контрастности не затрагиваются. Раздел добавлен отдельным блоком: правила выше не меняются.
 */
@font-face {
  font-family: "Golos Text";
  src: url("fonts/GolosText.a1c46258.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Grotesk";
  src: url("fonts/MartianGrotesk.a101b3f8.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("fonts/MartianMono.6a48601c.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ токены бренда */
html:not(.high-contrast) {
  --nb-font-text: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --nb-font-head: "Martian Grotesk", "Golos Text", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --nb-font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --nb-ink: #111111;
  --nb-accent: #2f55ff;
  --nb-accent-hover: #2446e6;
  --nb-link: #2f55ff;
  --nb-tint: #eef2ff;
  --nb-muted: #5c6270;
  --nb-tile: #f1f2f4;
  --nb-card: #ffffff;
  --theme-font-family: var(--nb-font-text);
  /* LibreChat: зелёная основная кнопка, бирюзовый акцент, фиолетовые активные состояния — в цвета бренда */
  --surface-submit: 17 17 17;
  --surface-submit-hover: 51 51 51;
  --accent-primary: 47 85 255;
  --accent-primary-hover: 36 70 230;
  --brand-purple: 47 85 255;
  --status-success: 47 85 255;
  --status-success-subtle: 238 242 255;
  --status-success-border: 165 182 255;
  --status-success-strong: 47 85 255;
  --status-info: 47 85 255;
  --text-primary: 17 17 17;
  --green-50: 238 242 255;
  --green-100: 224 231 255;
  --green-200: 199 210 254;
  --green-300: 165 182 255;
  --green-400: 110 137 255;
  --green-500: 47 85 255;
  --green-600: 47 85 255;
  --green-700: 36 70 230;
  --green-800: 29 56 196;
}
html.dark:not(.high-contrast) {
  /* графит вместо нейтрально-серого LibreChat (#0d0d0d … #424242) */
  --gray-900: 21 22 26;
  --gray-875: 25 26 31;
  --gray-850: 28 29 34;
  --gray-800: 35 37 43;
  --gray-700: 46 48 56;
  --gray-650: 54 57 66;
  --gray-600: 66 69 79;
  --gray-500: 105 109 122;
  --nb-ink: #ecedf1;
  --nb-accent: #8c9bff;
  --nb-accent-hover: #a5b1ff;
  --nb-link: #8c9bff;
  --nb-tint: rgba(140, 155, 255, 0.14);
  --nb-muted: #a3a7b3;
  --nb-tile: rgba(255, 255, 255, 0.07);
  --nb-card: #1c1d22;
  --surface-primary: 21 22 26;
  --surface-primary-alt: 25 26 31;
  --surface-secondary: 31 32 38;
  --surface-tertiary: 40 42 49;
  --surface-chat: 35 37 43;
  --surface-dialog: 28 29 34;
  --presentation: 21 22 26;
  --header-primary: 28 29 34;
  --text-primary: 236 237 241;
  --surface-submit: 47 85 255;
  --surface-submit-hover: 64 99 255;
  --accent-primary: 140 155 255;
  --accent-primary-hover: 165 177 255;
  --brand-purple: 140 155 255;
  --status-success: 140 155 255;
  --status-success-subtle: 33 38 66;
  --status-success-border: 66 80 160;
  --status-success-strong: 47 85 255;
  --status-info: 140 155 255;
  --green-300: 140 155 255;
  --green-500: 140 155 255;
  --green-600: 110 130 255;
  --green-700: 47 85 255;
  --green-800: 36 70 230;
  --green-900: 33 45 110;
  --green-950: 26 32 70;
  /* карточки каталога и окна агента (токены раздела «каталог агентов») — на графите */
  --nc-surface: #1c1d22;
  --nc-accent-ink: #8c9bff;
}
/* поля ввода в тёмной теме: LibreChat закрашивает их тенью #0d0d0d (webkit-dark-styles) — графитом фона */
html.dark:not(.high-contrast) .webkit-dark-styles,
html.dark:not(.high-contrast) .webkit-dark-styles:focus {
  -webkit-box-shadow: inset 0 0 0 50vh rgb(21 22 26);
}

/* ------------------------------------------------------------------ шрифты */
html:not(.high-contrast) body,
html:not(.high-contrast) .font-theme-ui,
html:not(.high-contrast) .font-sans {
  font-family: var(--nb-font-text);
}
html:not(.high-contrast) :is(input, textarea, select, button) {
  font-family: inherit;
}
/* заголовки: приветствие, каталог, окна, h1–h3 в ответах */
html:not(.high-contrast) :is(.markdown h1, .markdown h2, .markdown h3),
html:not(.high-contrast) p.split-parent,
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) :is(h1, h2),
html:not(.high-contrast) [role="dialog"] h2,
html:not(.high-contrast) .neurooffice-catalog-title,
html:not(.high-contrast) .neurooffice-about-name {
  font-family: var(--nb-font-head);
  letter-spacing: -0.01em;
}
html:not(.high-contrast) .markdown h1 { font-size: 1.5em; line-height: 1.3; font-weight: 600; }
html:not(.high-contrast) .markdown h2 { font-size: 1.25em; line-height: 1.35; font-weight: 600; }
html:not(.high-contrast) .markdown h3 { font-size: 1.075em; line-height: 1.4; font-weight: 600; }
/* приветствие: гротеск шире Golos — кегль на ступень меньше */
html:not(.high-contrast) p.split-parent {
  font-weight: 500;
}
@media (min-width: 640px) {
  html:not(.high-contrast) p.split-parent.sm\:text-4xl {
    font-size: 30px;
    line-height: 40px;
  }
}
/* код, моноширинное и цифры (у блока кода — только сам код: заголовок блока «Схема», «Код» — текстовым шрифтом) */
html:not(.high-contrast) :is(code, kbd, samp, .font-mono) {
  font-family: var(--nb-font-mono);
}
html:not(.high-contrast) pre {
  font-family: var(--nb-font-text);
}
html:not(.high-contrast) .markdown pre code {
  font-size: 0.8125rem;
  line-height: 1.6;
}
html:not(.high-contrast) .markdown :is(td, th) {
  font-variant-numeric: tabular-nums;
}
html:not(.high-contrast) .markdown td[data-neurooffice-num] {
  font-family: var(--nb-font-mono);
  font-size: 0.875em;
}
/* inline-код: обычное начертание, без переноса посреди обозначения, спокойная подложка. Блок строки (inline-block)
   не разрывается: короткое обозначение («ЗК-2026-117») целиком переходит на следующую строку; длинное (путь
   к файлу) не шире колонки и переносится внутри себя, а не выходит за край на телефоне. */
html:not(.high-contrast) .markdown :not(pre) > code {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--nb-tile);
  color: inherit;
  font-size: 0.85em;
  font-weight: 400;
  white-space: normal;
  overflow-wrap: anywhere;
}
html:not(.high-contrast) .markdown :not(pre) > code::before,
html:not(.high-contrast) .markdown :not(pre) > code::after {
  content: none;
}

/* ------------------------------------------------------------------ ссылки */
html:not(.high-contrast) :is(.markdown, .prose) a {
  color: var(--nb-link);
  text-decoration-color: color-mix(in srgb, var(--nb-link) 40%, transparent);
  text-underline-offset: 2px;
}
html:not(.high-contrast) :is(.markdown, .prose) a:hover {
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------ знак НейроОфиса [Н] */
/* Знак — скруглённый квадрат: в круглой рамке LibreChat (rounded-full) углы срезались бы в круг. */
html:not(.high-contrast) :is(div, span).rounded-full:has(> img[src*="assets/mark.svg"]) {
  border-radius: 22%;
}

/* ------------------------------------------------------------------ страница входа */
/* Логотип с надписью «НейроОфис» над формой, а не у края окна. В разметке LibreChat — assets/logo.svg (знак [Н],
   docker/brand.mjs); здесь он заменяется знаком с надписью: logo-full.svg, в тёмной теме — logo-full-dark.svg. */
html:not(.high-contrast) div.relative.flex.min-h-screen.flex-col:has(> div > img[src$="assets/logo.svg"]) {
  justify-content: center;
}
html:not(.high-contrast) div.relative.flex.min-h-screen.flex-col > div.mt-6:has(> img[src$="assets/logo.svg"]) {
  height: 44px;
  margin: auto 0 0;
  padding: 0 24px;
}
html:not(.high-contrast) div.relative.flex.min-h-screen.flex-col:has(> div > img[src$="assets/logo.svg"]) > main {
  flex-grow: 0;
  margin-bottom: auto;
  padding-top: 24px;
}
html:not(.high-contrast) div.relative.flex.min-h-screen.flex-col > div.mt-6 > img[src$="assets/logo.svg"] {
  content: url("logo-full.svg");
}
html.dark:not(.high-contrast) div.relative.flex.min-h-screen.flex-col > div.mt-6 > img[src$="assets/logo.svg"] {
  content: url("logo-full-dark.svg");
}
html:not(.high-contrast) div.relative.flex.min-h-screen.flex-col:has(> div > img[src$="assets/logo.svg"]) main h1 {
  font-family: var(--nb-font-head);
  font-size: 26px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
html:not(.high-contrast) div.relative.flex.min-h-screen.flex-col:has(> div > img[src$="assets/logo.svg"]) main button[type="submit"] {
  border-radius: 12px;
}

/* ------------------------------------------------------------------ левая панель */
/* На широких экранах — подписи под значками: «Новый чат», «Каталог агентов», «История», «Мои файлы».
   «Закладки» и «Настройки MCP» из панели убраны (docker/brand.mjs), «Шаблоны» и «Временный чат» выключены
   в librechat.yaml (interface.prompts, interface.temporaryChat). */
@media (min-width: 1280px) {
  html:not(.high-contrast) aside div.flex.h-full.flex-shrink-0.flex-col.gap-2.border-r:has(> [data-testid="nav-agents-marketplace-button"]) {
    width: 76px;
    align-items: center;
  }
  html:not(.high-contrast) :is(a[data-testid="new-chat-button"], a[data-testid="nav-agents-marketplace-button"], button[data-testid^="nav-panel-"]) {
    width: 64px;
    height: auto;
    min-height: 52px;
    padding: 6px 2px 5px;
    flex-direction: column;
    gap: 3px;
    border-radius: 10px;
  }
  html:not(.high-contrast) :is(a[data-testid="new-chat-button"], a[data-testid="nav-agents-marketplace-button"], button[data-testid^="nav-panel-"])::after {
    content: attr(aria-label);
    max-width: 60px;
    font-size: 11px;
    line-height: 13px;
    font-weight: 500;
    white-space: normal;
    text-align: center;
    color: rgb(var(--text-secondary));
  }
  html:not(.high-contrast) button[data-testid="nav-panel-conversations"]::after {
    content: "История";
  }
  html:not(.high-contrast) :is(button[data-testid^="nav-panel-"][aria-pressed="true"], a[data-testid="nav-agents-marketplace-button"][aria-current="page"])::after {
    color: rgb(var(--text-primary));
  }
}

/* ------------------------------------------------------------------ каталог агентов: ширина, шапка, телефон */
@media (min-width: 1280px) {
  html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) .container.max-w-4xl {
    max-width: 1180px;
  }
  html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="grid"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* липкая шапка (поиск и категории): сплошной фон и тонкий разделитель — карточки уходят под неё, а не срезаются
   на прозрачном краю */
html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) div.sticky.top-0 {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--nc-line);
  background: rgb(var(--presentation));
}
/* телефон: заголовок «Каталог агентов» в строке с кнопкой панели (docker/brand.mjs); у правого края полосы
   категорий — стрелка «дальше»: видно, что полоса прокручивается; отступ справа выводит последнюю категорию
   из-под стрелки */
html:not(.high-contrast) .neurooffice-catalog-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: rgb(var(--text-primary));
  text-align: left;
}
@media (max-width: 768px) {
  html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) div:has(> [role="tablist"]) {
    position: relative;
  }
  html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) [role="tablist"] {
    padding-right: 48px;
  }
  html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) div:has(> [role="tablist"])::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 8px;
    width: 36px;
    background-color: rgb(var(--presentation));
    pointer-events: none;
  }
  html:not(.high-contrast) main:has([role="tablist"] > [id^="category-tab-"]) div:has(> [role="tablist"])::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(50% - 4px - 9px);
    right: 8px;
    width: 18px;
    height: 18px;
    background-color: rgb(var(--text-secondary));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
  }
}

/* ------------------------------------------------------------------ окно агента */
/* Примеры задач на всю ширину окна; «Начать чат» с кнопками «Закрепить» и «Скопировать ссылку» прилипает
   к низу окна и на телефоне не уходит за край; у значков — подписи. */
html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) {
  padding-bottom: 0;
}
html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) section.neurooffice-agent-section {
  margin-left: 0;
  margin-right: 0;
}
html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) > div.mt-4.text-center {
  padding-left: 0;
  padding-right: 0;
}
html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) > div.mb-4.mt-6.flex.justify-center:has(> button.bg-surface-submit) {
  position: sticky;
  bottom: 0;
  z-index: 1;
  flex-wrap: wrap;
  margin: 8px -24px 0;
  padding: 12px 24px 16px;
  border-top: 1px solid var(--nc-line);
  background: rgb(var(--surface-dialog));
}
html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) > div.mb-4.mt-6.flex.justify-center > button.bg-surface-submit {
  order: -1;
  flex: 1 1 100%;
  max-width: none;
  height: 44px;
  font-size: 15px;
}
html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) > div.mb-4.mt-6.flex.justify-center > button[aria-label]:not(.bg-surface-submit) {
  flex: 1 1 0;
  width: auto;
  height: 38px;
  padding: 0 12px;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}
html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) > div.mb-4.mt-6.flex.justify-center > button[aria-label]:not(.bg-surface-submit)::after {
  content: attr(aria-label);
}
@media (max-width: 480px) {
  html:not(.high-contrast) [role="dialog"]:has(> div.mt-6.justify-center + div.mt-3.text-center > h2) > div.mb-4.mt-6.flex.justify-center > button[aria-label]:not(.bg-surface-submit) {
    padding: 0 6px;
    gap: 6px;
    font-size: 13px;
  }
}

/* ------------------------------------------------------------------ файл в ответе: карточка */
/* Строку файла (значок, имя, мелкая плашка «ДОКУМЕНТ», значок скачивания) docker/brand.mjs заменяет карточкой:
   плитка со значком, имя и тип («Документ Word»), кнопки «Открыть» и «Скачать». */
html:not(.high-contrast) .neurooffice-file {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  margin: 8px 0;
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--nc-line);
  border-radius: 12px;
  background: var(--nb-card);
  color: rgb(var(--text-primary));
}
html:not(.high-contrast) .neurooffice-file > button[data-artifact-trigger] {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
html:not(.high-contrast) .neurooffice-file-tile {
  display: flex;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--nb-tile);
  color: rgb(var(--text-primary));
}
html:not(.high-contrast) .neurooffice-file-tile > svg {
  width: 20px;
  height: 20px;
}
html:not(.high-contrast) .neurooffice-file-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
html:not(.high-contrast) .neurooffice-file-name {
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html:not(.high-contrast) .neurooffice-file-kind {
  font-size: 13px;
  line-height: 18px;
  color: var(--nb-muted);
}
html:not(.high-contrast) .neurooffice-file-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}
html:not(.high-contrast) .neurooffice-file-actions > button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--nc-line);
  border-radius: 8px;
  background: transparent;
  color: rgb(var(--text-primary));
  font-size: 13px;
  line-height: 30px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
html:not(.high-contrast) .neurooffice-file-actions > button:hover {
  background: rgb(var(--surface-hover));
}
html:not(.high-contrast) .neurooffice-file button:focus-visible {
  outline: 2px solid var(--nb-accent);
  outline-offset: 2px;
}
html:not(.high-contrast) .neurooffice-file:has(> button[aria-expanded="true"]) {
  border-color: var(--nb-accent);
}
@media (max-width: 480px) {
  html:not(.high-contrast) .neurooffice-file {
    flex-wrap: wrap;
  }
  html:not(.high-contrast) .neurooffice-file-actions {
    width: 100%;
    padding-left: 52px;
  }
}

/* значки вложений (плитка типа файла у сообщения и в поле ввода) — монохромные, без цветных заливок LibreChat */
html:not(.high-contrast) svg[viewBox="0 0 36 36"].h-10 > rect[rx="6"] {
  fill: var(--nb-tile);
}
html:not(.high-contrast) svg[viewBox="0 0 36 36"].h-10 > path[stroke="white"] {
  stroke: var(--nb-ink);
}

/* ------------------------------------------------------------------ панель просмотра файла */
/* Заголовок: имя файла без значка «▷» (у DOCX, XLSX, PPTX вкладка одна — переключателя нет); четыре действия
   с подписями на широком экране: «Обновить», «Во весь экран», «Скачать», «Закрыть». «Скопировать» (копирует
   HTML превью) для документов не нужна. У артефакта (docs/artifacts.md) две вкладки — «Код» и «Предпросмотр» —
   и больше действий («Изменить версию», «Скопировать»): заголовок и кнопки без подписей, как в LibreChat. */
html:not(.high-contrast) #artifact-viewer > div:first-child > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}
html:not(.high-contrast) #artifact-viewer [role="radiogroup"]:not(:has(> button[role="radio"] ~ button[role="radio"])) {
  max-width: 100%;
  min-width: 0;
  padding: 0;
  background: transparent;
}
html:not(.high-contrast) #artifact-viewer [role="radiogroup"]:not(:has(> button[role="radio"] ~ button[role="radio"])) > div.pointer-events-none {
  display: none;
}
html:not(.high-contrast) #artifact-viewer [role="radiogroup"]:not(:has(> button[role="radio"] ~ button[role="radio"])) > button[role="radio"] {
  min-width: 0;
  max-width: 100%;
  padding: 0 4px;
  cursor: default;
}
html:not(.high-contrast) #artifact-viewer [role="radiogroup"]:not(:has(> button[role="radio"] ~ button[role="radio"])) > button[role="radio"] > span:first-child {
  display: none;
}
html:not(.high-contrast) #artifact-viewer [role="radiogroup"]:not(:has(> button[role="radio"] ~ button[role="radio"])) > button[role="radio"] > span.whitespace-nowrap {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
}
html:not(.high-contrast) #artifact-viewer:not(:has(button[role="radio"] ~ button[role="radio"])) div.flex.items-center > button.p-1\.5:not([role]) {
  display: none;
}
@media (min-width: 1280px) {
  html:not(.high-contrast) #artifact-viewer:not(:has(button[role="radio"] ~ button[role="radio"])) > div:first-child > div:last-child {
    flex-shrink: 0;
    gap: 2px;
  }
  html:not(.high-contrast) #artifact-viewer:not(:has(button[role="radio"] ~ button[role="radio"])) > div:first-child > div:last-child > button.size-10[aria-label] {
    width: auto;
    padding: 0 10px;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: rgb(var(--text-secondary));
  }
  html:not(.high-contrast) #artifact-viewer:not(:has(button[role="radio"] ~ button[role="radio"])) > div:first-child > div:last-child > button.size-10[aria-label]:hover {
    color: rgb(var(--text-primary));
  }
  html:not(.high-contrast) #artifact-viewer:not(:has(button[role="radio"] ~ button[role="radio"])) > div:first-child > div:last-child > button.size-10[aria-label] > svg {
    width: 18px;
    height: 18px;
  }
  html:not(.high-contrast) #artifact-viewer:not(:has(button[role="radio"] ~ button[role="radio"])) > div:first-child > div:last-child > button.size-10[aria-label]::after {
    content: attr(aria-label);
  }
  /* «Изменить версию» (появляется, когда в чате несколько файлов или артефактов) — без подписи: иначе имя файла
     в заголовке сжимается до двух букв */
  html:not(.high-contrast) #artifact-viewer:not(:has(button[role="radio"] ~ button[role="radio"])) > div:first-child > div:last-child > button.size-10[aria-label="Изменить версию"]::after {
    content: none;
  }
}

/* Сообщение «Не удалось открыть предпросмотр» (Sandpack, docs/artifacts.md). LibreChat подключает Sandpack без его
   стилей (sandpack-react/unstyled): текст и кнопка «Повторить» оказывались внизу панели без оформления. Здесь — по
   центру панели, кнопка как остальные вторичные кнопки. */
html:not(.high-contrast) #artifact-viewer .sp-preview {
  position: relative;
}
html:not(.high-contrast) #artifact-viewer .sp-overlay.sp-error {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(var(--surface-primary));
  color: rgb(var(--text-primary));
}
html:not(.high-contrast) #artifact-viewer .sp-overlay.sp-error > .sp-error-message {
  display: flex;
  max-width: 26rem;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
html:not(.high-contrast) #artifact-viewer .sp-error-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}
html:not(.high-contrast) #artifact-viewer .sp-overlay.sp-error .sp-error-message p:not(.sp-error-title) {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--text-secondary));
}
html:not(.high-contrast) #artifact-viewer .sp-overlay.sp-error button.sp-button {
  display: inline-flex;
  height: 36px;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid rgb(var(--border-medium, 205 208 216));
  border-radius: 8px;
  background: transparent;
  color: rgb(var(--text-primary));
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
html:not(.high-contrast) #artifact-viewer .sp-overlay.sp-error button.sp-button:hover {
  background: rgb(var(--surface-hover, 236 236 236));
}
html:not(.high-contrast) #artifact-viewer .sp-overlay.sp-error button.sp-button > svg {
  width: 16px;
  height: 16px;
}

/* Вкладка «Код» артефакта: текст кода, пока редактор Monaco загружается с CDN (без доступа к CDN — вместо редактора).
   Фон — тёмный фон редактора LibreChat (#1e1e1e). */
html:not(.high-contrast) #artifact-viewer pre.neurooffice-code-fallback {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8px 16px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 13px/19px Menlo, Monaco, Consolas, "Courier New", monospace;
  color: #d4d4d4;
  tab-size: 2;
}

/* ------------------------------------------------------------------ кнопка «Прокрутить вниз» */
/* Когда сбоку от колонки сообщений есть место, кнопка стоит в нём и не закрывает правый край таблицы. */
html:not(.high-contrast) .scrollbar-gutter-spacer.pointer-events-none.absolute {
  container-type: inline-size;
}
@container (min-width: 1010px) {
  html:not(.high-contrast) .scrollbar-gutter-spacer > div.mx-auto.flex.justify-end > button {
    translate: 60px 0;
  }
}

/* ------------------------------------------------------------------ настройки */
/* разделы настроек: длинное название («Данные и конфиденциальность») переносится, а не выходит за колонку */
html:not(.high-contrast) [role="dialog"] [role="tablist"][aria-orientation="vertical"] > [role="tab"] span.whitespace-nowrap {
  white-space: normal;
  text-align: left;
}

/* ------------------------------------------------------------------ заголовки групп обычным регистром */
/* Мелкие подписи прописными (заголовки групп меню, настроек, разделов) — обычным регистром. */
html:not(.high-contrast) .uppercase {
  text-transform: none;
  letter-spacing: normal;
}

/* ------------------------------------------------------------------ «О программе» */
/* Вкладку собирает docker/brand.mjs: знак, «НейроОфис», версия и сборка, разработчик со знаком [d.t], поддержка. */
html:not(.high-contrast) .neurooffice-about {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: rgb(var(--text-primary));
}
html:not(.high-contrast) .neurooffice-about-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
html:not(.high-contrast) .neurooffice-about-head > img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
}
html:not(.high-contrast) .neurooffice-about-name {
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
}
html:not(.high-contrast) .neurooffice-about-sub {
  font-size: 14px;
  line-height: 20px;
  color: rgb(var(--text-secondary));
}
html:not(.high-contrast) .neurooffice-about-list {
  margin: 0;
}
html:not(.high-contrast) .neurooffice-about-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--nc-line);
  font-size: 14px;
  line-height: 20px;
}
html:not(.high-contrast) .neurooffice-about-row:last-child {
  padding-bottom: 0;
}
html:not(.high-contrast) .neurooffice-about-row > dt {
  color: rgb(var(--text-secondary));
}
html:not(.high-contrast) .neurooffice-about-row > dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
html:not(.high-contrast) .neurooffice-about-row > dd a {
  color: var(--nb-link);
}
html:not(.high-contrast) .neurooffice-about-dev {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html:not(.high-contrast) .neurooffice-about-dev > img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

/* ------------------------------------------------------------------ цитата и «Мои файлы»: доводка */
/* Цитата из нескольких строк: LibreChat задаёт blockquote межстрочный интервал 1rem — строки слипаются. */
html:not(.high-contrast) .markdown blockquote,
html:not(.high-contrast) .markdown blockquote p {
  line-height: 1.6;
}
/* «Мои файлы» в левой панели: колонка даты (25 % ширины, поля по 16 px) не вмещала «26 Oct 2026» — дата
   обрезалась слева. Колонке даты — ширина по содержимому, поля меньше. */
html:not(.high-contrast) aside table.table-fixed:has(td > span.flex.justify-end.text-xs) th:last-child {
  width: 84px !important;
  padding-left: 4px;
  padding-right: 8px;
}
html:not(.high-contrast) aside table.table-fixed td:has(> span.flex.justify-end.text-xs) {
  padding-left: 4px;
  padding-right: 12px;
  white-space: nowrap;
}