/* Фирменный стиль Лаборатории ИИ МГЮА. Цветовые токены живут в public/theme.json — Chainlit подставляет их инлайном на , поэтому здесь только то, что переменными не выражается. Селекторы опираются на стабильные id самого Chainlit (#header, #chat-submit, #message-composer) и на класс prose, которым он оборачивает markdown. */ /* Выделение текста — фирменным красным, как на лендинге */ ::selection { background-color: hsl(var(--primary) / 0.18); } /* Кнопка отправки — заливка акцентом, как первичные кнопки лендинга */ #chat-submit:not(:disabled) { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } #chat-submit:not(:disabled):hover { background-color: hsl(var(--primary) / 0.88); } /* Поле ввода подсвечивается акцентом в фокусе, а не нейтральным серым */ #message-composer:focus-within { border-color: hsl(var(--primary)); } /* Ссылки в ответах ассистента и на приветственном экране */ .prose a, #welcome-screen a { color: hsl(var(--primary)); text-underline-offset: 2px; } /* Заголовки чек-листа — плотный набор лендинга (font-bold + tracking-tight) */ .prose h1, .prose h2, .prose h3 { font-weight: 700; letter-spacing: -0.01em; } /* Логотип МГЮА в шапке. Штатный компонент логотипа Chainlit рисуется только на экране входа и в карточках чат-профилей, которых у нас нет, поэтому знак вставляем в левую группу шапки — как логотип в навигации лендинга. Именно в первый дочерний блок, а не в сам #header: у шапки justify-between, и лишний прямой потомок разъехался бы по ширине. */ #header > div:first-of-type::before { content: ""; order: -2; flex: 0 0 auto; width: 34px; height: 34px; margin-right: 10px; background: url("/public/logo_light.png") center / contain no-repeat; } /* Подпись рядом со знаком — тот же локап, что в навигации лендинга (логотип МГЮА + «Лаборатория ИИ»). Псевдоэлементы рисуются после реальных детей контейнера, поэтому оба вытягиваем вперёд через order. */ #header > div:first-of-type::after { content: "Лаборатория ИИ"; order: -1; flex: 0 0 auto; margin-right: 14px; } /* На узких экранах подпись убираем — шапке нужнее место под кнопки */ @media (max-width: 640px) { #header > div:first-of-type::after { display: none; } } /* --- Экран входа --- Chainlit верстает его в две колонки: слева форма, справа картинка из config.ui.login_page_image, а когда та не задана — favicon, растянутый object-cover во всю высоту (src/pages/Login.tsx). Растянутый знак МГЮА выглядит браком, поэтому правую половину убираем целиком и оставляем форму по центру — с тем же локапом, что в шапке чата. */ /* Правая колонка с картинкой — единственный блок с bg-muted на странице */ .grid.min-h-svh > .bg-muted { display: none; } /* Без второй колонки сетка становится одноколоночной, и форма центрируется */ .grid.min-h-svh { grid-template-columns: 1fr; } /* Штатный логотип входа рисуется в 150px — приводим к размеру знака в шапке */ .grid.min-h-svh img.logo { width: 34px; height: 34px; object-fit: contain; } /* Контейнер логотипа: у Chainlit это flex с gap-2, добиваем выравниванием по центру, чтобы подпись села на одну линию со знаком */ .grid.min-h-svh div:has(> img.logo) { align-items: center; } /* Подпись рядом со знаком — тот же локап, что в шапке чата */ .grid.min-h-svh div:has(> img.logo)::after { content: "Лаборатория ИИ"; } /* Общие правила подписи для шапки чата и экрана входа */ #header > div:first-of-type::after, .grid.min-h-svh div:has(> img.logo)::after { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; color: hsl(var(--foreground)); }