/* ==== Sidebar ==== */ .chat-sidebar { width: 240px; background: #e5e5e5; color: #000; display: flex; flex-direction: column; justify-content: space-between; padding: 15px 0; transition: width 0.3s ease; position: fixed; top: 0; left: 0; height: 100%; z-index: 1500; border-right: 1px solid #bbb; font-size: 14px; overflow: hidden; } .chat-sidebar-header { padding: 0 15px 15px 15px; border-bottom: 1px solid #ccc; display: flex; justify-content: space-between; align-items: center; } .chat-sidebar-header h2 { font-size: 16px; margin: 0; color: #000; transition: opacity 0.3s; } /* Навигация */ .chat-sidebar-nav, .chat-sidebar-footer { display: flex; flex-direction: column; } .chat-sidebar-nav a, .chat-sidebar-footer a { display: flex; align-items: center; color: #000; text-decoration: none; padding: 10px 15px; border-radius: 4px; transition: background 0.2s, color 0.2s; white-space: nowrap; overflow: hidden; } .chat-sidebar-nav a span, .chat-sidebar-footer a span { margin-left: 10px; transition: opacity 0.3s, width 0.3s; } .chat-sidebar-nav a:hover, .chat-sidebar-footer a:hover { background: #d1d1d1; color: #000; } /* Мини-режим — центрируем все ссылки */ .chat-sidebar.mini .chat-sidebar-nav a, .chat-sidebar.mini .chat-sidebar-footer a { justify-content: center; padding: 12px 0; } /* Иконки внутри ссылок — сброс наклона, курсивов и baseline */ .chat-sidebar.mini .chat-sidebar-nav a i, .chat-sidebar.mini .chat-sidebar-footer a i { display: inline-block; margin: 0 auto; transform: none; vertical-align: middle; font-style: normal; font-size: 16px; line-height: 1; } /* ==== Принудительное выравнивание иконок ==== */ .chat-sidebar i, .chat-sidebar svg { transform: none !important; font-style: normal !important; vertical-align: middle !important; display: inline-block !important; line-height: 1 !important; margin: 0 !important; } .chat-sidebar.mini .edit-mode-toggle { justify-content: center; } .chat-sidebar.mini .edit-mode-toggle input + .toggle-slider { margin-left: 0; } /* ==== Контент справа ==== */ .main-content { transition: margin-left 0.3s ease; } /* ==== Кнопка свернуть/развернуть ==== */ .chat-sidebar-toggle { background: #e5e5e5; color: #000; border: 1px solid #ccc; padding: 6px 10px; cursor: pointer; border-radius: 4px; font-size: 14px; position: absolute; top: 10px; right: 10px; z-index: 2000; } /* ==== Мини-режим через класс на или ==== */ .sidebar-mini .chat-sidebar { width: 50px; } .sidebar-mini .chat-sidebar .chat-sidebar-header h2, .sidebar-mini .chat-sidebar-nav a span, .sidebar-mini .chat-sidebar-footer a span { opacity: 0; width: 0; pointer-events: none; margin-left: 0; transition: opacity 0.2s, width 0.2s; } .sidebar-mini .chat-sidebar-nav a, .sidebar-mini .chat-sidebar-footer a { display: flex; flex-direction: column; /* иконка сверху, текст снизу */ align-items: center; /* центр по горизонтали */ justify-content: center; /* центр по вертикали */ padding: 12px 0; } .sidebar-mini .chat-sidebar-nav a i, .sidebar-mini .chat-sidebar-footer a i { display: block; margin: 0; /* центрируем через flex родителя */ width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; background-position: center; } .sidebar-mini .container { transform: translateX(calc(-50% + 25px)); /* +50px = ширина мини-sidebar */ transition: transform 0.2s; } /* Для мобильных */ @media (max-width: 768px) { .chat-sidebar { left: -240px; } .chat-sidebar.active { left: 0; } .main-content { margin-left: 0 !important; } }