/*
 * НейроОфис: конструктор агента и кнопки создания своего агента в каталоге (LibreChat v0.8.8).
 * Подключается из index.html при сборке образа (docker/brand.mjs, раздел «конструктор агента»).
 * Форма конструктора — form[aria-label="Agent configuration form"]; блоки «Навыки» и «Примеры задач»
 * (section.neurooffice-builder-skills, div.neurooffice-builder-starters) добавляет brand.mjs.
 * Темы высокой контрастности (html.high-contrast) не затрагиваются.
 */

html:not(.high-contrast) form[aria-label="Agent configuration form"] {
  --nab-fg: #111111;
  --nab-muted: #5c6270;
  --nab-line: rgba(17, 24, 39, 0.12);
  --nab-line-strong: rgba(17, 24, 39, 0.22);
  --nab-hover: rgba(17, 24, 39, 0.04);
  --nab-accent: #2f55ff;
  --nab-tint: #eef2ff;
}
html.dark:not(.high-contrast) form[aria-label="Agent configuration form"] {
  color-scheme: dark;
  --nab-fg: #ecedf1;
  --nab-muted: #a3a7b3;
  --nab-line: rgba(255, 255, 255, 0.1);
  --nab-line-strong: rgba(255, 255, 255, 0.2);
  --nab-hover: rgba(255, 255, 255, 0.05);
  --nab-accent: #8c9bff;
  --nab-tint: rgba(140, 155, 255, 0.14);
}

/* ------------------------------------------------------------------ подписи полей */
/* В LibreChat подписи разделов — мелкие прописные («МОДЕЛЬ», «ИНСТРУКЦИИ»); здесь — обычным текстом. */
html:not(.high-contrast) form[aria-label="Agent configuration form"] .uppercase {
  text-transform: none;
  letter-spacing: normal;
}
html:not(.high-contrast) form[aria-label="Agent configuration form"] label.text-\[11px\],
html:not(.high-contrast) form[aria-label="Agent configuration form"] .text-\[11px\].font-medium.text-text-secondary {
  font-size: 13px;
  font-weight: 600;
  color: var(--nab-fg);
}

/* ------------------------------------------------------------------ «Новый агент» и «Выбрать» */
/* Кнопки в одну строку по ширине панели: «Выбрать» не выходит за край. */
html:not(.high-contrast) form[aria-label="Agent configuration form"] div.flex.w-full.gap-2:has(> button[aria-label][type="button"].w-full) > button {
  min-width: 0;
}
html:not(.high-contrast) form[aria-label="Agent configuration form"] div.flex.w-full.gap-2:has(> button[aria-label][type="button"].w-full) > button.w-full {
  flex: 1 1 auto;
  width: auto;
}
html:not(.high-contrast) form[aria-label="Agent configuration form"] div.flex.w-full.gap-2:has(> button[aria-label][type="button"].w-full) > button:last-child {
  flex: 0 0 auto;
}

/* Нижняя строка: «Удалить», «Доступ», «Дублировать», «Сохранить» — в ширину панели, без выхода за левый край. */
html:not(.high-contrast) form[aria-label="Agent configuration form"] div.flex.items-center.justify-end.gap-2:has(> button[type="submit"]) > * {
  flex: 0 0 auto;
  min-width: 0;
}
html:not(.high-contrast) form[aria-label="Agent configuration form"] div.flex.items-center.justify-end.gap-2:has(> button[type="submit"]) > button[type="submit"] {
  flex: 1 1 auto;
  width: auto;
}

/* ------------------------------------------------------------------ навыки */
.neurooffice-builder-skills {
  margin: 0 0 12px;
}
.neurooffice-builder-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.neurooffice-builder-head h3,
.neurooffice-builder-starters > label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  color: var(--nab-fg, inherit);
}
.neurooffice-builder-count {
  font-size: 12px;
  color: var(--nab-muted, inherit);
}
.neurooffice-builder-note {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 17px;
  color: var(--nab-muted, inherit);
}
.neurooffice-builder-groups {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nab-line, rgba(0, 0, 0, 0.12));
  border-radius: 10px;
  overflow: hidden;
}
.neurooffice-builder-group + .neurooffice-builder-group {
  border-top: 1px solid var(--nab-line, rgba(0, 0, 0, 0.12));
}
.neurooffice-builder-group > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--nab-fg, inherit);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.neurooffice-builder-group > summary::-webkit-details-marker {
  display: none;
}
.neurooffice-builder-group > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin: 0 2px 0 1px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.neurooffice-builder-group[open] > summary::before {
  transform: rotate(45deg);
}
.neurooffice-builder-group > summary:hover {
  background: var(--nab-hover, rgba(0, 0, 0, 0.04));
}
.neurooffice-builder-group > summary:focus-visible {
  outline: 2px solid var(--nab-accent, #2f55ff);
  outline-offset: -2px;
}
.neurooffice-builder-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--nab-tint, #eef2ff);
  color: var(--nab-accent, #2f55ff);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}
.neurooffice-builder-group > ul {
  margin: 0;
  padding: 0 4px 6px;
  list-style: none;
}
.neurooffice-builder-skill {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.neurooffice-builder-skill:hover {
  background: var(--nab-hover, rgba(0, 0, 0, 0.04));
}
.neurooffice-builder-skill > input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--nab-accent, #2f55ff);
  cursor: pointer;
}
.neurooffice-builder-skill > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.neurooffice-builder-skill-title {
  font-size: 13px;
  line-height: 18px;
  color: var(--nab-fg, inherit);
}
.neurooffice-builder-skill-desc {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  line-height: 16px;
  color: var(--nab-muted, inherit);
}

/* ------------------------------------------------------------------ примеры задач */
.neurooffice-builder-starters {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 12px;
}
.neurooffice-builder-starters > textarea {
  width: 100%;
  min-height: 92px;
  padding: 8px 12px;
  border: 1px solid var(--nab-line-strong, rgba(0, 0, 0, 0.2));
  border-radius: 8px;
  background: transparent;
  color: var(--nab-fg, inherit);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  resize: vertical;
}
.neurooffice-builder-starters > textarea:focus {
  outline: none;
  border-color: var(--nab-accent, #2f55ff);
  box-shadow: 0 0 0 3px rgba(47, 85, 255, 0.18);
}
.neurooffice-builder-starters > .neurooffice-builder-note {
  margin: 0;
}

/* ------------------------------------------------------------------ каталог: «Создать своего агента» */
html:not(.high-contrast) .neurooffice-create-agent {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #111111;
  border-radius: 10px;
  background: #111111;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
html:not(.high-contrast) .neurooffice-create-agent:hover {
  background: #333333;
}
html:not(.high-contrast) .neurooffice-create-agent:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 85, 255, 0.3);
}
html.dark:not(.high-contrast) .neurooffice-create-agent {
  border-color: #2f55ff;
  background: #2f55ff;
}
html.dark:not(.high-contrast) .neurooffice-create-agent:hover {
  background: #4063ff;
}
@media (max-width: 639px) {
  html:not(.high-contrast) .neurooffice-create-agent {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  html:not(.high-contrast) .neurooffice-create-agent > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* значок справки «Как создать своего агента» за кнопкой */
.neurooffice-create-agent-help {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 10px;
  color: #5c616b;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.neurooffice-create-agent-help:hover {
  border-color: rgba(47, 85, 255, 0.45);
  color: #2f55ff;
}
.neurooffice-create-agent-help:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 85, 255, 0.3);
}
html.dark .neurooffice-create-agent-help {
  border-color: rgba(255, 255, 255, 0.24);
  color: #a3a7b3;
}
html.dark .neurooffice-create-agent-help:hover {
  border-color: #8c9bff;
  color: #8c9bff;
}

/* ------------------------------------------------------------------ окно агента: «Создать на основе этого» */
/* Под «Примерами задач» и «Что приложить», над прилипающей к низу окна строкой «Начать чат». */
.neurooffice-agent-derive {
  margin: 20px 0 0;
}
.neurooffice-agent-derive > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 10px;
  background: transparent;
  color: #111111;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.neurooffice-agent-derive > button:hover {
  border-color: rgba(47, 85, 255, 0.45);
  background: rgba(47, 85, 255, 0.05);
}
.neurooffice-agent-derive > button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 85, 255, 0.3);
}
.neurooffice-agent-derive > button > svg {
  flex: 0 0 auto;
  color: #2f55ff;
}
html.dark .neurooffice-agent-derive > button {
  border-color: rgba(255, 255, 255, 0.16);
  color: #ecedf1;
}
html.dark .neurooffice-agent-derive > button:hover {
  border-color: rgba(140, 155, 255, 0.5);
  background: rgba(140, 155, 255, 0.1);
}
html.dark .neurooffice-agent-derive > button > svg {
  color: #8c9bff;
}

/* ------------------------------------------------------------------ левая панель: подпись под значком */
/* «Конструктор агента» не помещается в 60 px подписи (слово «Конструктор» обрезается) — «Мои агенты», как «Мои файлы».
   Заголовок панели и подсказка кнопки остаются «Конструктор агента». Файл подключается раньше neurooffice.css —
   поэтому селектор с aside (специфичнее правила подписей там). */
@media (min-width: 1280px) {
  html:not(.high-contrast) aside button[data-testid="nav-panel-agents"]::after {
    content: "Мои агенты";
  }
}