/* ============================================
   AI AGGREGATOR - SIDE-BY-SIDE VIEW STYLES
   Response groups layout system for multi-model comparison
   Created: November 2024
   Version: 1.0
   ============================================ */

/* ============================================
   TABLE OF CONTENTS
   ============================================
   1. Response Group Base Styles
   2. Vertical Layout (Default)
   3. Side-by-Side Layout (Grid)
   4. Sticky Headers
   5. Scrollbar Styling
   6. Transitions & Animations
   7. Mobile Responsive
   8. Future: Toggle Button Styles
   9. Future: Hide Feature Styles
   10. Mobile Swipe Mode - Карусель для мобильных устройств
   11. Hover Effects
   12. Special Cases
   13. Image Handling
   14. Code Blocks
   15. Loading States
   ============================================ */

/* ============================================
   1. RESPONSE GROUP BASE STYLES
   ============================================ */

   .response-group {
    width: 100%;
    max-width: 750px;
    margin: 0 auto 8px auto; /* Минимальный отступ между группами */
    display: flex;
    flex-direction: column;
    gap: 28px;
    transition: all 0.2s ease;
}

/* Последняя группа перед input - увеличенный отступ для лучшего визуального разделения */
.response-group:last-child {
    margin-bottom: 16px;
}

/* Transition state для плавного переключения */
.response-group.layout-transition {
    opacity: 0.7;
}

/* ============================================
   2. VERTICAL LAYOUT (Default - как сейчас)
   ============================================ */

.response-group.layout-vertical {
    /* Ответы друг под другом - текущее поведение */
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 750px;
}

.response-group.layout-vertical .message {
    /* Каждое сообщение на всю ширину группы */
    max-width: 750px;
    width: 100%;
    margin: 0;
}

/* ============================================
   3. SIDE-BY-SIDE LAYOUT (Grid)
   ============================================ */

.response-group.layout-side-by-side {
    /* Flexbox для колонок рядом - позволяет динамическое сжатие */
    display: flex !important;
    flex-direction: row !important;
    gap: 0; /* Убираем gap, используем border для разделителей */
    width: 100% !important;
    max-width: 100% !important; /* Переопределяем базовый max-width: 750px */
    margin: 0 auto 28px auto;
    align-items: flex-start; /* Исправление наложения: flex-start чтобы избежать растягивания и наложения */
    overflow-x: auto; /* Горизонтальный скролл при большом количестве моделей */
    background: transparent; /* Убираем серый фон */
    box-sizing: border-box;
    position: relative; /* Исправление наложения: относительное позиционирование */
    z-index: 1; /* Исправление наложения: низкий z-index */
}

.response-group.layout-side-by-side .message {
    /* Сообщения в колонках */
    flex: 1 1 0% !important; /* Равномерное распределение - flex-basis: 0% для равных долей */
    min-width: 300px;
    max-width: none !important; /* Переопределяем базовый max-width: 750px из messages.css */
    width: auto !important; /* Автоматическая ширина для flex */
    margin: 0;
    background: var(--color-bg-main);
    display: flex;
    flex-direction: column;
    min-height: auto; /* Исправление наложения: убираем min-height: 100% чтобы избежать растягивания */
    padding: 12px; /* Внутренний отступ */
    box-sizing: border-box;
    position: relative; /* Исправление наложения: относительное позиционирование */
    z-index: 1; /* Исправление наложения: низкий z-index */
    border-right: 1px solid var(--color-border-main); /* Разделитель между колонками вместо серого фона */
}

/* Убираем border у последнего сообщения */
.response-group.layout-side-by-side .message:last-child {
    border-right: none;
}

/* Flexbox для прижатия action buttons к низу */
.response-group.layout-side-by-side .message-body {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto; /* 🆕 Не растягиваем автоматически, только до установленного min-height через JS */
    gap: 12px;
    min-height: 0; /* Предотвращаем растягивание, но JS может установить min-height для выравнивания */
}

.response-group.layout-side-by-side .message-content {
    flex: 1 1 auto; /* 🆕 Растягиваем контент для заполнения пространства до кнопок */
    min-height: 0; /* Исправление наложения: предотвращаем растягивание контента */
    overflow: visible; /* Исправление наложения: разрешаем видимость overflow */
}

.response-group.layout-side-by-side .message-actions {
    margin-top: auto; /* Прижимаем к низу */
    flex-shrink: 0; /* 🆕 Предотвращаем сжатие кнопок действий */
}

/* ============================================
   IMAGE MESSAGES - Отключаем растягивание
   ============================================ */

/* Базовые стили для image в side-by-side */
.response-group.layout-side-by-side .message.has-image {
    flex: none !important;
    min-height: auto !important;
    height: auto !important;
}

.response-group.layout-side-by-side .message.has-image .message-body {
    flex: none !important;
}

.response-group.layout-side-by-side .message.has-image .message-content {
    flex: none !important;
}

.response-group.layout-side-by-side .message.has-image .message-actions {
    margin-top: 12px !important;
}

/* Для одной модели (data-models="1") с картинкой */
.response-group.layout-side-by-side[data-models="1"] .message.has-image {
    max-width: fit-content !important;
    width: auto !important;
    flex: none !important;
    min-height: auto !important;
    height: auto !important;
}

.response-group.layout-side-by-side[data-models="1"] .message.has-image .message-body {
    flex: none !important;
    width: fit-content !important;
}

.response-group.layout-side-by-side[data-models="1"] .message.has-image .message-content {
    flex: none !important;
    width: fit-content !important;
}

/* ============================================
   4. STICKY HEADERS для колонок
   ============================================ */

.response-group.layout-side-by-side .message-header {
    /* Заголовок модели прилипает к верху при скролле */
    position: sticky;
    top: 0;
    background: var(--color-bg-main);
    z-index: 2; /* Исправление наложения: уменьшаем z-index с 10 до 2, чтобы не накладываться на user сообщения */
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-border-main);
    flex-shrink: 0; /* 🆕 Предотвращаем сжатие header при растягивании */
}

/* Убираем divider если есть sticky header */
.response-group.layout-side-by-side .message-divider {
    display: none;
}

/* ============================================
   5. SCROLLBAR STYLING для Side-by-Side
   ============================================ */

/* Firefox */
.response-group.layout-side-by-side {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-secondary) transparent;
}

/* Chrome/Safari/Edge */
.response-group.layout-side-by-side::-webkit-scrollbar {
    height: 8px;
}

.response-group.layout-side-by-side::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

.response-group.layout-side-by-side::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.response-group.layout-side-by-side::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* ============================================
   6. TRANSITIONS & ANIMATIONS
   ============================================ */

/* Плавное появление колонок */
.response-group.layout-side-by-side .message {
    animation: columnFadeIn 0.3s ease;
}

@keyframes columnFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Плавное переключение между layouts */
.response-group {
    transition: 
        grid-template-columns 0.2s ease,
        gap 0.2s ease,
        max-width 0.2s ease,
        opacity 0.2s ease;
}

/* ============================================
   7. MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    /* Базовые стили для mobile */
    .response-group {
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    /* Vertical с меньшими отступами */
    .response-group.layout-vertical {
        gap: 20px;
    }
    
    /* Side-by-side принудительно становится vertical на mobile */
    .response-group.layout-side-by-side {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
        overflow-x: visible;
        background: transparent;
    }
    
    .response-group.layout-side-by-side .message {
        max-width: 100%;
        padding: 0;
    }
    
    /* Sticky header становится обычным */
    .response-group.layout-side-by-side .message-header {
        position: relative;
        border-bottom: none;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    
    /* Восстанавливаем divider на mobile */
    .response-group.layout-side-by-side .message-divider {
        display: block;
    }
}

/* ============================================
   8. TOGGLE BUTTON STYLES
   ============================================ */

/* Header Toggle Button */
.layout-toggle-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s ease;
    flex-shrink: 0;
    margin-right: 12px; /* Отступ от Settings */
}

.layout-toggle-btn:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.layout-toggle-btn svg,
.layout-toggle-btn i[data-lucide] {
    width: 16px;
    height: 16px;
}

/* Disabled state (во время streaming) */
.layout-toggle-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.layout-toggle-btn:disabled:hover {
    background: none;
}

/* Sidebar Toggle Button Container */
.layout-toggle-container {
    padding: 0 8px 12px 8px;
    background: var(--color-bg-sidebar);
    position: relative;
}

/* Sidebar Toggle Group - ChatHub Style */
.layout-toggle-group {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.layout-option-btn {
    flex: 1;
    margin: 0;
    padding: 8px;
    background: var(--color-bg-main);
    border: 1px solid var(--color-border-main);
    border-radius: 6px;
    color: var(--color-text-muted); /* Серый для неактивной */
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    box-sizing: border-box;
}

.layout-option-btn:hover:not(.active) {
    background: var(--color-bg-sidebar);
    border-color: var(--color-border-secondary);
    color: var(--color-text-secondary); /* Темнее при hover */
}

.layout-option-btn.active {
    background: rgba(102, 126, 234, 0.1); /* Светло-синий фон */
    border-color: var(--color-primary);
    color: var(--color-primary); /* Синяя иконка */
    cursor: default;
}

.layout-option-btn svg,
.layout-option-btn i[data-lucide] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Collapsed Sidebar State */
.chat-sidebar.collapsed .layout-toggle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 4px 12px 4px;
}

/* Скрываем toggle group в collapsed состоянии */
.chat-sidebar.collapsed .layout-toggle-group {
    display: none;
}

/* Показываем одну кнопку в collapsed состоянии */
.layout-toggle-sidebar-collapsed-btn {
    display: none;
}

.chat-sidebar.collapsed .layout-toggle-sidebar-collapsed-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.chat-sidebar.collapsed .layout-toggle-sidebar-collapsed-btn:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.chat-sidebar.collapsed .layout-toggle-sidebar-collapsed-btn svg,
.chat-sidebar.collapsed .layout-toggle-sidebar-collapsed-btn i[data-lucide] {
    width: 16px;
    height: 16px;
}

/* Убеждаемся что видимые сообщения занимают всё доступное место */
/* НО ТОЛЬКО если это НЕ single-visible и НЕ одна модель */
.response-group.layout-side-by-side:not(.single-visible):not([data-models="1"]) .message:not(.hidden) {
    flex: 1 1 0% !important; /* Равномерное распределение */
    max-width: none !important;
}

/* При наличии скрытых - видимые делят оставшееся пространство */
/* НО ТОЛЬКО если это НЕ single-visible и НЕ одна модель */
.response-group.layout-side-by-side:not(.single-visible):not([data-models="1"]):has(.message.hidden) .message:not(.hidden) {
    flex: 1 1 0% !important; /* Равномерное распределение оставшегося пространства */
    min-width: 250px;
    max-width: none !important;
}

/* ============================================
   9. HIDE FEATURE STYLES - "ПРИЗРАК"
   ============================================ */

/* Скрытое сообщение в SIDE-BY-SIDE режиме - узкая колонка "призрак" */
.response-group.layout-side-by-side .message.hidden {
    flex: 0 0 60px !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    padding: 12px 8px;
    background: var(--color-bg-sidebar);
    opacity: 0.6;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

.response-group.layout-side-by-side .message.hidden:hover {
    opacity: 0.8;
    background: var(--color-bg-hover);
}

/* Скрываем весь контент в "призраке" */
.response-group.layout-side-by-side .message.hidden .message-content {
    display: none;
}

.response-group.layout-side-by-side .message.hidden .message-divider {
    display: none;
}

/* Header в "призраке" - вертикальный текст */
.response-group.layout-side-by-side .message.hidden .message-header {
    writing-mode: vertical-rl;
    text-align: center;
    transform: rotate(180deg);
    padding: 0;
    margin: 0;
    border: none;
    position: static;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* В свернутом ("призрак") состоянии скрываем глазик в header,
   оставляя только одну кнопку Unhide снизу */
.message.hidden .message-header .header-hide-btn {
    display: none !important;
}

/* Показываем только первую букву модели и emoji */
.response-group.layout-side-by-side .message.hidden .model-name {
    font-size: 11px;
    font-weight: 600;
}

.response-group.layout-side-by-side .message.hidden .model-emoji {
    font-size: 16px;
    margin-bottom: 4px;
}

/* Action buttons в "призраке" - только Unhide кнопка видна */
.response-group.layout-side-by-side .message.hidden .message-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.response-group.layout-side-by-side .message.hidden .message-actions .action-btn:not(.unhide-btn) {
    display: none;
}

.response-group.layout-side-by-side .message.hidden .message-actions .response-time,
.response-group.layout-side-by-side .message.hidden .message-actions .response-cost {
    display: none;
}

/* Unhide кнопка в "призраке" */
.response-group.layout-side-by-side .message.hidden .unhide-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   VERTICAL РЕЖИМ - скрытое сообщение как узкая строка
   ============================================ */

.response-group.layout-vertical .message.hidden {
    max-width: 750px;
    height: 48px;
    padding: 12px 16px;
    background: var(--color-bg-sidebar);
    opacity: 0.6;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.response-group.layout-vertical .message.hidden:hover {
    opacity: 0.8;
    background: var(--color-bg-hover);
}

/* Скрываем контент в vertical режиме */
.response-group.layout-vertical .message.hidden .message-content {
    display: none;
}

.response-group.layout-vertical .message.hidden .message-divider {
    display: none;
}

/* Header в vertical - горизонтальный */
.response-group.layout-vertical .message.hidden .message-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
    position: static;
    flex-shrink: 0;
}

/* Action buttons в vertical */
.response-group.layout-vertical .message.hidden .message-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.response-group.layout-vertical .message.hidden .message-actions .action-btn:not(.unhide-btn) {
    display: none;
}

.response-group.layout-vertical .message.hidden .message-actions .response-time,
.response-group.layout-vertical .message.hidden .message-actions .response-cost {
    display: none;
}

/* ============================================
   MOBILE - скрытое сообщение
   ============================================ */

@media (max-width: 768px) {
.message.hidden {
        height: 48px;
        padding: 12px 16px;
        background: var(--color-bg-sidebar);
        opacity: 0.6;
    }
    
    .message.hidden .message-content {
        display: none;
    }
    
    .message.hidden .message-header {
        display: flex;
        flex-direction: row;
        writing-mode: horizontal-tb;
        transform: none;
    }
}

/* ============================================
   SINGLE VISIBLE - когда осталась 1 видимая модель
   Призраки примыкают вплотную к центральной модели
   ============================================ */

.response-group.layout-side-by-side.single-visible {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: stretch;
    gap: 1px;
    background: transparent;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 28px auto;
}

/* Единственная видимая модель - фиксированная ширина как в vertical */
.response-group.layout-side-by-side.single-visible .message:not(.hidden) {
    flex: 0 0 750px !important;
    max-width: 750px !important;
    min-width: 350px;
    width: 750px !important;
    background: var(--color-bg-main);
}

/* Призраки в single-visible - остаются inline, не absolute */
.response-group.layout-side-by-side.single-visible .message.hidden {
    flex: 0 0 60px;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    background: var(--color-bg-sidebar);
    position: relative;
}

/* ============================================
   ALL HIDDEN - когда все модели скрыты
   ============================================ */

/* Группа с placeholder "All responses hidden" */
.response-group.layout-side-by-side.all-hidden {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: stretch;
    gap: 1px;
    background: transparent;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto 28px auto;
}

/* Placeholder "All responses hidden" - ТОЛЬКО для side-by-side */
.response-group.layout-side-by-side.all-hidden .all-hidden-placeholder {
    flex: 0 0 750px;
    width: 750px;
    max-width: 750px;
    min-width: 350px;
    min-height: 120px;
    padding: 40px;
    background: var(--color-bg-sidebar);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    border-radius: 8px;
}

/* Скрываем placeholder в vertical режиме (на всякий случай) */
.response-group.layout-vertical .all-hidden-placeholder {
    display: none !important;
}

/* Призраки в all-hidden режиме - остаются inline */
.response-group.layout-side-by-side.all-hidden .message.hidden {
    flex: 0 0 60px;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    background: var(--color-bg-sidebar);
    position: relative;
}

/* ============================================
   10. MOBILE SWIPE MODE - Карусель для мобильных устройств
   ============================================ */

/* Базовый контейнер для mobile-swipe */
.response-group.layout-mobile-swipe {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 8px 0 !important; /* Минимальный отступ между группами */
    background: transparent;
    position: relative;
}

/* Последняя группа перед input - еще меньше отступ */
.response-group.layout-mobile-swipe:last-child {
    margin-bottom: 4px !important;
}

/* Убираем верхний margin у первой группы в mobile-swipe */
.messages-container > .response-group.layout-mobile-swipe:first-child {
    margin-top: 0 !important;
}

/* На мобильных убираем верхний padding у messages-container для mobile-swipe */
@media (max-width: 768px) {
    .messages-container:has(.response-group.layout-mobile-swipe) {
        padding-top: 0 !important;
    }
    
    /* Убираем margin-top у первой mobile-swipe группы */
    .messages-container > .response-group.layout-mobile-swipe:first-child {
        margin-top: 0 !important;
    }
}

/* Swiper контейнер */
.response-group.layout-mobile-swipe .swiper {
    width: 100%;
    height: auto;
    overflow: hidden; /* Скрываем overflow для предотвращения горизонтальной прокрутки */
    position: relative;
}

/* Swiper wrapper */
.response-group.layout-mobile-swipe .swiper-wrapper {
    display: flex;
    align-items: flex-start !important; /* КРИТИЧНО: НЕ stretch! Каждый слайд своей высоты */
    width: 100%;
    box-sizing: border-box;
}

/* Один слайд = одна модель */
.response-group.layout-mobile-swipe .swiper-slide {
    display: flex;
    flex-direction: column;
    width: 100% !important; /* Принудительно 100% ширина */
    height: auto !important; /* КРИТИЧНО: высота по контенту */
    min-height: auto !important; /* КРИТИЧНО: убираем min-height: 100% */
    background: var(--color-bg-main);
    box-sizing: border-box;
    flex-shrink: 0; /* Предотвращаем сжатие слайдов */
}

/* ============================================
   STICKY HEADER - Всегда видимый заголовок
   ============================================ */

.response-group.layout-mobile-swipe .slide-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--color-bg-main);
    border-bottom: 1px solid var(--color-border-main);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin: 0;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Точки пагинации слева */
.response-group.layout-mobile-swipe .pagination-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.response-group.layout-mobile-swipe .pagination-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border-secondary);
    transition: all 0.2s ease;
}

.response-group.layout-mobile-swipe .pagination-dot.active {
    background: var(--color-info);
    width: 20px;
    border-radius: 4px;
}

/* Центральный блок: название модели + hide */
.response-group.layout-mobile-swipe .slide-header-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Выравнивание по левому краю */
    min-width: 0;
    gap: 4px; /* Минимальный отступ между названием и иконкой */
}

/* Название модели слева */
.response-group.layout-mobile-swipe .slide-header-center .model-name {
    flex: 0 1 auto;
    text-align: left; /* Выравнивание текста по левому краю */
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-user);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Кнопка Hide в slide-header (как в вертикальном формате) */
.response-group.layout-mobile-swipe .slide-header .header-hide-btn {
    border: none !important;
    background: none !important;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    flex-shrink: 0;
    vertical-align: middle;
    line-height: 1;
    cursor: pointer;
}

.response-group.layout-mobile-swipe .slide-header .header-hide-btn i[data-lucide],
.response-group.layout-mobile-swipe .slide-header .header-hide-btn svg.lucide {
    width: 12px;
    height: 12px;
    stroke-width: 1.5;
    color: var(--color-text-secondary);
    font-weight: 400;
}

.response-group.layout-mobile-swipe .slide-header .header-hide-btn:hover {
    background: var(--color-bg-hover) !important;
    border: none !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.response-group.layout-mobile-swipe .slide-header .header-hide-btn:hover i[data-lucide],
.response-group.layout-mobile-swipe .slide-header .header-hide-btn:hover svg.lucide {
    color: var(--color-text-primary);
}

/* Скрываем кнопку Hide для placeholder сообщений */
.response-group.layout-mobile-swipe .slide-header:has(+ .slide-content .message.placeholder-message) .header-hide-btn {
    display: none !important;
}

/* Стили для кнопки Unhide в slide-header (такие же как для hide) */
.response-group.layout-mobile-swipe .slide-header .header-hide-btn.unhide-btn i[data-lucide],
.response-group.layout-mobile-swipe .slide-header .header-hide-btn.unhide-btn svg.lucide {
    width: 12px;
    height: 12px;
    stroke-width: 1.5;
    color: var(--color-text-secondary);
    font-weight: 400;
}

.response-group.layout-mobile-swipe .slide-header .header-hide-btn.unhide-btn:hover {
    background: var(--color-bg-hover) !important;
    border: none !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.response-group.layout-mobile-swipe .slide-header .header-hide-btn.unhide-btn:hover i[data-lucide],
.response-group.layout-mobile-swipe .slide-header .header-hide-btn.unhide-btn:hover svg.lucide {
    color: var(--color-text-primary);
}

/* Контейнер для стрелок навигации */
.response-group.layout-mobile-swipe .nav-arrows {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
    flex-shrink: 0;
    position: relative;
}

/* Стрелки навигации */
.response-group.layout-mobile-swipe .nav-arrow {
    color: var(--color-text-muted);
    font-size: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    transition: all 0.15s ease;
    user-select: none;
    min-width: 20px;
    height: 32px;
    position: relative;
}

.response-group.layout-mobile-swipe .nav-arrow:hover {
    color: var(--color-info);
    background: rgba(59, 130, 246, 0.1);
}

.response-group.layout-mobile-swipe .nav-arrow:active {
    transform: scale(0.9);
    color: var(--color-info);
    background: rgba(59, 130, 246, 0.2);
}

/* Счетчик "1 of 3" */
.response-group.layout-mobile-swipe .slide-counter {
    font-size: 12px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================
   SLIDE CONTENT - Контент слайда
   ============================================ */

.response-group.layout-mobile-swipe .slide-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    background: var(--color-bg-main);
}

/* Сообщение внутри слайда */
.response-group.layout-mobile-swipe .slide-content .message {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 16px;
    background: transparent;
    border: none;
}

/* Message header внутри слайда (скрываем, есть sticky header) */
.response-group.layout-mobile-swipe .slide-content .message .message-header {
    display: none;
}

/* ============================================
   HIDDEN RESPONSES SLIDE - Слайд со скрытыми
   ============================================ */

.response-group.layout-mobile-swipe .hidden-list-slide {
    background: var(--color-bg-sidebar);
    padding: 20px 16px;
    min-height: 300px;
}

.response-group.layout-mobile-swipe .hidden-list-slide .slide-header {
    background: var(--color-bg-sidebar);
    border-bottom: 1px solid var(--color-border-main);
}

.response-group.layout-mobile-swipe .hidden-list-slide .model-name {
    text-align: left;
    color: var(--color-text-secondary);
}

.response-group.layout-mobile-swipe .hidden-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.response-group.layout-mobile-swipe .hidden-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg-main);
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--color-border-main);
    transition: all 0.2s ease;
}

.response-group.layout-mobile-swipe .hidden-item:active {
    background: var(--color-bg-sidebar);
    transform: scale(0.98);
}

.response-group.layout-mobile-swipe .hidden-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.response-group.layout-mobile-swipe .hidden-item-emoji {
    font-size: 20px;
    flex-shrink: 0;
}

.response-group.layout-mobile-swipe .hidden-item-name {
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-user);
}

.response-group.layout-mobile-swipe .unhide-btn-slide {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--color-border-secondary);
    border-radius: 6px;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.response-group.layout-mobile-swipe .unhide-btn-slide:hover {
    background: var(--color-bg-sidebar);
    border-color: var(--color-text-muted);
}

.response-group.layout-mobile-swipe .unhide-btn-slide:active {
    transform: scale(0.95);
}

/* Иконка в кнопке Unhide - стандартный размер как в остальном интерфейсе */
.response-group.layout-mobile-swipe .unhide-btn-slide i[data-lucide],
.response-group.layout-mobile-swipe .unhide-btn-slide svg.lucide {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ============================================
   ОДНА МОДЕЛЬ - Упрощенный header
   ============================================ */

/* Когда только 1 модель - скрываем стрелку и точки, оставляем только название */
.response-group.layout-mobile-swipe.single-model .pagination-dots {
    display: none;
}

.response-group.layout-mobile-swipe.single-model .nav-arrows {
    display: none;
}

/* Для single model название уже выровнено по левому краю */

/* Одна точка справа для single model */
.response-group.layout-mobile-swipe.single-model .slide-header::after {
    content: '●';
    color: var(--color-border-secondary);
    font-size: 12px;
}

/* ============================================
   ALL HIDDEN - Когда все модели скрыты
   ============================================ */

.response-group.layout-mobile-swipe.all-hidden .hidden-list-slide {
    text-align: center;
}

.response-group.layout-mobile-swipe.all-hidden .model-name {
    text-align: center;
    color: var(--color-text-muted);
}

/* ============================================
   SWIPER TRANSITIONS - Плавные переходы
   ============================================ */

.response-group.layout-mobile-swipe .swiper-slide {
    transition: transform 0.3s ease;
}

/* ============================================
   ACTION BUTTONS В MOBILE SWIPE
   ============================================ */

.response-group.layout-mobile-swipe .message-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--color-border-main);
    background: var(--color-bg-main);
}

.response-group.layout-mobile-swipe .action-btn {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
}

/* ============================================
   RESPONSIVE - Дополнительные правки для очень узких экранов
   ============================================ */

@media (max-width: 360px) {
    .response-group.layout-mobile-swipe .slide-header {
        padding: 10px 12px;
    }
    
    .response-group.layout-mobile-swipe .model-name {
        font-size: 13px;
    }
    
    .response-group.layout-mobile-swipe .pagination-dot {
        width: 6px;
        height: 6px;
    }
    
    .response-group.layout-mobile-swipe .pagination-dot.active {
        width: 16px;
    }
}

/* ============================================
   DESKTOP FALLBACK - На всякий случай
   ============================================ */

@media (min-width: 769px) {
    /* На desktop mobile-swipe не должен применяться, но на всякий случай */
    .response-group.layout-mobile-swipe {
        /* Если вдруг попал на desktop - показываем как side-by-side */
        display: flex;
        flex-direction: row;
    }
    
    .response-group.layout-mobile-swipe .swiper {
        display: none;
    }
}

/* ============================================
   11. HOVER EFFECTS для колонок
   ============================================ */

.response-group.layout-side-by-side .message:hover {
    /* Легкое выделение колонки при hover */
    background: var(--color-bg-sidebar);
    transition: background 0.15s ease;
}

/* ============================================
   12. SPECIAL CASES - Edge Cases
   ============================================ */

/* Одно сообщение в side-by-side = выглядит как vertical */
/* ВСЕГДА центрируется, независимо от других групп */
.response-group.layout-side-by-side[data-models="1"] {
    display: flex !important;
    flex-direction: column !important;
    background: transparent;
    gap: 28px;
    max-width: 750px !important;
    width: 100% !important;
    margin: 0 auto 28px auto !important;
    overflow-x: visible;
    align-items: stretch;
}

.response-group.layout-side-by-side[data-models="1"] .message {
    max-width: 750px !important;
    width: 100% !important;
    margin: 0 !important;
    background: var(--color-bg-main);
    flex: none !important; /* Убираем flex из других стилей */
}

.response-group.layout-side-by-side[data-models="1"] .message-header {
    position: relative;
    border-bottom: none;
    padding-bottom: 12px;
}

/* 🆕 Переопределение для image сообщений в data-models="1" - должно быть после общих правил */
.response-group.layout-side-by-side[data-models="1"] .message.has-image {
    max-width: fit-content !important;
    width: auto !important;
    flex: none !important;
    min-height: auto !important;
    height: auto !important;
}

.response-group.layout-side-by-side[data-models="1"] .message.has-image .message-body {
    flex: none !important;
    width: fit-content !important;
}

.response-group.layout-side-by-side[data-models="1"] .message.has-image .message-content {
    flex: none !important;
    width: fit-content !important;
}

/* 2-4 модели = no horizontal scroll */
.response-group.layout-side-by-side[data-models="2"],
.response-group.layout-side-by-side[data-models="3"],
.response-group.layout-side-by-side[data-models="4"] {
    overflow-x: visible;
}

/* 5+ моделей = horizontal scroll появляется */
.response-group.layout-side-by-side[data-models="5"],
.response-group.layout-side-by-side[data-models="6"],
.response-group.layout-side-by-side[data-models="7"],
.response-group.layout-side-by-side[data-models="8"] {
    overflow-x: visible;
}

/* ============================================
   13. IMAGE HANDLING в Side-by-Side
   ============================================ */

/* Изображения ужимаются в колонках */
.response-group.layout-side-by-side .message-content img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   14. CODE BLOCKS в Side-by-Side
   ============================================ */

/* Code blocks со скроллом в узких колонках */
.response-group.layout-side-by-side .message-content pre {
    max-width: 100%;
    overflow-x: auto;
}

/* ============================================
   15. LOADING STATES
   ============================================ */

/* Placeholder для streaming в side-by-side */
.response-group.layout-side-by-side .placeholder-message {
    opacity: 0.7;
    min-height: 100px;
}

/* ============================================
   END OF SIDE-BY-SIDE STYLES
   ============================================ */

/* Версия файла для отладки */
body::after {
    content: '';
    display: none;
    /* side-by-side.css v1.0 loaded */
}