/* Механика оформления — общая для всех брендов.
 *
 * Здесь только структура: что показать, что спрятать, где что стоит. Ни одного
 * цвета, шрифта и радиуса напрямую — всё через переменные, которые задаёт тема
 * профиля (brands/<профиль>/theme.css). Версия под другой оригинал — это другая
 * тема, а не второй набор правил.
 *
 * Файл цепляется за разметку LibreChat, поэтому версия образа пинится, а после
 * обновления оформление проверяется глазами.
 */

/* Значения по умолчанию: если тема чего-то не задала, интерфейс не развалится. */
:root {
  --avo-user-bubble: #e8f0fe;
  --avo-user-bubble-text: inherit;
  --avo-bubble-radius: 20px;
  --avo-bubble-padding: 0.625rem 1.125rem;
  --avo-bubble-max-width: min(70%, 34rem);
  --avo-column-width: 48rem;
  --avo-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.dark {
  --avo-user-bubble: #23324a;
}

/* ── 1. Шрифт ──────────────────────────────────────────────────────────────
 * Заводской Inter заметно отличается от того, что человек видит в оригинале.
 */
body,
button,
input,
textarea,
select,
.markdown {
  font-family: var(--avo-font);
}

/* ── 2. Имя отправителя над сообщением ─────────────────────────────────────
 * Ни в одном из оригиналов его нет. Прячем визуально, но оставляем программам
 * чтения с экрана: внутри заголовка лежит подпись «сообщение от…».
 */
.user-turn > h2,
.agent-turn > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── 3. Аватарка слева от реплики ──────────────────────────────────────── */
div:has(> .agent-turn) > .relative.flex-shrink-0,
div:has(> .user-turn) > .relative.flex-shrink-0 {
  display: none;
}

/* ── 4. Реплика клиента — пузырём справа ───────────────────────────────────
 * Главное отличие «заводского» LibreChat: там она идёт плоским текстом слева,
 * как ответ, и переписку тяжело читать глазами.
 */
.user-turn {
  align-items: flex-end;
}

.user-turn .markdown.prose {
  width: auto;
  max-width: var(--avo-bubble-max-width);
  margin-left: auto;
  padding: var(--avo-bubble-padding);
  color: var(--avo-user-bubble-text);
  background: var(--avo-user-bubble);
  border-radius: var(--avo-bubble-radius);
}

/* Поля абзаца внутри пузыря лишние — иначе пузырь раздувается по вертикали */
.user-turn .markdown.prose > p:first-child { margin-top: 0; }
.user-turn .markdown.prose > p:last-child { margin-bottom: 0; }

/* Кнопки под репликой клиента уезжают вправо, к пузырю */
.user-turn .mt-1.flex.justify-start {
  justify-content: flex-end;
}

/* ── 5. Ширина колонки ─────────────────────────────────────────────────────
 * В оригинале строка короче: длинные строки читать тяжелее. Ограничиваем
 * только внутри переписки и поля ввода, не трогая диалоги и настройки.
 */
/* Заводские классы ширины — «max-w-3xl» и экранированный «xl:max-w-4xl»;
 * литерального «max-w-4xl» на странице нет, поэтому прежнее правило не
 * попадало ни в один узел и колонка оставалась шире оригинала. */
main .max-w-3xl,
form:has(#prompt-textarea),
form:has(#prompt-textarea) > div {
  max-width: var(--avo-column-width);
}

/* ── 6. Кнопки под ответом ─────────────────────────────────────────────────
 * В оригинале они появляются при наведении, а не висят всегда. На тач-экранах
 * наведения нет, поэтому там оставляем их видимыми.
 */
@media (hover: hover) {
  .agent-turn .mt-1.flex.justify-start {
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  div:has(> .agent-turn):hover .mt-1.flex.justify-start,
  div:has(> .agent-turn):focus-within .mt-1.flex.justify-start {
    opacity: 1;
  }
}

/* ── 7. Заголовки разделов в боковой панели ────────────────────────────────
 * Заводские — жирные (700). Из-за этого «Проекты» и «Чаты» читаются как
 * заголовки первого уровня и перетягивают внимание на себя; в оригинале это
 * лёгкие серые подписи над списком.
 */
.text-xs.font-bold.text-text-secondary {
  font-weight: var(--avo-nav-heading-weight, 500);
  color: var(--avo-nav-heading, #8f8f8f);
}

/* ── 8. Лишняя кнопка в поле ввода ─────────────────────────────────────────
 * В оригинале слева один «плюс»: вложения и инструменты живут в нём. У нас
 * рядом со скрепкой стоит вторая кнопка с настройками — убираем её.
 */
form button[aria-label="Tools Options"] {
  display: none;
}

/* ── 9. Пустой экран ───────────────────────────────────────────────────────
 * В оригинале там только вопрос и строка ввода — без логотипа над текстом.
 */
.flex.flex-col.items-center.justify-center.gap-2 > .relative.size-10 {
  display: none;
}

/* Вопрос на пустом экране: заводские 36px крупнее оригинала */
.flex.flex-col.items-center.justify-center.gap-2 > p.split-parent {
  font-size: var(--avo-welcome-size, 1.75rem);
}

/* ── 10. Цвет текста ответа ────────────────────────────────────────────────
 * Заводская типографика (класс prose) красит тело текста своим приглушённым
 * серым. Из-за этого ответ выглядит блёклым рядом с остальным интерфейсом —
 * в оригинале он идёт основным цветом текста.
 */
.markdown.prose {
  --tw-prose-body: var(--text-primary);
  --tw-prose-headings: var(--text-primary);
  --tw-prose-bold: var(--text-primary);
  --tw-prose-quotes: var(--text-primary);
  --tw-prose-code: var(--text-primary);
  --tw-prose-invert-body: var(--text-primary);
  --tw-prose-invert-headings: var(--text-primary);
  --tw-prose-invert-bold: var(--text-primary);
  --tw-prose-invert-quotes: var(--text-primary);
  --tw-prose-invert-code: var(--text-primary);
  color: var(--text-primary);
}

/* ── 11. Одна боковая панель вместо двух ───────────────────────────────────
 * Заводской интерфейс держит слева узкую полосу значков, а рядом — панель.
 * В привычном клиенту виде панель одна: полосу прячем, её действия перенесены
 * строками внутрь панели (см. ui.js).
 */
/* Узкая полоса значков прячется, только пока панель развёрнута: в свёрнутом
 * виде она — единственный способ вернуть панель обратно. Класс на документе
 * ставит надстройка (ui.js). Все её кнопки к этому моменту перенесены
 * строками в саму панель. */
html.avo-nav-open .flex.h-full.flex-shrink-0.flex-col.gap-2.border-r.border-border-light {
  display: none;
}

/* Наши строки в панели — под стиль остальных её пунктов */
.avo-nav-row,
.avo-account-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border-radius: 10px;
  font-size: 0.875rem;
  color: var(--text-primary);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.avo-nav-row:hover,
.avo-account-row:hover {
  background: var(--surface-hover, rgba(0, 0, 0, 0.05));
}

.avo-nav-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Строка аккаунта прижата к низу панели, как в оригинале */
.avo-account-row {
  margin-top: auto;
}

.avo-account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--avo-avatar-bg, #6b6b6b);
  color: #fff;
  font-size: 0.75rem;
}

.avo-account-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.avo-account-name {
  font-size: 0.875rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avo-account-plan {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Строку аккаунта кладём в саму панель и прижимаем к низу: nav внутри неё
 * блочный и с обрезкой, обычным потоком туда не встать. */
.avo-account-row {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  width: auto;
  background: var(--surface-primary-alt, transparent);
}

/* Место под строку аккаунта, иначе последняя беседа уезжает под неё */
aside nav {
  padding-bottom: 56px;
}

/* Значок в шапке панели — тем же размером, что и заводские рядом */
.avo-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
}

.avo-icon-button:hover {
  background: var(--surface-hover, rgba(0, 0, 0, 0.05));
}

/* Свёрнутая панель — это узкая полоса значков, как в оригинале. Но раздел
 * «Воспоминания» мы выключили в конфиге, и значок вёл бы в пустоту. */
button[aria-label="Воспоминания"],
button[aria-label="Memories"] {
  display: none;
}

/* Значок сворачивания живёт в самой панели, а не рядом с поиском: при переходе
 * в раздел файлов поиск исчезает и значок пропадал вместе с ним. */
.avo-icon-button[data-avo="collapse"] {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
}

/* Место под него, чтобы не наезжал на первую строку панели */
aside nav {
  padding-top: 8px;
}

/* В свёрнутом виде наш значок не нужен и, что хуже, перекрывает заводскую
 * кнопку разворачивания — панель становится не вернуть. */
html:not(.avo-nav-open) .avo-icon-button[data-avo="collapse"] {
  display: none;
}

/* ── 12. Кнопка вложений ───────────────────────────────────────────────────
 * В оригинале слева «плюс», а не скрепка. Значок рисуем сами: так он не
 * зависит от того, какую иконку положит следующая версия приложения.
 */
form #attach-file-menu-button {
  position: relative;
  color: var(--avo-composer-icon, var(--text-primary));
}

form #attach-file-menu-button svg {
  display: none;
}

form #attach-file-menu-button::before,
form #attach-file-menu-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
  border-radius: var(--avo-plus-stroke, 2px);
}

form #attach-file-menu-button::before {
  width: var(--avo-plus-size, 17px);
  height: var(--avo-plus-stroke, 2px);
}

form #attach-file-menu-button::after {
  width: var(--avo-plus-stroke, 2px);
  height: var(--avo-plus-size, 17px);
}

/* ── 13. Выключенная кнопка отправки ───────────────────────────────────────
 * Заводская гасится до одной десятой прозрачности и превращается в еле
 * заметное пятно. В оригинале справа всегда виден отчётливый круг.
 */
form #send-button:disabled {
  opacity: 1;
  background-color: var(--avo-send-disabled-bg, #cdcdcd);
  cursor: default;
}

/* ── 14. Форма поля ввода ──────────────────────────────────────────────────
 * Скругление ближе к оригиналу, тень — мягкая и широкая вместо резкой тени
 * карточки; в тёмной теме её нет вовсе.
 */
form .rounded-t-3xl {
  border-top-left-radius: var(--avo-composer-radius, 28px);
  border-top-right-radius: var(--avo-composer-radius, 28px);
  box-shadow: var(--avo-composer-shadow, none);
}

@media (min-width: 640px) {
  form .rounded-t-3xl {
    border-radius: var(--avo-composer-radius, 28px);
  }
}

/* ── 15. Ширина боковой панели ─────────────────────────────────────────────
 * Заводская — 360 px, четверть экрана: панель перетягивает на себя место у
 * переписки. В оригинале она заметно уже.
 *
 * Ширину приложение задаёт инлайном, поэтому только с приоритетом. И только
 * при развёрнутой панели: в свёрнутом виде инлайн ставит 52 px, и наш размер
 * сломал бы сворачивание.
 */
html.avo-nav-open aside {
  width: var(--avo-nav-width, 260px) !important;
  min-width: var(--avo-nav-width, 260px) !important;
}

/* ── 16. Фон панели ────────────────────────────────────────────────────────
 * В оригинале панель почти сливается с перепиской, их разделяет тонкая линия,
 * а не заливка. У нас панель была заметно серее.
 */
aside .bg-surface-primary-alt {
  background-color: var(--avo-nav-bg, #ffffff);
}

/* ── 17. Значки у бесед ────────────────────────────────────────────────────
 * У каждой беседы стоял значок робота. В оригинале в списке бесед значков нет
 * вовсе — только название.
 */
nav .group svg.lucide-bot {
  display: none;
}