/*
/* Файл: /modules/chatbot/assets/chatbot.css
/* v. 4.084 | 11.08.2025 15:58
/* ИЗМЕНЕНИЯ:
/* - Удалены все CSS-правила, связанные с кнопками вкладок контактов
/* (.contact-tab-btn, #messenger-contact-tabs).
*/

/* ==================================================================
   1. ВНЕШНИЕ СТИЛИ (Кнопка и контейнер модального окна)
   ================================================================== */

#chatbot-fab {
    position: fixed; 
    bottom: 1.875rem; /* 30px */
    right: 1.875rem; /* 30px */
    width: 3.75rem; /* 60px */
    height: 3.75rem; /* 60px */
    background-color: var(--accent-primary); 
    color: var(--accent-primary-text);
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.2); /* 4px 12px */
    cursor: pointer; 
    z-index: 999;
    transition: transform 0.2s ease-in-out, width 0.2s, height 0.2s;
}

#chatbot-fab:hover { 
    transform: scale(1.1); 
}

#chatbot-modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 50rem; /* 800px */
    height: 80vh;
    max-height: 43.75rem; /* 700px */
    z-index: 1000;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s, box-shadow 0.3s;
    will-change: transform, opacity, box-shadow;
    border-radius: 0.75rem; /* 12px */
    box-shadow: 0 1.875rem 3.75rem -0.9375rem rgba(0, 0, 0, 0.7); /* 30px 60px 15px */
}

body.light-theme #chatbot-modal-container {
    box-shadow: 0 1.875rem 3.75rem -0.9375rem rgba(0, 0, 0, 0.3);
}

#chatbot-modal-container.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Анимация пульсации для FAB на главной странице */
@keyframes pulse-animation {
    0% { box-shadow: 0 0 0 0 rgba(187, 134, 252, 0.7); }
    70% { box-shadow: 0 0 0 1.25rem rgba(187, 134, 252, 0); } /* 20px */
    100% { box-shadow: 0 0 0 0 rgba(187, 134, 252, 0); }
}
@keyframes pulse-animation-light {
    0% { box-shadow: 0 0 0 0 rgba(130, 36, 227, 0.7); }
    70% { box-shadow: 0 0 0 1.25rem rgba(130, 36, 227, 0); } /* 20px */
    100% { box-shadow: 0 0 0 0 rgba(130, 36, 227, 0); }
}

body.home-page #chatbot-fab {
    width: 4.375rem; /* 70px */
    height: 4.375rem; /* 70px */
    animation: pulse-animation 2s infinite;
}
body.light-theme.home-page #chatbot-fab {
    animation-name: pulse-animation-light;
}


/* ==================================================================
   2. ВНУТРЕННИЕ СТИЛИ (Интерфейс мессенджера)
   ================================================================== */

.messenger-body { font-family: inherit; } 

.messenger-main-container { 
    height: 100%; 
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    border-radius: 0.75rem; /* 12px */
    overflow: hidden;
}
.message-container { display: flex; }
#messenger-messages-area .message-container + .message-container {
    margin-top: 0.5rem; /* 8px */
}
.message-container.user-message { justify-content: flex-end; }
.message-container.instructor-message,
.message-container.partner-message { justify-content: flex-start; }
.message-content { display: flex; align-items: flex-start; gap: 0.5rem; /* 8px */ max-width: 90%; }
.message-bubble { 
	max-width: 100%;
	padding: 0.5rem; 
	border-radius: 0.75rem; 
	box-shadow: 0 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 0.1), 0 0.125rem 0.25rem -0.125rem rgb(0 0 0 / 0.1); 
	} /* 4px 6px -1px, 2px 4px -2px */

/* --- НОВЫЙ БЛОК: Увеличенный шрифт специально для мобильных устройств --- */
body.is-mobile-device .message-bubble {
    /* Переопределяем размер шрифта, делая его крупнее */
    font-size: 1.3rem; 
}

.messenger-control-button { border-radius: 9999px; padding: 0.5rem; /* 8px */ transition: all 0.3s; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; outline: none; box-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1); }

.messenger-icon-button {
    background: none;
    border: none;
    border-radius: 9999px; 
    padding: 0.5rem; /* 8px */ 
    transition: all 0.2s; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer;
    color: var(--text-secondary);
}
.messenger-icon-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}
.light-theme .messenger-icon-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#messenger-voice-settings { position: absolute; top: 100%; right: 0; box-shadow: 0 0.3125rem 0.9375rem rgba(0,0,0,0.3); /* 5px 15px */ width: 13.75rem; /* 220px */ z-index: 10; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; padding: 0.75rem; /* 12px */ border-radius: 0.5rem; /* 8px */ }
#messenger-voice-settings.visible { opacity: 1; visibility: visible; }
#messenger-voice-settings label { font-size: 0.75rem; /* 12px */ font-weight: 500; }
#messenger-voice-settings input[type="range"],
#messenger-voice-settings select { width: 100%; border-radius: 0.25rem; /* 4px */ padding: 0.125rem; /* 2px */ }

.copy-btn { background: none; border: none; cursor: pointer; padding: 0.25rem; /* 4px */ border-radius: 50%; opacity: 0; transition: opacity 0.2s, color 0.2s; margin-top: 0.25rem; /* 4px */ flex-shrink: 0; }
.message-content:hover .copy-btn { opacity: 1; }

.related-links-wrapper { margin-top: 0.375rem; /* 6px */ max-width: 80%; }
.related-links-container { display: flex; align-items: baseline; gap: 0.5rem; /* 8px */ flex-wrap: wrap; font-size: 0.75rem; /* 12px */ padding: 0.25rem 0.5rem; /* 4px 8px */ border-radius: 0.5rem; /* 8px */ }
.related-links-title { font-weight: 600; white-space: nowrap; }
.related-link-item a { text-decoration: none; transition: color 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 6.25rem; /* 100px */ }
.related-link-item.first-link a { max-width: 11.25rem; /* 180px */ }
.related-link-item a:hover { text-decoration: underline; }
/* --- НОВЫЙ БЛОК: Стили для разделителя новых сообщений --- */
.new-messages-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1rem 0;
    font-size: 0.75rem; /* 12px */
    text-transform: uppercase;
    color: #9ca3af; /* Цвет для темной темы по умолчанию */
}

.new-messages-divider::before,
.new-messages-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #4b5563; /* Цвет линии для темной темы */
}

.new-messages-divider:not(:empty)::before {
    margin-right: .5em;
}

.new-messages-divider:not(:empty)::after {
    margin-left: .5em;
}
/* -------------------------------------------------------- */

/* ==================================================================
   3. ТЕМНАЯ ТЕМА
   ================================================================== */

.messenger-main-container { 
    background-color: #1f2937;
    border: 0.1875rem solid; /* 3px */
    border-color: #4b5563 #111827 #111827 #4b5563;
}
#messenger-messages-area { background-color: #1f2937; }
.messenger-overflow-y-auto::-webkit-scrollbar-track { background: #374151; }
.messenger-overflow-y-auto::-webkit-scrollbar-thumb { background: #6B7280; }

#messenger-left-panel { background-color: #374151; border-right: 1px solid #111827; }
#messenger-chat-header { background-color: #374151; border-bottom: 1px solid #111827; padding-right: 2.5rem; }
#messenger-input-panel { background-color: #374151; border-top: 1px solid #4b5563; }
#messenger-message-input {
    resize: none; /* Запрещаем ручное изменение размера */
    overflow-y: hidden; /* Скрываем скроллбар, им будет управлять JS */
    min-height: 46px; /* Минимальная высота, равная высоте одной строки */
    max-height: 150px; /* Максимальная высота, чтобы не растягивалось на весь экран */
    line-height: 1.5;
}

#messenger-search-input, #messenger-message-input { background-color: #111827; color: #f9fafb; border: 1px solid #4b5563; }
#messenger-search-input::placeholder, #messenger-message-input::placeholder { color: #9ca3af; }
#messenger-search-input:focus, #messenger-message-input:focus { --tw-ring-color: #8888FF; }
#messenger-chat-title, .contact-item .font-semibold { color: #f9fafb; }
.contact-item:hover { background-color: #4b5563; }
.contact-item.active { background-color: #1f2937; }
.contact-item { padding: 0.1rem; /* 8px - было 12px (p-3), стало 8px (p-2) */ }
.instructor-message .message-bubble,
.partner-message .message-bubble { background-color: #374151; color: #F3F4F6; border-bottom-left-radius: 0; }
.user-message .message-bubble { background-color: #8888FF; color: #121212; border-bottom-right-radius: 0; }
.messenger-control-button { background-color: #4B5563; color: #E0E0E0; }
.messenger-control-button:hover { background-color: #6B7280; }
.messenger-control-button.active { color: #8888FF; }
#messenger-send-button { background-color: #8888FF; color: #121212; }
#messenger-send-button:hover { background-color: #FFFFFF; }
#messenger-voice-settings { background-color: #374151; border: 1px solid #4b5563;}
#messenger-voice-settings label { color: #D1D5DB; }
#messenger-voice-settings input[type="range"], #messenger-voice-settings select { background-color: #4B5563; border: 1px solid #6B7280; color: #E0E0E0; }
.copy-btn { color: #9CA3AF; }
.copy-btn:hover { color: #E5E7EB; }
.copy-btn.copied { color: #4ADE80; }
.related-links-container { background-color: rgba(0,0,0,0.2); }
.related-links-title { color: #9CA3AF; }
.related-link-item a { color: #A5B4FC; }
.related-link-item a:hover { color: #C7D2FE; }

.messenger-icon-button.active { 
    color: var(--accent-primary); 
}

/* Кнопка "Отправить" - всегда яркая */
#messenger-send-button { 
    background-color: var(--accent-primary); 
    color: var(--accent-primary-text); 
}
#messenger-send-button:hover { 
    filter: brightness(1.15);
    color: var(--accent-primary-text);
}


/* ==================================================================
   4. СВЕТЛАЯ ТЕМА
   ================================================================== */

.messenger-main-container.light-theme { 
    background-color: #f9fafb; 
    color: #1f2937;
    border: 0.1875rem solid; /* 3px */
    border-color: #ffffff #d1d5db #d1d5db #ffffff;
}
.light-theme #messenger-messages-area { background-color: #f9fafb; }
.light-theme .messenger-overflow-y-auto::-webkit-scrollbar-track { background: #e5e7eb; }
.light-theme .messenger-overflow-y-auto::-webkit-scrollbar-thumb { background: #9ca3af; }

.light-theme #messenger-left-panel { background-color: #f3f4f6; border-right: 1px solid #d1d5db; }
.light-theme #messenger-chat-header { background-color: #f3f4f6; border-bottom: 1px solid #d1d5db; }
.light-theme #messenger-input-panel { background-color: #f3f4f6; border-top: 1px solid #ffffff; }

.light-theme #messenger-search-input, .light-theme #messenger-message-input { background-color: #ffffff; border: 1px solid #d1d5db; color: #111827; }
.light-theme #messenger-search-input::placeholder, .light-theme #messenger-message-input::placeholder { color: #6b7280; }
.light-theme #messenger-search-input:focus, .light-theme #messenger-message-input:focus { --tw-ring-color: #8224E3; }
.light-theme #messenger-chat-title, .light-theme .contact-item .font-semibold { color: #111827; }
.light-theme .contact-item:hover { background-color: #e5e7eb; }
.light-theme .contact-item.active { background-color: #d1d5db; }
.light-theme .instructor-message .message-bubble { background-color: #e5e7eb; color: #1f2937; }
.light-theme .user-message .message-bubble { background-color: #8224E3; color: #ffffff; }
.light-theme .messenger-control-button { background-color: #e5e7eb; color: #4b5563; }
.light-theme .messenger-control-button:hover { background-color: #d1d5db; }
.light-theme .messenger-control-button.active { color: #8224E3; }
.light-theme #messenger-send-button { background-color: #8224E3; color: #ffffff; }
.light-theme #messenger-send-button:hover { background-color: #6b7280; }
.light-theme #messenger-voice-settings { background-color: #ffffff; border: 1px solid #e5e7eb; }
.light-theme #messenger-voice-settings label { color: #4b5563; }
.light-theme #messenger-voice-settings input[type="range"], .light-theme #messenger-voice-settings select { background-color: #f3f4f6; border: 1px solid #d1d5db; color: #1f2937; }
.light-theme .copy-btn { color: #6b7280; }
.light-theme .copy-btn:hover { color: #1f2937; }
.light-theme .related-links-container { background-color: rgba(0,0,0,0.05); }
.light-theme .related-links-title { color: #4b5563; }
.light-theme .related-link-item a { color: #6366f1; }
.light-theme .related-link-item a:hover { color: #4f46e5; }
/* --- НОВЫЙ БЛОК: Стили для разделителя в светлой теме --- */
.light-theme .new-messages-divider {
    color: #6b7280;
}
.light-theme .new-messages-divider::before,
.light-theme .new-messages-divider::after {
    border-bottom-color: #d1d5db;
}

.light-theme .messenger-icon-button.active { 
    color: #8224E3; 
}

.light-theme #messenger-send-button { 
    background-color: #8224E3; 
    color: #ffffff; 
}
.light-theme #messenger-send-button:hover { 
    filter: brightness(1.15);
    color: #ffffff;
}

/* ================================================================== */
/* --- 5. НОВЫЕ СТИЛИ ДЛЯ КНОПКИ ЗАКРЫТИЯ --- */
/* ================================================================== */
/* Общий стиль для всех кнопок управления в шапке */
#messenger-expand-button,
#messenger-collapse-button,
#messenger-close-button {
    position: relative; /* Убираем absolute, т.к. они теперь в потоке */
    padding: 0.5rem;
    background-color: transparent;
    box-shadow: none;
    color: #9ca3af; /* Нейтральный серый */
}
#messenger-expand-button svg,
#messenger-collapse-button svg,
#messenger-close-button svg {
    width: 1.5rem;  /* 24px */
    height: 1.5rem;
}

#messenger-expand-button:hover,
#messenger-collapse-button:hover {
    background-color: rgba(139, 92, 246, 0.15); /* Полупрозрачный фиолетовый */
    color: #a78bfa; /* Светло-фиолетовый */
}

#messenger-close-button:hover {
    background-color: rgba(239, 68, 68, 0.15); /* Полупрозрачный красный фон */
    color: #ef4444; /* Ярко-красный цвет иконки */
}

.light-theme #messenger-expand-button,
.light-theme #messenger-collapse-button,
.light-theme #messenger-close-button {
    color: #6b7280;
}

.light-theme #messenger-expand-button:hover,
.light-theme #messenger-collapse-button:hover {
    background-color: rgba(130, 36, 227, 0.1);
    color: #8224E3;
}

.light-theme #messenger-close-button:hover {
    background-color: rgba(220, 38, 38, 0.1);
    color: #dc2626;
}



/* ================================================================== */
/* --- 6. СТИЛИ ДЛЯ МЕТА-ИНФОРМАЦИИ СООБЩЕНИЯ --- */
/* ================================================================== */

.message-content {
    display: flex;
    align-items: flex-end; /* Выравниваем по низу */
    gap: 0.5rem;
}

/* Для сообщений пользователя меняем порядок: сначала пузырь, потом статус */
.user-message .message-content {
    flex-direction: row-reverse;
}

.message-bubble { 
    max-width: 100%; 
    padding: 0.5rem; 
    border-radius: 0.75rem; 
    box-shadow: 0 0.25rem 0.375rem -0.0625rem rgb(0 0 0 / 0.1), 0 0.125rem 0.25rem -0.125rem rgb(0 0 0 / 0.1);
}

.message-bubble p {
    margin: 0;
    padding: 0;
    white-space: pre-wrap; /* Сохраняет пробелы и переносы, переносит длинные строки */
    word-wrap: break-word; /* Дополнительно для поддержки старых браузеров */
}

.message-meta {
    display: flex;
    flex-direction: column-reverse; /* Ставим элементы друг под другом */
    margin-bottom: 0.2rem; /* Небольшой отступ снизу */
    flex-shrink: 0; /* Чтобы не сжимался */
}

/* Выравниваем мета-блок по правому краю для сообщений пользователя */
.user-message .message-meta {
    align-items: flex-end;
}

/* Выравниваем мета-блок по левому краю для сообщений собеседника */
.partner-message .message-meta, .instructor-message .message-meta {
    align-items: flex-start;
}


/* --- Стили для времени --- */
.message-timestamp {
    font-size: 0.65rem; /* 11px */
    line-height: 1;
    color: #808e80;
    user-select: none; /* Чтобы нельзя было случайно выделить */
    white-space: nowrap; /* Запрещаем перенос времени */
    margin-top: 0.15rem; /* Отступ от иконок сверху */
}

/* --- НОВЫЙ БЛОК: Отдельный цвет для времени в светлой теме --- */
.light-theme .message-timestamp {
    color: #80aec0; /* Светло-серый, можно менять */
}


/* Контейнер для индикаторов "отредактировано" и "прочитано" */
.message-indicators {
    display: flex;
    align-items: center;
    gap: 0.35rem; /* Отступ между иконками, если их несколько */
}

.edited-indicator {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}

.user-message .edited-indicator {
     color: rgba(255,255,255,0.7); /* Светлый цвет для темной темы */
}
.light-theme .user-message .edited-indicator {
    color: rgba(255,255,255,0.7); /* Светлый цвет и для светлой темы, т.к. фон фиолетовый */
}
.edited-indicator svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* --- ИЗМЕНЕНИЕ: Индикатор статуса сообщения --- */
.message-status-indicator svg {
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
    color: var(--text-secondary); /* Серый цвет по умолчанию (доставлено) */
    transition: color 0.2s;
}

/* Цвет для прочитанных сообщений */
.message-status-indicator svg.is-read {
    color: var(--accent-primary); 
}

/* Скрываем вторую галочку по умолчанию */
.message-status-indicator .second-tick {
    display: none;
}

/* Показываем вторую галочку, если есть класс is-read */
.message-status-indicator svg.is-read .second-tick {
    display: block;
}

/* ==================================================================
   --- ИЗМЕНЕНИЕ: Выравниваем кнопку и пузырь по центру ---
   ================================================================== */
.message-content {
    display: flex;
    align-items: center; /* Выравнивание по вертикали */
    gap: 0.5rem;
}

.message-container.user-message .message-content {
    flex-direction: row-reverse; /* Ставит кнопку слева от пузыря */
}


#messenger-settings-panel { 
    position: absolute; 
    top: 100%; 
    right: 0; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
    width: 300px; 
    z-index: 10; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.2s, visibility 0.2s; 
    border-radius: 0.5rem; 
    overflow: hidden; /* Чтобы скруглить углы у вкладок */
    background-color: #374151; /* Темная тема */
    border: 0.1875rem solid; /* 3px */
    border-color: #4b5563 #111827 #111827 #4b5563;
	
}
.light-theme #messenger-settings-panel {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-color: #ffffff #d1d5db #d1d5db #ffffff;
}

#messenger-settings-panel.visible { 
    opacity: 1; 
    visibility: visible; 
}

/* Контейнер для кнопок-вкладок */
.settings-tabs {
    display: flex;
    background-color: #4b5563; /* Темная тема */
}
.light-theme .settings-tabs {
    background-color: #f3f4f6;
}

/* Стили для кнопок вкладок */
.settings-tab-btn {
    flex-grow: 1;
    padding: 0.75rem 0.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: 500;
    color: #D1D5DB; /* Темная тема */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.light-theme .settings-tab-btn {
    color: #4b5563;
}

.settings-tab-btn.active {
    background-color: #374151; /* Темная тема */
    color: #f9fafb;
    border-bottom-color: var(--accent-primary);
}
.light-theme .settings-tab-btn.active {
    background-color: #ffffff;
    color: #111827;
}

.settings-tab-btn:disabled {
    color: #6b7280;
    cursor: not-allowed;
    background-color: transparent !important;
    border-bottom-color: transparent !important;
}

.light-theme .settings-tab-btn:disabled {
    color: #9ca3af;
}

/* Стили для элементов внутри настроек */
#messenger-settings-panel label { font-size: 0.875rem; font-weight: 500; color: #D1D5DB; }
#messenger-settings-panel input[type="range"],
#messenger-settings-panel select { width: 100%; border-radius: 0.25rem; padding: 0.25rem; background-color: #4B5563; border: 1px solid #6B7280; color: #E0E0E0; }

.light-theme #messenger-settings-panel label { color: #4b5563; }
.light-theme #messenger-settings-panel input[type="range"], 
.light-theme #messenger-settings-panel select { background-color: #f3f4f6; border: 1px solid #d1d5db; color: #1f2937; }

/* ==================================================================
   --- 7. НОВЫЕ СТИЛИ ДЛЯ НАСТРОЙКИ СПИСКОВ ---
   ================================================================== */

#list-settings-container {
    color: var(--text-primary);
}

#sortable-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sortable-item {
    display: flex;
    align-items: center;
    padding: 0.5rem; /* 8px */
    border-radius: 0.375rem; /* 6px */
    margin-bottom: 0.25rem; /* 4px */
    cursor: grab;
    transition: background-color 0.2s;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
}

.light-theme .sortable-item {
    background-color: rgba(0, 0, 0, 0.05);
}

.sortable-item:active {
    cursor: grabbing;
}

/* Стили для элемента во время перетаскивания */
.sortable-item.dragging {
    opacity: 0.5;
    background-color: var(--accent-primary);
    border: 1px dashed #fff;
}

.drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem; /* 24px */
    height: 1.5rem; /* 24px */
    margin-right: 0.75rem; /* 12px */
    color: var(--text-secondary);
}

.list-name {
    flex-grow: 1;
    font-weight: 500;
    font-size: 0.875rem; /* 14px */
}

.visibility-toggle {
    position: relative;
    width: 40px;
    height: 20px;
}

.visibility-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
}

.visibility-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4b5563; /* Цвет выключенного состояния в темной теме */
    transition: .4s;
    border-radius: 20px;
}

.light-theme .visibility-slider {
    background-color: #ccc; /* Цвет выключенного состояния в светлой теме */
}

.visibility-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.visibility-checkbox:checked + .visibility-slider {
    background-color: var(--accent-primary);
}

.visibility-checkbox:focus + .visibility-slider {
    box-shadow: 0 0 1px var(--accent-primary);
}

.visibility-checkbox:checked + .visibility-slider:before {
    transform: translateX(20px);
}

.sortable-item[data-list-id="recent"] .visibility-toggle {
    cursor: not-allowed;
    opacity: 0.6;
}
.sortable-item[data-list-id="recent"] .visibility-checkbox {
    pointer-events: none;
}

/* ==================================================================
   --- 8. НОВЫЕ СТИЛИ ДЛЯ ФУТЕРА НАСТРОЕК ---
   ================================================================== */

.settings-footer {
    padding: 0.75rem; /* 12px */
    background-color: #4b5563; /* Темная тема */
    border-top: 1px solid #6B7280;
    display: flex;
    justify-content: flex-end;
}

.light-theme .settings-footer {
    background-color: #f3f4f6;
    border-top-color: #e5e7eb;
}

#save-settings-btn {
    padding: 0.5rem 1rem; /* 8px 16px */
    border: none;
    border-radius: 0.375rem; /* 6px */
    background-color: var(--accent-primary);
    color: var(--accent-primary-text);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
	font-size: 1rem; /* 12px - ИЗМЕНЕНО */
}

#save-settings-btn:hover {
    filter: brightness(1.1);
}

#save-settings-btn:active {
    transform: scale(0.98);
}

/* ==================================================================
   --- 9. НОВЫЕ СТИЛИ ДЛЯ ПЛЕЙСХОЛДЕРА "НЕТ СООБЩЕНИЙ" ---
   ================================================================== */

.no-messages-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-secondary);
    font-size: 0.875rem; /* 14px */
    user-select: none;
}

/* ==================================================================
   --- 10. НОВЫЕ СТИЛИ ДЛЯ НАСТРОЕК КРУГА "НОВЫЕ" ---
   ================================================================== */

#new-list-settings-container {
    margin-top: 1.5rem; /* 24px */
    padding-top: 1rem; /* 16px */
    border-top: 1px solid #4b5563; /* Темная тема */
}

.light-theme #new-list-settings-container {
    border-top-color: #e5e7eb; /* Светлая тема */
}

#new-list-settings-container h4 {
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    margin-bottom: 0.75rem; /* 12px */
    color: var(--text-primary);
}

#new-list-settings-container .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#new-list-settings-container label {
    font-size: 0.875rem; /* 14px */
    color: var(--text-secondary);
}

#new-list-settings-container select {
    /* Используем те же стили, что и у других select в настройках */
    width: auto;
    min-width: 100px;
    border-radius: 0.25rem;
    padding: 0.25rem;
    background-color: #4B5563;
    border: 1px solid #6B7280;
    color: #E0E0E0;
}

.light-theme #new-list-settings-container select {
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #1f2937;
}

/* ==================================================================
   --- 11. СТИЛИ ДЛЯ МЕНЕДЖЕРА КРУГОВ ---
   ================================================================== */

.circles-manager {
    display: flex;
    gap: 1rem; /* 16px */
    height: 300px; /* Примерная высота, чтобы все поместилось */
}

.circles-list-panel, .circle-members-panel {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 0 0.1rem; /* Отступы по бокам */
}
.circles-list-panel {
    border-right: 1px solid #4b5563;
}
/* ДОБАВЛЕНО: Центрирование заголовка "Мои круги" */
.circles-list-panel h4 {
    text-align: center;
}
.light-theme .circles-list-panel { border-right-color: #e5e7eb; }


.circles-manager h4 {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
	font-size: 0.75rem; /* 14px - ДОБАВЛЕНО */
}

.circles-list, .members-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Позволяет спискам занимать все доступное место */
    overflow-y: auto;
    border: 1px solid #4b5563;
    border-radius: 0.375rem;
    padding: 0.2rem;
	font-size: 0.75rem;
}
.light-theme .circles-list, .light-theme .members-list {
    border-color: #e5e7eb;
}

.circle-item, .member-item {
    padding: 0.2rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s;
	font-size: 0.75rem;
}
.circle-item:hover, .member-item:hover { background-color: rgba(255, 255, 255, 0.05); }
.light-theme .circle-item:hover, .light-theme .member-item:hover { background-color: rgba(0, 0, 0, 0.05); }

.circle-item.active, .member-item.active {
    background-color: var(--accent-primary);
    color: var(--accent-primary-text);
}

.circles-controls, .members-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding-top: 0.2rem;
	padding-left: 0.05rem;
    padding-right: 0.5rem;
	font-size: 0.75rem; /* 14px - ДОБАВЛЕНО */
}

.circle-editor {
    /* ИЗМЕНЕНИЕ: Адаптация под вертикальное расположение */
    display: flex;
    flex-direction: column; /* Ставим элементы друг под другом */
    gap: 0.5rem; /* Добавляем отступ между ними */
    margin-bottom: 0.5rem;
    flex-shrink: 0;
	font-size: 0.75rem;
}

#circle-name-input {
    /* ИЗМЕНЕНИЕ: Убираем flex-свойства, теперь это обычный блочный элемент */
    width: 100%; /* Занимает всю ширину родителя */
    background-color: #111827;
    color: #f9fafb;
    border: 1px solid #4b5563;
    padding: 0.5rem;
	font-size: 0.75rem;
    border-radius: 0.375rem; /* Возвращаем обычное скругление */
}

#add-user-to-circle-select {
    flex-grow: 1;
    background-color: #111827;
    color: #f9fafb;
    border: 1px solid #4b5563;
    padding: 0.5rem;
    border-radius: 0.375rem;
	font-size: 0.75rem;
}

.light-theme #circle-name-input, .light-theme #circle-name-input-cp {
    background-color: #ffffff; border: 1px solid #d1d5db; color: #111827;
}

#recommended-circles-select {
    /* ИЗМЕНЕНИЕ: Убираем рост, чтобы он не конкурировал с полем ввода */
    flex-shrink: 0;
    background-color: #4B5563;
    border: 1px solid #6B7280;
    color: #E0E0E0;
    border-radius: 0.375rem;
	font-size: 0.75rem; /* 14px - ДОБАВЛЕНО */
}
.light-theme #recommended-circles-select, .light-theme #recommended-circles-select-cp {
    background-color: #f3f4f6; border: 1px solid #d1d5db; color: #1f2937;
}

/* Стили для страницы в Панели управления */
.circles-manager-cp {
    max-width: 800px;
    margin: 0 auto;
}
.circles-manager-content {
    display: flex;
    gap: 1.5rem;
    background-color: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 0.5rem;
}
.main-button-icon {
    /* Стили для кнопок в КП, похожие на messenger-control-button */
    padding: 0.75rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ==================================================================
   --- 12. НОВЫЕ СТИЛИ ДЛЯ ШРИФТОВ В СПИСКАХ КОНТАКТОВ ---
   ================================================================== */

/* Стили для аватара-счетчика круга */
.contact-item.type-circle .font-semibold {
    font-weight: 700; /* bold */
    font-style: normal;
}
/* Делаем сам счетчик чуть меньше и центрируем текст */
.contact-item.type-circle .w-8.h-8 {
    font-size: 0.8rem; /* 13px */
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.light-theme .contact-item.type-circle .w-8.h-8 {
    border-color: rgba(0, 0, 0, 0.3);
}

/* Вкладка "Последние" - обычный шрифт (стиль по умолчанию) */
.contact-item.type-recent .font-semibold {
    font-weight: 500; /* semibold */
    font-style: normal;
}

/* Вкладка "Кластеры" - курсив */
.contact-item.type-cluster .font-semibold {
    font-weight: 500;
    font-style: italic;
}

/* Вкладка "Круги" - жирный */
.contact-item.type-circle .font-semibold {
    font-weight: 700; /* bold */
    font-style: normal;
}

/* Вкладка "Новые" - жирный курсив */
.contact-item.type-new .font-semibold {
    font-weight: 700;
    font-style: italic;
}

/* Отдельный стиль для Инструктора (можно сделать его уникальным) */
.contact-item.type-instructor .font-semibold {
    font-weight: 600;
    background: linear-gradient(90deg, #a5b4fc, #8888FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
/* ================================================================== */
/* --- 13. СТИЛИ ДЛЯ КАСТОМНОГО КОНТЕКСТНОГО МЕНЮ --- */
/* ================================================================== */

#chatbot-context-menu {
    position: absolute; /* Используем fixed, чтобы меню не смещалось при прокрутке страницы */
    z-index: 1100; /* Должно быть выше, чем у модального окна */
    width: 170px;
    background-color: #4b5563; /* Фон для темной темы */
    border-radius: 0.5rem; /* 8px */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid #6B7280;
    overflow: hidden; /* Скрывает все, что выходит за рамки скругленных углов */
    padding: 0.25rem; /* 4px, внутренний отступ */
}

.light-theme #chatbot-context-menu {
    background-color: #ffffff; /* Фон для светлой темы */
    border-color: #e5e7eb;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

#chatbot-context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#chatbot-context-menu li {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px, отступ между иконкой и текстом */
    padding: 0.5rem 0.75rem; /* 8px 12px */
    border-radius: 0.375rem; /* 6px */
    cursor: pointer;
    font-size: 0.875rem; /* 14px */
    color: #f3f4f6; /* Цвет текста для темной темы */
    transition: background-color 0.2s;
}

.light-theme #chatbot-context-menu li {
    color: #374151; /* Цвет текста для светлой темы */
}

#chatbot-context-menu li:hover {
    background-color: #6B7280; /* Фон при наведении для темной темы */
}

.light-theme #chatbot-context-menu li:hover {
    background-color: #f3f4f6; /* Фон при наведении для светлой темы */
}

#chatbot-context-menu li.hidden {
    display: none; /* Скрываем ненужные пункты */
}

#chatbot-context-menu li svg {
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
}

/* Стили для "опасного" действия (удаления) */
#chatbot-context-menu li.danger {
    color: #f87171; /* Красный цвет для темной темы */
}

.light-theme #chatbot-context-menu li.danger {
    color: #ef4444; /* Красный цвет для светлой темы */
}

#chatbot-context-menu li.danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444; /* Ярко-красный при наведении */
}

.light-theme #chatbot-context-menu li.danger:hover {
    color: #dc2626;
}

/* ================================================================== */
/* --- 14. НОВЫЙ БЛОК: СТИЛИ ДЛЯ КОНТЕКСТНОГО МЕНЮ (ЛЕВАЯ ПАНЕЛЬ) --- */
/* ================================================================== */

#chatbot-left-panel-context-menu {
    position: absolute;
    z-index: 1100;
    width: 200px; /* Немного шире */
    background-color: #4b5563;
    border-radius: 0.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid #6B7280;
    overflow: hidden;
    padding: 0.25rem;
}

.light-theme #chatbot-left-panel-context-menu {
    background-color: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

#chatbot-left-panel-context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#chatbot-left-panel-context-menu li {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #f3f4f6;
    transition: background-color 0.2s;
    /* Убираем flex, так как нет иконок */
}

.light-theme #chatbot-left-panel-context-menu li {
    color: #374151;
}

#chatbot-left-panel-context-menu li:hover {
    background-color: #6B7280;
}

.light-theme #chatbot-left-panel-context-menu li:hover {
    background-color: #f3f4f6;
}

#chatbot-left-panel-context-menu li.hidden {
    display: none;
}

#chatbot-left-panel-context-menu li.danger {
    color: #f87171;
}

.light-theme #chatbot-left-panel-context-menu li.danger {
    color: #ef4444;
}

#chatbot-left-panel-context-menu li.danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.light-theme #chatbot-left-panel-context-menu li.danger:hover {
    color: #dc2626;
}

/* ================================================================== */
/* --- 15. НОВЫЙ БЛОК: СТИЛИ ДЛЯ ФУТЕРА ЛЕВОЙ ПАНЕЛИ --- */
/* ================================================================== */

.light-theme #messenger-left-panel-footer {
    border-top-color: #e5e7eb;
}

.messenger-footer-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    color: var(--text-secondary);
    transition: background-color 0.2s, color 0.2s;
}

.messenger-footer-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.light-theme .messenger-footer-button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* ================================================================== */
/* --- 16. НОВЫЙ БЛОК: СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА --- */
/* ================================================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1200;
}

.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #374151; /* Темная тема */
    color: var(--text-primary);
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 1201;
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
}

.light-theme .modal-content {
    background-color: #ffffff;
}

.modal-title {
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    border-bottom: 1px solid #4b5563;
}

.light-theme .modal-title {
    border-bottom-color: #e5e7eb;
}

.modal-body {
    padding: 1.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    border-top: 1px solid #4b5563;
}

.light-theme .modal-footer {
    border-top-color: #e5e7eb;
}

.modal-button-cancel {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    background-color: #4B5563;
    color: #E0E0E0;
    border: 1px solid #6B7280;
    cursor: pointer;
    transition: background-color 0.2s;
}
.light-theme .modal-button-cancel {
    background-color: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}
.modal-button-cancel:hover { filter: brightness(1.2); }

.modal-button-confirm {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    background-color: var(--accent-primary);
    color: var(--accent-primary-text);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.modal-button-confirm:hover { filter: brightness(1.1); }


/* === НОВЫЕ СТИЛИ === */

/* Стиль для "опасной" кнопки, например, "Удалить" */
.modal-button-confirm.danger {
    background-color: #ef4444; /* red-500 */
    color: white;
}
.light-theme .modal-button-confirm.danger {
    background-color: #dc2626; /* red-600 */
}
.modal-button-confirm.danger:hover {
    background-color: #dc2626; /* red-600 */
}
.light-theme .modal-button-confirm.danger:hover {
    background-color: #b91c1c; /* red-700 */
}

/* Стили для списка контактов в модальном окне пересылки */
#forward-contact-list .contact-item {
    /* Используем те же стили, что и в основной панели */
    display: flex;
    align-items: center;
    padding: 0.5rem; /* p-2 */
    border-radius: 0.5rem; /* rounded-lg */
    cursor: pointer;
    transition: background-color 0.2s;
}

#forward-contact-list .contact-item:hover {
    background-color: var(--bg-interactive);
}

/* ================================================================== */
/* --- 17. НОВЫЕ СТИЛИ ДЛЯ ВЛОЖЕНИЙ --- */
/* ================================================================== */

/* Общий контейнер, когда есть и текст, и вложение */
.attachment-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem; /* 4px */
}

/* Стили для вложения, когда оно является единственным контентом */
.attachment-only {
    max-width: 320px;
}

/* Вложение-картинка */
.attachment-image-link {
    display: block;
    max-width: 100%;
}
.attachment-image {
    max-width: 100%;
    border-radius: 0.75rem; /* 12px */
    border: 1px solid var(--border-color);
    display: block;
}
.attachment-only.attachment-image-link {
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Вложение-файл */
.attachment-file {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
    padding: 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.2s;
}
.attachment-file:hover {
    background-color: var(--bg-interactive);
}
.attachment-file svg {
    color: var(--accent-primary);
}

/* Вложение-аудио */
.attachment-audio {
    padding: 0.5rem;
    border-radius: 0.75rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
.attachment-audio .audio-filename {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}
.attachment-audio audio {
    width: 100%;
}

/* Вложение-видео (как ссылка на Google Drive) */
.attachment-video {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.2s;
}
.attachment-video:hover {
    background-color: var(--bg-interactive);
}
.attachment-video .video-play-icon {
    color: var(--accent-primary);
}

/* Превью ссылки */
.attachment-url-preview {
    display: block;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    overflow: hidden;
    text-decoration: none;
    max-width: 100%;
}
.attachment-url-preview:hover {
    filter: brightness(1.1);
}
.attachment-url-preview .preview-image {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-bottom: 1px solid var(--border-color);
}
.attachment-url-preview .preview-text {
    padding: 0.75rem;
}
.attachment-url-preview .preview-title {
    font-weight: 600;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.attachment-url-preview .preview-description {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0.25rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.attachment-url-preview .preview-url {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Эмодзи */
.attachment-emoji-container.attachment-only {
    background: transparent;
    padding: 0;
    border: none;
}
.attachment-emoji {
    width: 64px;
    height: 64px;
    display: block;
}


/* ================================================================== */
/* --- 18. СТИЛИ ДЛЯ ИНДИКАТОРА ЗАГРУЗКИ --- */
/* ================================================================== */

body.uploading-in-progress::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    background-size: 200% 100%;
    animation: loading-bar 1.5s linear infinite;
    z-index: 9999;
}

@keyframes loading-bar {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ================================================================== */
/* --- 19. НОВЫЕ СТИЛИ ДЛЯ ПРЕДПРОСМОТРА ВЛОЖЕНИЙ И СЛАЙДЕРА --- */
/* ================================================================== */

/* Контейнер для предпросмотра перед отправкой */
#messenger-attachment-preview {
    background-color: transparent;
    border-color: transparent;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ИСПРАВЛЕНО: Скрываем пустой контейнер предпросмотра */
#messenger-attachment-preview:empty {
    display: none !important;
}

/* "Таблетка" с файлом в предпросмотре */
.attachment-pill {
    display: flex;
    align-items: center;
    background-color: var(--bg-secondary);
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.attachment-pill span {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-pill .remove-attachment-btn {
    margin-left: 0.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.attachment-pill .remove-attachment-btn:hover {
    color: #ef4444; /* red-500 */
}

/* Обертка для слайдера и кнопок */
.slider-wrapper {
    position: relative;
    max-width: 280px; /* Ширина одного слайда */
}

/* Кнопки навигации */
.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(31, 41, 55, 0.6); /* bg-gray-800 with opacity */
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: none; /* Изначально скрыты */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    transition: opacity 0.2s, background-color 0.2s;
}

.light-theme .slider-nav-btn {
    background-color: rgba(255, 255, 255, 0.7);
    color: #1f2937;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Показываем кнопки при наведении на обертку */
.slider-wrapper:hover .slider-nav-btn {
    display: flex;
}

.slider-nav-btn.prev { left: 8px; }
.slider-nav-btn.next { right: 8px; }

.slider-nav-btn:hover {
    background-color: rgba(31, 41, 55, 0.9);
}
.light-theme .slider-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.9);
}


/* Контейнер для слайдера в отправленном сообщении */
.attachment-slider-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 0.5rem;
    padding-bottom: 0.25rem; /* Уменьшаем отступ, т.к. скроллбара не видно */
    /* Скрываем скроллбар */
    scrollbar-width: none; /* Firefox */
}
.attachment-slider-container::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}


.attachment-slider-container > * {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 280px; /* Ширина одного слайда */
}