crm.clientright.ru/layouts/v7/resources/css/ai-drawer.css

/* AI Drawer - основные стили */
.ai-drawer {
    position: fixed;
    right: 0; /* Всегда прижат к правому краю */
    top: 0;
    width: 400px;
    min-width: 300px; /* Минимальная ширина */
    max-width: 50vw; /* Максимальная ширина - половина экрана */
    height: 100vh;
    max-height: 100vh; /* Не превышаем высоту экрана */
    background: #ffffff; /* Чистый белый фон */
    box-shadow: -2px 0 15px rgba(0,0,0,0.1);
    transform: translateX(100%); /* Начально скрыт - сдвинут вправо на 100% своей ширины */
    transition: transform 0.3s ease;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    font-size: 14px; /* Базовый размер шрифта */
    border-left: 1px solid #e9ecef;
    overflow: hidden; /* Предотвращаем выход элементов за пределы */
    box-sizing: border-box; /* Учитываем padding и border в ширине */
}

/* Полоска для изменения ширины */
.ai-drawer-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
    background: transparent;
    z-index: 1000000;
    transition: background 0.2s ease;
}

.ai-drawer-resize-handle:hover {
    background: #007bff;
}

.ai-drawer-resize-handle:active {
    background: #0056b3;
}

/* Визуальная индикация при перетаскивании */
.ai-drawer.resizing {
    transition: none !important;
    user-select: none;
}

/* Убираем transition при изменении размера, чтобы не было задержек */
.ai-drawer.resizing.open {
    transform: translateX(0) !important;
}

.ai-drawer.resizing .ai-drawer-resize-handle {
    background: #007bff;
    width: 4px;
}

.ai-drawer.open {
    transform: translateX(0); /* Показываем - сдвигаем на место */
}

/* Скрываем кнопку AI когда drawer открыт */
body.ai-drawer-open .ai-drawer-toggle {
    display: none !important;
}

/* Кнопка открытия/закрытия */
.ai-drawer-toggle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: #2196F3;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 999998;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-drawer-toggle:hover {
    background: #1976D2;
}

/* Заголовок drawer'а */
.ai-drawer-header {
    padding: 15px;
    background: #007bff; /* Синий фон */
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    border-bottom: 1px solid #0056b3;
    flex-shrink: 0; /* Не сжимается при изменении размера */
    min-height: 50px; /* Минимальная высота для кнопки закрытия */
    box-sizing: border-box;
}

.ai-drawer-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 20px;
}

/* Контент drawer'а */
.ai-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    color: #212529; /* Очень темный текст для максимальной читаемости */
    line-height: 1.6; /* Улучшенная высота строк */
    font-weight: 400; /* Нормальная толщина шрифта */
    background: #f8f9fa; /* Светлый фон для контента */
    display: flex;
    flex-direction: column;
}

/* Панель управления размером шрифта */
.ai-font-controls {
    padding: 10px 15px;
    background: #f8f9fa; /* Светлый фон вместо красного */
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Панель управления аватаркой */
.ai-avatar-controls {
    padding: 10px 15px;
    background: #ffffff; /* Белый фон вместо красного */
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-font-controls label {
    font-size: 12px;
    color: #495057; /* Более темный цвет для лучшей читаемости */
    margin: 0;
    font-weight: 500; /* Немного жирнее для лучшей видимости */
}

.ai-font-controls button {
    padding: 6px 12px;
    border: 1px solid #ced4da;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #495057;
    font-weight: 500;
    transition: all 0.2s ease;
}

.ai-font-controls button:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.ai-font-controls button.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.ai-avatar-controls label {
    font-size: 12px;
    color: #495057;
    margin: 0;
    font-weight: 500;
}

.ai-avatar-controls button {
    padding: 6px 8px;
    border: 1px solid #ced4da;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ai-avatar-controls button:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
    transform: scale(1.05);
}

.ai-avatar-controls button.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

/* Размеры шрифтов */
.ai-drawer.font-small {
    font-size: 12px;
}

.ai-drawer.font-normal {
    font-size: 14px;
}

.ai-drawer.font-large {
    font-size: 16px;
}

.ai-drawer.font-extra-large {
    font-size: 18px;
}

/* Сдвиг основного контента */
.main-container {
    transition: margin-right 0.3s ease;
}

.main-container.drawer-open {
    margin-right: 400px;
}

/* Динамический margin для main-container при изменении ширины drawer */
.main-container.drawer-open[data-drawer-width] {
    margin-right: var(--drawer-width, 400px);
}

/* Плавающий индикатор загрузки */
.ai-loading-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px 30px;
    border-radius: 10px;
    z-index: 10000;
    display: none;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.ai-loading-overlay.show {
    display: block;
}

.ai-loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Улучшенный скролл */
.ai-drawer-content::-webkit-scrollbar {
    width: 8px;
}

.ai-drawer-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.ai-drawer-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.ai-drawer-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Область сообщений */
.ai-chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background: #ffffff;
}

/* Стили для сообщений чата */
.ai-message {
    margin-bottom: 15px;
    padding: 12px;
    border-radius: 10px;
    word-wrap: break-word;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ai-message.user {
    background: #e3f2fd;
    margin-left: 30px;
    color: #1565c0; /* Темно-синий текст для сообщений пользователя */
    flex-direction: row-reverse; /* Аватарка справа для пользователя */
    border: 1px solid #bbdefb;
}

.ai-message.assistant {
    background: #ffffff;
    margin-right: 30px;
    color: #212529; /* Очень темный текст для сообщений ассистента */
    border: 1px solid #e9ecef;
    border-left: 4px solid #007bff; /* Синяя полоска слева */
}

/* Аватарки */
.ai-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    flex-shrink: 0;
}

.ai-avatar.user {
    background: #1565c0;
    color: white;
}

.ai-avatar.assistant {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    animation: avatarPulse 2s ease-in-out infinite;
}

.ai-avatar.assistant::before {
    content: "🤖";
    font-size: 18px;
    animation: avatarBounce 1s ease-in-out infinite alternate;
}

/* Анимации для аватарки ассистента */
@keyframes avatarPulse {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.5);
        transform: scale(1.05);
    }
}

@keyframes avatarBounce {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-2px); }
}

/* Анимация печатания */
@keyframes typing {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.ai-typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    margin: 8px 0;
    font-size: 14px;
    color: #6c757d;
}

.ai-typing-dots {
    display: flex;
    gap: 2px;
}

.ai-typing-dot {
    width: 6px;
    height: 6px;
    background: #007bff;
    border-radius: 50%;
    animation: typing 1.4s infinite;
}

.ai-typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

.ai-typing-text {
    font-style: italic;
    margin-left: 8px;
}

/* Альтернативные аватарки для ассистента */
.ai-avatar.assistant.friendly::before {
    content: "😊";
}

.ai-avatar.assistant.helpful::before {
    content: "💡";
}

.ai-avatar.assistant.smart::before {
    content: "🧠";
}

/* Контент сообщения */
.ai-message-content {
    flex: 1;
    min-width: 0; /* Позволяет тексту переноситься */
}

.ai-message-content p {
    margin: 0 0 5px 0;
    word-wrap: break-word;
    word-break: break-word;
}

.ai-message-content p:last-child {
    margin-bottom: 0;
}

/* Стили для ссылок в сообщениях */
.ai-message-link {
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
    word-break: break-word;
    display: inline-block;
    margin: 2px 0;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.ai-message-link:hover {
    color: #0056b3;
    text-decoration: none;
    background-color: #e7f3ff;
    padding: 2px 6px;
}

.ai-message-link:visited {
    color: #6f42c1;
}

.ai-message-link:active {
    color: #004085;
}

.ai-message-time {
    font-size: 11px;
    color: #6c757d; /* Серый цвет для времени */
    margin-top: 5px;
    font-weight: 400;
}

/* Поле ввода сообщений */
.ai-chat-input-container {
    padding: 15px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    display: flex;
    gap: 10px;
    flex-shrink: 0; /* Не сжимается при изменении размера */
    box-sizing: border-box;
    align-items: center;
}

.ai-chat-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    outline: none;
    font-size: 14px;
    color: #212529;
    background: white;
    transition: border-color 0.2s ease;
}

.ai-chat-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.ai-chat-input::placeholder {
    color: #6c757d;
}

.ai-send-button {
    padding: 10px 16px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.ai-send-button:hover {
    background: #0056b3;
}

.ai-send-button:active {
    background: #004085;
}

.ai-send-button:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

/* Адаптивность */
@media (max-width: 768px) {
    .ai-drawer {
        width: 100%;
        right: 0;
        transform: translateX(100%); /* Начально скрыт на мобильных */
        height: 100vh;
        height: 100dvh; /* Динамическая высота viewport для мобильных */
        display: flex;
        flex-direction: column;
        min-width: 100%;
        max-width: 100%;
    }
    
    /* Скрываем resize handle на мобильных */
    .ai-drawer-resize-handle {
        display: none;
    }
    
    .main-container.drawer-open {
        margin-right: 0;
    }
    
    /* Адаптация для виртуальной клавиатуры */
    .ai-drawer-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    /* Контейнер для сообщений */
    .ai-messages-container {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 15px;
    }
    
    /* Поле ввода на мобильных - перемещаем внутрь content */
    .ai-drawer-content .ai-chat-input-container {
        padding: 12px;
        background: #f8f9fa;
        border-top: 1px solid #dee2e6;
        border-radius: 15px 15px 0 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        display: flex;
        gap: 10px;
        align-items: center;
        flex-shrink: 0;
    }
    
    /* Скрываем поле ввода вне content на мобильных */
    .ai-chat-input-container:not(.ai-drawer-content .ai-chat-input-container) {
        display: none;
    }
    
    /* Показываем поле ввода внутри content на мобильных */
    .ai-drawer-content .ai-chat-input-container {
        display: flex;
    }
    
    /* Увеличиваем размеры для мобильных */
    .ai-chat-input {
        font-size: 16px; /* Предотвращает зум на iOS */
        padding: 12px 15px;
        flex: 1;
        border-radius: 20px;
        border: 1px solid #ced4da;
        min-width: 0;
        max-width: 75%; /* Ограничиваем ширину поля ввода */
    }
    
    .ai-send-button {
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 20px;
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    /* Адаптация заголовка */
    .ai-drawer-header {
        padding: 20px 15px;
        font-size: 16px;
        position: relative; /* Убеждаемся что шапка поднимается вместе с drawer */
        z-index: 1003; /* Выше контента */
    }
    
    /* Адаптация панелей управления */
    .ai-font-controls,
    .ai-avatar-controls {
        padding: 15px;
        flex-wrap: wrap;
        gap: 15px;
        position: relative; /* Убеждаемся что панели поднимаются вместе с drawer */
        z-index: 1002; /* Выше контента */
    }
    
    .ai-font-controls button,
    .ai-avatar-controls button {
        padding: 8px 12px;
        font-size: 14px;
    }
    
    .ai-avatar-controls button {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

/* Дополнительная адаптация для очень маленьких экранов */
@media (max-width: 480px) {
    .ai-drawer-content {
        padding: 10px;
        padding-bottom: 100px; /* Больше места для поля ввода */
    }
    
    .ai-chat-input-container {
        padding: 10px;
        flex-direction: column;
        gap: 10px;
    }
    
    .ai-chat-input {
        width: 100%;
        margin-bottom: 5px;
    }
    
    .ai-send-button {
        width: 100%;
        padding: 15px;
    }
    
    /* Компактные сообщения */
    .ai-message {
        margin-bottom: 10px;
        padding: 8px;
    }
    
    .ai-avatar {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
}

/* Дополнительные стили для адаптации к виртуальной клавиатуре */
.ai-drawer.keyboard-visible {
    height: 100vh;
    height: 100dvh;
    transform: translateY(-300px); /* Поднимаем весь drawer на 300px */
    transition: transform 0.3s ease;
}

.ai-drawer.keyboard-visible .ai-chat-input-container {
    border: 2px solid #007bff !important; /* Более заметная граница при клавиатуре */
    box-shadow: 0 -4px 15px rgba(0,0,0,0.15) !important;
}

/* Улучшенная прокрутка для мобильных */
@media (max-width: 768px) {
    .ai-drawer-content {
        -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iOS */
        scroll-behavior: smooth;
    }
    
    /* Убираем полосы прокрутки на мобильных для экономии места */
    .ai-drawer-content::-webkit-scrollbar {
        width: 0px;
        background: transparent;
    }
    
    /* Но оставляем возможность прокрутки */
    .ai-drawer-content {
        overflow-y: auto;
    }
    
    /* Дополнительная адаптация для очень высоких клавиатур */
    .ai-drawer.keyboard-visible .ai-drawer-content {
        padding-bottom: 180px; /* Разумное место при появлении клавиатуры */
    }
    
    /* Адаптивные стили для разных размеров экрана */
    @media (max-height: 800px) {
        .ai-drawer.keyboard-visible .ai-chat-input-container {
            bottom: 200px; /* Меньше подъем для средних экранов */
        }
    }
    
    @media (max-height: 600px) {
        .ai-drawer.keyboard-visible .ai-chat-input-container {
            bottom: 150px; /* Еще меньше подъем для маленьких экранов */
        }
    }
    
    /* Адаптация для разных высот клавиатуры */
    @media (max-height: 600px) {
        .ai-chat-input-container {
            bottom: 10px; /* Меньше отступ для маленьких экранов */
        }
        
        .ai-drawer.keyboard-visible .ai-chat-input-container {
            bottom: 20px;
        }
    }
    
    @media (max-height: 500px) {
        .ai-chat-input-container {
            bottom: 5px; /* Минимальный отступ для очень маленьких экранов */
        }
        
        .ai-drawer.keyboard-visible .ai-chat-input-container {
            bottom: 15px;
        }
    }
}

/* Стили для десктопной версии */
@media (min-width: 769px) {
    /* Десктопная версия drawer */
    .ai-drawer {
        width: 400px;
        min-width: 300px;
        max-width: 50vw;
        right: 0;
        transform: translateX(100%); /* Начально скрыт на планшетах */
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    /* Десктопная версия контента */
    .ai-drawer-content {
        flex: 1;
        overflow-y: auto;
        padding: 15px;
        display: block; /* Убираем flex для десктопа */
    }
    
    /* Десктопная версия контейнера сообщений */
    .ai-messages-container {
        display: block; /* Убираем flex для десктопа */
        overflow: visible;
        padding: 0;
    }
    
    /* Десктопная версия поля ввода */
    .ai-chat-input-container {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        margin: 15px;
        border-radius: 15px;
        border: 1px solid #dee2e6;
        padding: 12px;
        background: #f8f9fa;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        display: flex;
        gap: 10px;
        align-items: center;
        flex-shrink: 0; /* Не сжимается */
    }
    
    /* Скрываем поле ввода внутри content на десктопе */
    .ai-drawer-content .ai-chat-input-container {
        display: none;
    }
    
    .ai-chat-input {
        max-width: 80%; /* Больше места для поля ввода на десктопе */
        font-size: 14px;
        padding: 10px 12px;
    }
    
    .ai-send-button {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    /* Десктопная версия заголовка */
    .ai-drawer-header {
        padding: 15px;
        font-size: 16px;
        position: relative;
        z-index: auto;
    }
    
    /* Десктопная версия панелей управления */
    .ai-font-controls,
    .ai-avatar-controls {
        padding: 10px 15px;
        position: relative;
        z-index: auto;
    }
    
    /* Отключаем мобильные стили для клавиатуры на десктопе */
    .ai-drawer.keyboard-visible {
        transform: none !important;
        transition: none !important;
    }
    
    .ai-drawer.keyboard-visible .ai-chat-input-container {
        border: 1px solid #dee2e6 !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
    }
}