/* ============================================================ Общий чат в правой панели. Панель закреплена по правому краю, как левое меню — по левому. Контент страницы отодвигается только когда панель раскрыта: класс chat-collapsed на ставит короткий скрипт в head.tpl. ============================================================ */ :root { /* Ширина панели: столько же занимают отступы страницы, шапки, подвала и выпадающего меню. Раньше число стояло в шести местах. */ --rc-width: 380px; } .rc { position: fixed; right: 0; top: 0; bottom: 0; width: var(--rc-width); /* Выше шапки (1100): с тех пор как фон шапки идёт во всю ширину, при меньшем значении она накрывала панель сверху */ z-index: 1101; display: flex; flex-direction: column; background: var(--card-color); border-left: 1px solid var(--border-card-color); /* Переходы включаются только после первого кадра (chat-anim), иначе панель выезжает при каждой загрузке страницы */ } /* Свёрнутое состояние приходит классом на — он ставится до отрисовки, поэтому панель не мигает при загрузке */ .chat-collapsed .rc { transform: translateX(100%); } .rc__head { flex: 0 0 auto; height: 61px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid var(--border-card-color); } .rc__title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fff; } .rc__title i { font-size: 18px; opacity: .75; } .rc__toggle { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, .55); font-size: 18px; cursor: pointer; text-decoration: none; } .rc__toggle:hover { background: rgba(255, 255, 255, .06); color: #fff; } /* Тело: прокручивается сама лента сообщений, а не панель целиком — поле ввода должно оставаться на виду */ .rc__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 10px 12px 12px; } .rc__body > div { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .rc__body #chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .rc__body #chat form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .rc__body #drop_zone { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .rc__body #chat_messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; } .rc__body #chat_messages::-webkit-scrollbar { width: 6px; } .rc__body #chat_messages::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .1); border-radius: 6px; } /* Кнопка, которая остаётся, когда панель свёрнута */ /* ---------- рельса свёрнутого чата ---------- Панель не исчезает, а сжимается в узкую полосу у правого края: кнопка остаётся на прежнем месте, только стрелки смотрят влево. */ .rc-rail { position: fixed; right: 0; top: 0; bottom: 0; width: 44px; z-index: 1101; display: none; flex-direction: column; align-items: center; gap: 12px; padding-top: 13px; background: var(--card-color); border-left: 1px solid var(--border-card-color); } .chat-collapsed .rc-rail { display: flex; } .rc-rail__toggle, .rc-rail__icon { width: 34px; height: 34px; flex: 0 0 auto; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 18px; cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; } /* Верхняя — ровно та же кнопка, что сворачивает панель */ .rc-rail__toggle { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: #b6b6c2; } .rc-rail__toggle:hover { background: rgba(255, 255, 255, .1); color: #fff; } /* Нижняя — акцентная: по ней видно, что это именно чат */ .rc-rail__icon { background: rgba(95, 101, 220, .16); border: 1px solid rgba(95, 101, 220, .4); color: #a3a7fd; } .rc-rail__icon:hover { background: rgba(95, 101, 220, .26); color: #fff; } /* Подпись боком — как в макете */ .rc-rail__label { writing-mode: vertical-rl; text-orientation: mixed; font-family: Oswald, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .3); user-select: none; } /* Сдвиг страницы: под раскрытую панель или под узкую рельсу. Рельса 44px плюс обычные 30px отступа */ html:not(.chat-collapsed) .page-home-content { padding-right: var(--rc-width); } .chat-collapsed .page-home-content { padding-right: 74px; } .chat-collapsed .header { padding-right: 74px; } .chat-collapsed .contain-footer { padding-right: 74px; } /* padding, а не margin: фон шапки тянется во всю ширину, отступ нужен только содержимому — так же, как у .page-home-content */ html:not(.chat-collapsed) .header { padding-right: var(--rc-width); } /* Выпадающее меню шапки абсолютное и во всю ширину — своя ширина его не ограничивает, поэтому отступ нужен ему отдельно, иначе содержимое уезжает под панель чата */ html:not(.chat-collapsed) .gl-menu { padding-right: var(--rc-width); } .chat-collapsed .gl-menu { padding-right: 74px; } /* Узкие экраны: панель занимает почти весь экран и по умолчанию свёрнута, открывается кнопкой */ @media (max-width: 1500px) { html:not(.chat-collapsed) .page-home-content { padding-right: 30px; } html:not(.chat-collapsed) .header { padding-right: 30px; } html:not(.chat-collapsed) .gl-menu { padding-right: 30px; } } @media (max-width: 700px) { .rc { width: 100%; } } /* ---------- уживаемся с помощником ---------- Кнопка ИИ-помощника и его окно закреплены в правом нижнем углу (modules_extra/ai_assistant/assets: right 24px). Когда панель чата раскрыта, они ложились прямо на поле ввода — сдвигаем их левее на ширину панели. */ html:not(.chat-collapsed) .ai-launcher, html:not(.chat-collapsed) .ai-panel { right: calc(var(--rc-width) + 24px); } @media (max-width: 700px) { html:not(.chat-collapsed) .ai-launcher, html:not(.chat-collapsed) .ai-panel { right: 24px; } } /* ---------- заглушка пустой главной ---------- */ .home-blank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 420px; border: 1px dashed var(--border-card-color); border-radius: 16px; color: rgba(255, 255, 255, .45); } .home-blank__title { font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, .75); } .home-blank__text { font-size: 13px; } /* ---------- подвал ---------- В bottom.css у подвала жёстко прописаны margin-left: 65px и width: calc(100% - 65px) — подгонка под старую ширину левого меню. Из-за этого он не совпадал ни с шапкой (у неё отступ 90px), ни с контентом, а при раскрытой панели чата ещё и уезжал под неё. Считаем от тех же величин, что и остальная обвязка. */ /* Правило про отступы подвала теперь в bottom.css — он подключается позже и всё равно перебил бы здешнее. Тут остаётся только сдвиг под панель чата. */ /* Подвал повторяет отступы .page-home-content, поэтому и под чат отодвигается так же — паддингом, а не полями */ html:not(.chat-collapsed) .contain-footer { padding-right: var(--rc-width); } @media (max-width: 1500px) { html:not(.chat-collapsed) .contain-footer { padding-right: 30px; } } @media (max-width: 700px) { .contain-footer { margin-left: 0; } } /* Анимация — только после первой отрисовки */ .chat-anim .rc { transition: transform 180ms ease; } .chat-anim .page-home-content, .chat-anim .header, .chat-anim .contain-footer { transition: padding-right 180ms ease, margin-right 180ms ease; } /* ---------- заглушка загрузки чата ---------- */ .rc-skeleton { /* Занимает всю высоту ленты: строк заведомо больше, чем влезает, лишние обрезаются — так заглушка выглядит как полный чат, а не как четыре сообщения в пустой панели */ flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 6px 4px 0; } /* Пока заглушка видна, настоящую ленту и крутилку не показываем: иначе на секунду видно и то, и другое. :not(.is-hidden) здесь обязателен. Скрипт заглушку не удаляет, а лишь гасит классом — без этой проверки правило продолжало прятать ленту и после загрузки, и сообщения не появлялись вообще. */ .rc-skeleton:not(.is-hidden) ~ div #chat_messages { display: none; } .rc-skeleton:not(.is-hidden) ~ div .loader { display: none; } .rc-skeleton__row { display: flex; gap: 10px; flex: 0 0 auto; } .rc-skeleton__avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; } .rc-skeleton__lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; padding-top: 3px; } .rc-skeleton__line { height: 9px; border-radius: 5px; width: 100%; } .rc-skeleton__line--name { height: 8px; width: 42%; opacity: .75; } /* Общий блеск: полоса света, бегущая по серому прямоугольнику */ .rc-skeleton__avatar, .rc-skeleton__line { background: linear-gradient( 90deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .11) 45%, rgba(255, 255, 255, .05) 90% ); background-size: 200% 100%; animation: rc-shimmer 1.35s ease-in-out infinite; } @keyframes rc-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } } /* Кому анимация мешает — просто ровный серый */ @media (prefers-reduced-motion: reduce) { .rc-skeleton__avatar, .rc-skeleton__line { animation: none; background: rgba(255, 255, 255, .07); } } .rc-skeleton.is-hidden { display: none; } /* Счётчик пропущенных на иконке рельсы */ .rc-rail__icon { position: relative; } .rc-rail__badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; /* Обводка цветом рельсы вырезает кружок из подложки */ border: 2px solid var(--card-color); background: #ff3b2f; color: #fff; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; } /* Кнопки в шапке панели */ .rc__head-actions { display: flex; align-items: center; gap: 6px; } .rc__sound { width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; background: rgba(255, 255, 255, .04); color: #b6b6c2; font-size: 17px; cursor: pointer; transition: background 140ms ease, color 140ms ease; } .rc__sound:hover { background: rgba(255, 255, 255, .1); color: #fff; } /* Выключенный звук должен читаться с одного взгляда, а не оттенком серого */ .rc__sound.is-off { background: rgba(241, 73, 73, .12); border-color: rgba(241, 73, 73, .3); color: #ff7070; }