/* CSS для слайдера изображений (пример) */
.chat-link-images-slider-container {
    position: relative; /* Для позиционирования кнопок */
    max-width: 600px; /* Ограничьте ширину контейнера */
    height: 400px; /* Установите высоту контейнера */
    margin: 10px 0; /* Отступы сверху и снизу */
    overflow: hidden; /* Скрываем изображения за пределами контейнера */
    /* Добавляем стили для центрирования контейнера, если он меньше max-width */
    margin-left: auto;
    margin-right: auto;
    /* Убираем стили для полосы прокрутки отсюда, т.к. управляем ею через JS на inner-контейнере */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

/* Скрываем полосу прокрутки в Webkit (Chrome, Safari) для внешнего контейнера (если вдруг осталась) */
.chat-link-images-slider-container::-webkit-scrollbar {
    display: none;
}


/* Внутренний контейнер для изображений (используем flexbox для расположения в ряд) */
/* ЭТО НОВЫЙ ЭЛЕМЕНТ ИЛИ ИЗМЕНЕННЫЙ СЕЛЕКТОР */
.chat-link-images-slider-inner { /* ИЗМЕНЕНО: Был .chat-link-images-slider */
    display: flex; /* Располагаем элементы в ряд */
    height: 100%; /* Занимает всю высоту родителя */
    flex-wrap: nowrap; /* Предотвращаем перенос слайдов */
    overflow-x: auto; /* Включаем горизонтальную прокрутку, управляемую JS */
    scroll-behavior: smooth; /* <-- КЛЮЧЕВОЕ ИЗМЕНЕНИЕ: Плавная прокрутка */
    /* Убираем scroll-snap-type, т.к. хотим просто плавную прокрутку, а не привязку */
    /* scroll-snap-type: x mandatory; */
    -webkit-overflow-scrolling: touch; /* Плавная прокрутка на iOS */
    /* Скрываем полосу прокрутки для этого элемента */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    align-items: center; /* Центрирование содержимого (слайдов) по вертикали */
}

/* Скрываем полосу прокрутки в Webkit (Chrome, Safari и Opera) для inner контейнера */
.chat-link-images-slider-inner::-webkit-scrollbar {
    display: none; /* Скрываем скроллбар в Chrome, Safari и Opera */
}


/* Стили для каждого СЛАЙДА в слайдере (ОБЕРТКА ДЛЯ IMG) */
/* ЭТО НОВЫЙ ЭЛЕМЕНТ */
.chat-link-slide {
    flex-shrink: 0; /* Предотвращает сжатие слайдов */
    width: 600px; /* Каждый слайд занимает всю ширину контейнера */
    height: 400px; /* Каждый слайд занимает всю высоту контейнера */
    margin: 0; /* Убираем возможные отступы */
    padding: 0;
    display: flex; /* Используем flex для центрирования img внутри слайда */
    justify-content: center; /* Центрируем изображение по горизонтали */
    align-items: center; /* Центрируем изображение по вертикали */
    /* Убираем scroll-snap-align */
    /* scroll-snap-align: start; */
}


/* Стили для самого изображения внутри слайда */
/* ИЗМЕНЕНО: Селектор теперь применяется к img внутри .chat-link-slide */
.chat-link-slide img { /* ИЗМЕНЕНО: Был .chat-link-images-slider img */
    display: block; /* Убираем строчно-блочные отступы */
    width: 100%; /* Изображение занимает всю ширину слайда */
    height: 100%; /* Изображение занимает всю высоту слайда */
    object-fit: cover; /* Обрезает изображение, чтобы оно заполнило контейнер (слайд) */
    /* Убираем margin: 0 auto;, т.к. центрирование теперь в .chat-link-slide */
    /* Убираем margin-right: 0; т.к. это теперь на обертке слайда не нужно */
}

/* Убираем правый отступ у последнего изображения в слайдере (уже есть, но проверяем) */
/* Этот стиль теперь не так критичен, т.к. отступы на обертке слайда = 0 */
/* .chat-link-images-slider img:last-child { margin-right: 0; } */


.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 1; /* Поверх изображений */
    border-radius: 3px;
    font-size: 18px;
    line-height: 1;
    opacity: 1; /* По умолчанию видимы */
    transition: opacity 0.3s ease; /* Плавное появление/исчезновение */
    /* Убедимся, что кнопки не мешают кликам по изображению */
    pointer-events: auto;
}

.slider-nav.prev {
    left: 5px;
}

.slider-nav.next {
    right: 5px;
}

.slider-nav:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Стили для скрытия кнопок, когда прокрутка невозможна */
/* Эти классы добавляются/удаляются в JS */
.chat-link-images-slider-container:not(.can-scroll-left) .slider-nav.prev {
    opacity: 0;
    pointer-events: none; /* Делаем кнопку некликабельной */
}

.chat-link-images-slider-container:not(.can-scroll-right) .slider-nav.next {
    opacity: 0;
    pointer-events: none; /* Делаем кнопку некликабельной */
}


/* Стили для случая без изображений (если default_image_url не добавился или другая проблема) */
.chat-link-images-slider-container.no-images .slider-nav {
    display: none; /* Скрываем кнопки если изображений нет */
}

/* Стили для новой структуры предпросмотра статьи */
/*... (остальные стили предпросмотра, которые уже есть) ...*/

.chat-link-preview .preview-top-line {
    display: flex; /* Размещаем элементы в строку */
    justify-content: space-between; /* Выравнивание по краям */
    align-items: center; /* Выравнивание по центру вертикали */
    font-size: 0.8em; /* Меньший шрифт для этой строки */
    color: #666; /* Серый цвет для текста */
    margin-bottom: 5px; /* Отступ снизу */
}

.chat-link-preview .preview-domain {
    font-weight: bold; /* Жирный шрифт для домена */
    margin-right: 10px; /* Отступ справа от домена */
    text-decoration: none; /* Убираем подчеркивание */
    color: inherit; /* Наследуем цвет текста */
}

.chat-link-preview .preview-domain:hover {
    text-decoration: underline; /* Подчеркивание при наведении */
}


.chat-link-preview .preview-timestamp {
    white-space: nowrap; /* Запрещаем перенос строки для времени */
}

.chat-link-preview .preview-timestamp a {
    text-decoration: none; /* Убираем подчеркивание */
    color: inherit; /* Наследуем цвет текста */
}
.chat-link-preview .preview-timestamp a:hover {
    text-decoration: underline; /* Подчеркивание при наведении */
}


.chat-link-preview .preview-title {
    font-size: 1.1em; /* Размер шрифта для заголовка */
    font-weight: bold;
    margin-bottom: 5px; /* Отступ снизу */
    display: block; /* Заголовок на отдельной строке */
    text-decoration: none; /* Убираем подчеркивание */
    color: inherit; /* Наследуем цвет текста */
}

.chat-link-preview .preview-title:hover {
    text-decoration: underline; /* Подчеркивание при наведении */
}


.chat-link-preview .preview-content {
    margin-top: 10px; /* Отступ сверху от слайдера */
    /* Здесь будут стили для описания */
}

.chat-link-preview .preview-description p {
    margin-top: 0.5em; /* Отступ между абзацами */
    margin-bottom: 0.5em;
    line-height: 1.4; /* Межстрочный интервал */
}

.chat-link-preview .preview-description a {
    /* Стили для ссылок внутри описания */
    color: #0073aa; /* Пример цвета ссылок */
    text-decoration: underline;
}

.chat-link-preview.error .preview-error-message {
    color: red;
    font-size: 0.9em;
    margin-top: 5px;
}

/* Стили для контейнера плеера (если он есть) */
.chat-embed-container {
    margin-top: 10px; /* Отступ сверху от сообщения */
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    /* background-color: #f9f9f9; */
    width: 600px; /* Пример: максимальная ширина плеера */
    margin-left: auto;
    margin-right: auto;
}

.chat-embed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em;
    color: #666;
    margin-bottom: 5px;
}
.chat-embed-domain {
    font-weight: bold;
    margin-right: 10px;
}
.chat-embed-domain a,
.chat-embed-timestamp a {
    text-decoration: none;
    color: inherit;
}
.chat-embed-domain a:hover,
.chat-embed-timestamp a:hover {
    text-decoration: underline;
}


.chat-embed-title {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}
.chat-embed-title a {
    text-decoration: none;
    color: inherit;
}
.chat-embed-title a:hover {
    text-decoration: underline;
}


.chat-embed-player {
    position: relative; /* Для адаптивного iframe */
    /* Удаляем padding-bottom 56.25% если хотим фиксированный размер 600x400 */
    /* padding-bottom: 56.25%; */ /* 16:9 Aspect Ratio (div height = 56.25% of its width) */
    height: 400px; /* Устанавливаем фиксированную высоту */
    overflow: hidden;
    max-width: 100%; /* Ограничиваем ширину контейнером */
    background: #000; /* Черный фон, пока плеер не загрузится */
}

.chat-embed-player iframe,
.chat-embed-player object,
.chat-embed-player embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}