/* Alpine.js x-cloak */
[x-cloak] {
    display: none !important;
}

/* Убираем стили Tailwind Typography для таблиц в редакторе */
[contenteditable] .prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)) {
    border-bottom-width: 0 !important;
    border-bottom-color: transparent !important;
}

/* Дополнительные правила для отключения стилей Tailwind Typography */
[contenteditable] .prose table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

[contenteditable] .prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)) {
    border-bottom: none !important;
}

[contenteditable] .prose :where(thead tr):not(:where([class~=not-prose],[class~=not-prose] *)) {
    border-bottom: none !important;
}

/* Полное отключение стилей Tailwind Typography для таблиц */
[contenteditable] .prose table,
[contenteditable] .prose table * {
    border-bottom-width: 0 !important;
    border-bottom-color: transparent !important;
    border-bottom-style: none !important;
}

/* Стили для placeholder */
[contenteditable].empty:before {
    content: attr(data-placeholder);
    color: rgb(148 163 184); /* text-slate-400 */
    pointer-events: none;
    position: absolute;
}

.dark [contenteditable].empty:before {
    color: rgb(107 114 128); /* text-gray-500 */
}

/* Стили для редактора */
[contenteditable] {
    outline: none;
    max-width: 100ch !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

[contenteditable]:focus {
    outline: none;
}

/* Поддержка Tailwind классов выравнивания - только для редактора */
[contenteditable] .text-left {
    text-align: left !important;
}

[contenteditable] .text-center {
    text-align: center !important;
}

[contenteditable] .text-right {
    text-align: right !important;
}

[contenteditable] .text-justify {
    text-align: justify !important;
}

/* Переопределение для параграфов и блоков в редакторе */
[contenteditable] p.text-center,
[contenteditable] div.text-center,
[contenteditable] h1.text-center,
[contenteditable] h2.text-center,
[contenteditable] h3.text-center {
    text-align: center !important;
}

[contenteditable] p.text-right,
[contenteditable] div.text-right,
[contenteditable] h1.text-right,
[contenteditable] h2.text-right,
[contenteditable] h3.text-right {
    text-align: right !important;
}

/* Стили для выделения */
[contenteditable] mark {
    background-color: yellow;
    padding: 0.125rem 0.25rem;
}

/* Стили для списков с Tailwind классами */
[contenteditable] ul.list-disc {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

[contenteditable] ol.list-decimal {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

[contenteditable] ul.list-none {
    list-style-type: none;
    padding-left: 0;
    margin: 0.5rem 0;
}

/* Стили для элементов списка */
[contenteditable] li {
    margin: 0.25rem 0;
    line-height: 1.5;
}

/* Темная тема для списков */
.dark [contenteditable] ul.list-disc,
.dark [contenteditable] ol.list-decimal {
    color: rgb(209 213 219); /* text-gray-300 */
}

.dark [contenteditable] li {
    color: rgb(209 213 219); /* text-gray-300 */
}

/* Стили для изображений в редакторе */
[contenteditable] img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    vertical-align: middle;
    display: inline-block;
    margin: 0.25rem;
}

/* Стили для таблиц в редакторе - только специфичные для редактора */
[contenteditable] table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 0.5rem 0 !important;
    table-layout: auto !important;
    background-color: #ffffff !important;
    border-radius: 0.125rem !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
    min-width: 600px !important;
    max-width: none !important;
}

.dark [contenteditable] table {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

[contenteditable] table th,
[contenteditable] table td {
    padding: 0.75rem 1rem !important;
    text-align: left !important;
    vertical-align: top !important;
    min-width: 120px !important; /* Минимальная ширина столбца */
    hyphens: auto !important; /* Автоматическая расстановка переносов */
}

[contenteditable] table th {
    background-color: #f9fafb !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom: none !important; /* Убираем нижнюю границу */
    border-left: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    margin-bottom: 0.25rem !important; /* Небольшой отступ снизу */
}

[contenteditable] table td {
    background-color: transparent !important;
    color: #374151 !important;
    border-top: none !important; /* Убираем верхнюю границу */
    border-bottom: 1px solid #e5e7eb !important;
    border-left: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
}

[contenteditable] table tr:last-child td {
    border-bottom: none !important;
}

/* Закругленные углы для первого и последнего заголовка в строке */
[contenteditable] table th:first-child {
    border-top-left-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
}

[contenteditable] table th:last-child {
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}

[contenteditable] table tr:hover td {
    background-color: rgba(243, 244, 246, 0.5) !important;
}

/* Стили таблиц для темной темы в редакторе */
.dark [contenteditable] table th {
    background-color: #2b3545 !important;
    color: #9ca3af !important;
    border-top-color: rgba(55, 65, 81, 0.5) !important;
    border-bottom: none !important; /* Убираем нижнюю границу */
    border-left-color: rgba(55, 65, 81, 0.3) !important;
    border-right-color: rgba(55, 65, 81, 0.3) !important;
    margin-bottom: 0.25rem !important; /* Небольшой отступ снизу */
}

.dark [contenteditable] table td {
    background-color: transparent !important;
    color: #f9fafb !important;
    border-top: none !important; /* Убираем верхнюю границу */
    border-bottom-color: rgba(55, 65, 81, 0.3) !important;
    border-left-color: rgba(55, 65, 81, 0.2) !important;
    border-right-color: rgba(55, 65, 81, 0.2) !important;
}

.dark [contenteditable] table tr:hover td {
    background-color: rgba(75, 85, 99, 0.3) !important;
}

/* Закругленные углы для первого и последнего заголовка в строке (темная тема) */
.dark [contenteditable] table th:first-child {
    border-top-left-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
}

.dark [contenteditable] table th:last-child {
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}

/* Стили для заголовка таблицы в редакторе */
[contenteditable] table caption {
    padding: 0.75rem 1rem !important;
    text-align: left !important;
    font-weight: 600 !important;
    background-color: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb !important;
    color: #374151 !important;
}

.dark [contenteditable] table caption {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
    border-bottom-color: #374151 !important;
}

/* Контейнер с горизонтальным скроллом для таблиц в редакторе */
[contenteditable] .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #d1d5db #f3f4f6 !important;
    margin: 0 !important;
    padding: 0.25rem 0 !important;
    width: 100% !important;
    scroll-behavior: smooth !important;
    scroll-padding: 1rem !important;
}

.dark [contenteditable] .overflow-x-auto {
    scrollbar-color: #4b5563 #374151 !important;
    width: 100% !important;
    scroll-behavior: smooth !important;
    scroll-padding: 1rem !important;
}

/* Стили для скроллбара в WebKit браузерах */
[contenteditable] .overflow-x-auto::-webkit-scrollbar {
    height: 8px !important;
}

[contenteditable] .overflow-x-auto::-webkit-scrollbar-track {
    background: #f3f4f6 !important;
    border-radius: 4px !important;
}

.dark [contenteditable] .overflow-x-auto::-webkit-scrollbar-track {
    background: #374151 !important;
}

[contenteditable] .overflow-x-auto::-webkit-scrollbar-thumb {
    background: #d1d5db !important;
    border-radius: 4px !important;
}

.dark [contenteditable] .overflow-x-auto::-webkit-scrollbar-thumb {
    background: #4b5563 !important;
}

[contenteditable] .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #9ca3af !important;
}

.dark [contenteditable] .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #6b7280 !important;
}

[contenteditable] img:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[contenteditable] img.float-left {
    float: left;
    margin: 0 1rem 1rem 0;
}

[contenteditable] img.float-right {
    float: right;
    margin: 0 0 1rem 1rem;
}

[contenteditable] img.mx-auto {
    display: block !important;
    margin: 1rem auto !important;
}

[contenteditable] img.block {
    display: block !important;
}

/* Специальные стили для блочных изображений с выравниванием по центру */
[contenteditable] img[style*="display: block"][style*="margin: 1rem auto"] {
    display: block !important;
    margin: 1rem auto !important;
    float: none !important;
}

/* Стили для родительских элементов с выравниванием по центру */
[contenteditable] [data-center-align="true"] {
    text-align: center !important;
}

[contenteditable] [data-center-align="true"] img {
    margin: 1rem auto !important;
    display: block !important;
    float: none !important;
}

/* Стили для inline изображений в редакторе */
[contenteditable] img[style*="display: inline-block"] {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 0.25rem !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Стили для block изображений в редакторе */
[contenteditable] img[style*="display: block"] {
    display: block !important;
    margin: 1rem 0 !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Улучшенные стили для текста рядом с изображениями */
[contenteditable] p:has(img[style*="display: inline-block"]) {
    line-height: 1.6;
}

[contenteditable] div:has(img[style*="display: inline-block"]) {
    line-height: 1.6;
}

/* Стили для тулбара изображений */
.image-toolbar {
    z-index: 9999;
}

/* Стили для range input */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: #d1d5db;
    cursor: pointer;
    width: 100%;
    height: 6px;
    outline: none;
    border-radius: 3px;
}

.dark input[type="range"] {
    background: #4b5563;
}

/* Светлая тема */
input[type="range"]::-webkit-slider-track {
    background: linear-gradient(to right, #e5e7eb 0%, #e5e7eb 50%, #d1d5db 50%, #d1d5db 100%);
    height: 6px;
    border-radius: 3px;
    border: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    height: 18px;
    width: 18px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #ffffff;
    transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
    transform: scale(1.15);
}

input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.1);
}

/* Firefox */
input[type="range"]::-moz-range-track {
    background: linear-gradient(to right, #e5e7eb 0%, #e5e7eb 50%, #d1d5db 50%, #d1d5db 100%);
    height: 6px;
    border-radius: 3px;
    border: none;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

input[type="range"]::-moz-range-thumb {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    height: 18px;
    width: 18px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #ffffff;
    transition: all 0.2s ease;
}

/* Стили для скролла в выпадающем списке смайлов */
.wysiwyg-editor .overflow-x-auto::-webkit-scrollbar {
    height: 4px;
}

.wysiwyg-editor .overflow-x-auto::-webkit-scrollbar-track {
    background: transparent;
}

.wysiwyg-editor .overflow-x-auto::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

.dark .wysiwyg-editor .overflow-x-auto::-webkit-scrollbar-thumb {
    background: #4b5563;
}

.wysiwyg-editor .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.dark .wysiwyg-editor .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Принудительное ограничение ширины для мобильных устройств */
@media (max-width: 639px) {
    .wysiwyg-editor .emoji-dropdown-container {
        max-width: 216px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .wysiwyg-editor .emoji-dropdown-container button {
        flex-shrink: 0 !important;
        min-width: 40px !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    .wysiwyg-editor .emoji-dropdown-container::-webkit-scrollbar {
        height: 4px !important;
    }
    
    .wysiwyg-editor .emoji-dropdown-container::-webkit-scrollbar-track {
        background: transparent !important;
    }
    
    .wysiwyg-editor .emoji-dropdown-container::-webkit-scrollbar-thumb {
        background: #d1d5db !important;
        border-radius: 2px !important;
    }
    
    .dark .wysiwyg-editor .emoji-dropdown-container::-webkit-scrollbar-thumb {
        background: #4b5563 !important;
    }
    
    /* Firefox скроллбар */
    .wysiwyg-editor .emoji-dropdown-container {
        scrollbar-width: thin;
        scrollbar-color: #d1d5db transparent;
    }
    
    .dark .wysiwyg-editor .emoji-dropdown-container {
        scrollbar-color: #4b5563 transparent;
    }
}

input[type="range"]::-moz-range-thumb:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
    transform: scale(1.15);
}

input[type="range"]::-moz-range-thumb:active {
    transform: scale(1.1);
}

/* Темная тема */
.dark input[type="range"]::-webkit-slider-track {
    background: linear-gradient(to right, #374151 0%, #374151 50%, #4b5563 50%, #4b5563 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark input[type="range"]::-moz-range-track {
    background: linear-gradient(to right, #374151 0%, #374151 50%, #4b5563 50%, #4b5563 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.dark input[type="range"]::-webkit-slider-thumb {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-color: #1f2937;
}

.dark input[type="range"]::-moz-range-thumb {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-color: #1f2937;
}

.dark input[type="range"]::-webkit-slider-thumb:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
}

.dark input[type="range"]::-moz-range-thumb:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
}

/* Стили для интерактивного селектора таблиц */
.wysiwyg-editor .table-selector-grid {
    display: grid;
    grid-template-columns: repeat(16, 0fr);
    grid-auto-flow: row;
    grid-template-rows: repeat(16, 1fr);
    gap: 0;
}

.wysiwyg-editor .table-selector-grid .grid-cell {
    transition: all 0.15s ease;
}

.wysiwyg-editor .table-selector-grid .grid-cell:hover {
    transform: scale(1.1);
    z-index: 10;
    position: relative;
}

/* Анимация для выбранных ячеек */
.wysiwyg-editor .table-selector-grid .grid-cell.selected {
    background-color: #3b82f6 !important;
    border-color: #2563eb !important;
    color: white !important;
}

.dark .wysiwyg-editor .table-selector-grid .grid-cell.selected {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
    color: white !important;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 640px) {
    .wysiwyg-editor .table-selector-grid {
        grid-template-columns: repeat(12, 0fr);
        gap: 0;
    }
    
    .wysiwyg-editor .table-selector-grid .grid-cell {
        width: 1rem !important;
        height: 1rem !important;
    }
}

/* Стили для превью ссылок */
.link-preview {
    position: relative;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.link-preview img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0.5rem !important;
    object-fit: cover !important;
    -o-object-fit: cover !important;
}

/* Специфичные стили для изображений в превью ссылок */
.link-preview .flex-shrink-0 img {
    width: 6rem !important; /* w-24 - уменьшаем с w-32 */
    height: 6rem !important; /* h-24 - фиксированная высота */
    object-fit: cover !important;
    -o-object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Убираем лишние отступы у контейнера изображения */
.link-preview .flex-shrink-0 > img,
.link-preview .flex-shrink-0 > div {
    margin: 0 !important;
    padding: 0 !important;
}

/* Переопределяем стили Tailwind Typography для заголовков в превью */
.link-preview h4 {
    margin-top: 0.5rem !important; /* mt-2 - добавляем отступ сверху */
    margin-bottom: 0.5rem !important; /* mb-2 - увеличиваем отступ */
    line-height: 1.25 !important;
    color: rgb(17 24 39) !important; /* text-gray-900 */
    font-weight: 600 !important;
}

.dark .link-preview h4 {
    color: rgb(243 244 246) !important; /* text-gray-100 */
}

/* Переопределяем стили Tailwind Typography для параграфов в превью */
.link-preview p {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important; /* mb-2 */
    line-height: 1.25 !important;
    color: rgb(75 85 99) !important; /* text-gray-600 */
}

.dark .link-preview p {
    color: rgb(156 163 175) !important; /* text-gray-400 */
}

.link-preview .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Стили для индикатора загрузки превью */
.link-preview-loading {
    position: relative;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.link-preview-loading .animate-spin {
    animation: spin 1s linear infinite;
}

.link-preview-loading .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Специфичные стили для контейнера изображения в индикаторе загрузки */
.link-preview-loading .flex-shrink-0 > div {
    width: 6rem !important; /* w-24 - уменьшаем с w-32 */
    height: 6rem !important; /* h-24 - фиксированная высота */
    margin: 0 !important;
    padding: 0 !important;
}

/* Убираем лишние отступы у контейнера изображения в индикаторе загрузки */
.link-preview-loading .flex-shrink-0 > div {
    margin: 0 !important;
    padding: 0 !important;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 640px) {
    .link-preview,
    .link-preview-loading {
        padding: 0.75rem !important;
    }
    
    .link-preview .flex,
    .link-preview-loading .flex {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .link-preview .flex-shrink-0,
    .link-preview-loading .flex-shrink-0 {
        width: 100% !important;
        height: auto !important;
        align-self: stretch !important;
    }
    
    .link-preview .flex-shrink-0 img,
    .link-preview .flex-shrink-0 > div,
    .link-preview-loading .flex-shrink-0 > div {
        width: 100% !important;
        height: 12rem !important; /* h-48 - картинка во всю ширину */
        object-fit: cover !important;
        border-radius: 0.5rem !important;
    }
    
    .link-preview .flex-1 {
        width: 100% !important;
    }
    
    /* Иконка ссылки и домен на одной строке */
    .link-preview .flex.items-center.text-xs {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        justify-content: flex-start !important;
    }
    
    .link-preview .flex.items-center.text-xs svg {
        margin-right: 0 !important;
        flex-shrink: 0 !important;
        width: 1rem !important; /* w-4 - уменьшаем размер иконки */
        height: 1rem !important; /* h-4 */
    }
    
    .link-preview .flex.items-center.text-xs span {
        flex: 1 !important;
        min-width: 0 !important;
    }
}

/* Специальные стили для превью ссылок в постах форума */
.forum-content .link-preview {
    margin: 1rem 0 !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.forum-content .link-preview-loading {
    margin: 1rem 0 !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Переопределяем стили Tailwind Typography для постов форума */
.forum-content .prose .link-preview h4,
.forum-content .prose .link-preview p {
    margin: 0 !important;
    padding: 0 !important;
}

.forum-content .prose .link-preview img {
    margin: 0 !important;
    padding: 0 !important;
}

/* Стили для превью в постах форума - переопределяем prose стили */
.forum-content .prose .link-preview {
    margin: 1rem 0 !important;
    padding: 0 !important;
}

.forum-content .prose .link-preview * {
    margin: 0 !important;
    padding: 0 !important;
}

/* Стили для сохраненных превью в постах */
.saved-link-preview {
    margin: 1rem 0 !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Переопределяем стили Tailwind Typography для сохраненных превью */
.prose .saved-link-preview h4,
.prose .saved-link-preview p {
    margin: 0 !important;
    padding: 0 !important;
}

.prose .saved-link-preview img {
    margin: 0 !important;
    padding: 0 !important;
}

/* Скрываем кнопку удаления в постах форума */
.forum-content .link-preview button[onclick*="remove"],
.forum-content .link-preview button[onclick*="closest"],
.forum-content .saved-link-preview button[onclick*="remove"],
.forum-content .saved-link-preview button[onclick*="closest"] {
    display: none !important;
}

/* Скрываем кнопку удаления в сохраненных превью */
.saved-link-preview button[onclick*="remove"],
.saved-link-preview button[onclick*="closest"] {
    display: none !important;
}


/* Стили только для превью ссылок по специальному классу */
.forum-content .link-preview-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block !important;
}

.forum-content .link-preview-link:hover {
    text-decoration: none !important;
    color: inherit !important;
}

.forum-content .link-preview-link:focus {
    outline: none !important;
}

/* Стили для пустого параграфа после превью в редакторе */
[contenteditable] .empty-paragraph {
    min-height: 1.5em;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

[contenteditable] .empty-paragraph:focus {
    outline: none;
}

/* Обеспечиваем, что пустой параграф всегда видим */
[contenteditable] .empty-paragraph:empty:before {
    content: '\00A0'; /* Неразрывный пробел */
    color: transparent;
}

/* Стили для pending превью (состояние загрузки) */
.link-preview--pending {
    opacity: 0.8;
    border-style: dashed;
}

.link-preview--pending .animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Плавный переход при обновлении превью */
.link-preview {
    transition: opacity 0.3s ease-in-out;
}

.link-preview--updating {
    opacity: 0.7;
}