/* ===== ОСНОВНЫЕ СТИЛИ ДЛЯ ИНЛАЙН-ЭМОДЗИ ===== */

:root {
    --emoji-size: 24px;
    --sticker-size: 120px;
    --text-color: #000;
    --spinner-color: #3498db;
    --spinner-bg: #f3f3f3;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #fff;
        --spinner-color: #667eea;
        --spinner-bg: #333;
    }
}

/* Базовые стили для span контейнеров - КРИТИЧЕСКИЕ ИСПРАВЛЕНИЯ */
.telegram-emoji,
.telegram-sticker {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    position: relative !important;
    overflow: hidden !important;
    transform: translateY(0) !important;
    flex-shrink: 0 !important;
}

/* ===== ФИКС ВЫСОТЫ СТРОК ДЛЯ ЭМОДЗИ ===== */

.telegram-emoji {
    margin: -7px 2px -4px 2px !important; /* поднимаем на 3px */
    width: var(--emoji-size) !important;
    height: var(--emoji-size) !important;
    min-width: var(--emoji-size) !important;
    max-width: var(--emoji-size) !important;
}

/* Для параграфов делаем более точное выравнивание */
p .telegram-emoji {
    margin: -7px 1px -4px 1px !important; /* поднимаем на 3px */
    vertical-align: middle !important;
}

/* Для заголовков немного другие значения */
h1 .telegram-emoji,
h2 .telegram-emoji,
h3 .telegram-emoji,
h4 .telegram-emoji,
h5 .telegram-emoji,
h6 .telegram-emoji {
    margin: -5px 2px -2px 2px !important; /* поднимаем на 3px */
    vertical-align: middle !important;
}

/* Для списков */
li .telegram-emoji {
    margin: -6px 2px -3px 2px !important; /* поднимаем на 3px */
    vertical-align: middle !important;
}

/* Стикеры оставляем как есть - они большие и должны иметь отступы */
.telegram-sticker {
    margin: 5px !important;
    width: var(--sticker-size) !important;
    height: var(--sticker-size) !important;
    min-width: var(--sticker-size) !important;
    max-width: var(--sticker-size) !important;
}

/* Стили для видео элементов - ФИКС РАЗМЕРОВ */
.telegram-emoji video,
.telegram-sticker video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    vertical-align: top !important;
    border: none !important;
    background: transparent !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* ===== КРИТИЧЕСКИЕ ИСПРАВЛЕНИЯ ДЛЯ TGS ===== */

/* Контейнеры для TGS - ФИКС ОБРЕЗАНИЯ */
.tgs-emoji,
.tgs-sticker {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    position: relative !important;
}

/* SVG контейнер внутри TGS - ФИКС ОБРЕЗАНИЯ */
.tgs-emoji svg,
.tgs-sticker svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    min-width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    position: relative !important;
}

/* Альтернативный вариант - масштабирование TGS */
.tgs-emoji .lottie-container,
.tgs-sticker .lottie-container {
    width: 90% !important;
    height: 90% !important;
    transform: scale(0.9) !important;
    transform-origin: center center !important;
}

/* Гарантия что Lottie анимация не обрезается */
.tgs-emoji .lottie-container svg,
.tgs-sticker .lottie-container svg {
    overflow: visible !important;
    display: block !important;
}

/* ===== КРИТИЧЕСКИ ВАЖНЫЕ СТИЛИ ДЛЯ ТЕКСТА ===== */

p .telegram-sticker {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: inherit !important;
    margin: 0 2px !important;
    transform: translateY(0) !important;
}

h1 .telegram-emoji,
h2 .telegram-emoji,
h3 .telegram-emoji,
h4 .telegram-emoji,
h5 .telegram-emoji,
h6 .telegram-emoji {
    vertical-align: middle !important;
}

li .telegram-emoji,
li .telegram-sticker {
    vertical-align: middle !important;
}

/* ===== АДАПТИВНОСТЬ ===== */

@media (max-width: 768px) {
    .telegram-emoji {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        margin: -6px 2px -3px 2px !important; /* адаптивные отступы */
    }
    
    .telegram-sticker {
        width: 100px !important;
        height: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
    }
    
    /* Меньшее масштабирование для мобильных */
    .tgs-emoji .lottie-container,
    .tgs-sticker .lottie-container {
        width: 85% !important;
        height: 85% !important;
        transform: scale(0.85) !important;
    }
}

@media (max-width: 480px) {
    .telegram-emoji {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        margin: -5px 2px -2px 2px !important; /* адаптивные отступы */
    }
    
    .telegram-sticker {
        width: 80px !important;
        height: 80px !important;
        min-width: 80px !important;
        max-width: 80px !important;
    }
}

/* ===== ПОДДЕРЖКА РАЗЛИЧНЫХ КОНТЕКСТОВ ===== */

.elementor-widget-text-editor .telegram-emoji,
.elementor-widget-text-editor .telegram-sticker {
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

.widget-text .telegram-emoji,
.widget-text .telegram-sticker {
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

.comment-text .telegram-emoji,
.comment-text .telegram-sticker {
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

.entry-content .telegram-emoji,
.entry-content .telegram-sticker {
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* ===== ЗАГРУЗКА И ОШИБКИ ===== */

.telegram-emoji-placeholder,
.telegram-sticker-placeholder {
    display: inline !important;
    color: #666 !important;
    background: #f0f0f0 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.9em !important;
    font-family: monospace !important;
}

.tgs-loading {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 3px solid var(--spinner-bg) !important;
    border-top: 3px solid var(--spinner-color) !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.tgs-error {
    display: inline-block !important;
    font-size: 0.8em !important;
    color: #ff4444 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

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

/* ===== ГАРАНТИЯ СОВМЕСТИМОСТИ ===== */

.telegram-emoji *,
.telegram-sticker * {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    line-height: 1 !important;
    vertical-align: baseline !important;
    flex-shrink: 0 !important;
}

/* ===== СТИЛИ ДЛЯ СОСТОЯНИЙ ===== */

.telegram-emoji[data-loading="true"],
.telegram-sticker[data-loading="true"] {
    opacity: 0.7 !important;
}

.telegram-emoji[data-loaded="true"],
.telegram-sticker[data-loaded="true"] {
    opacity: 1 !important;
    transition: opacity 0.3s ease !important;
}

/* ===== FIX ДЛЯ ELEMENTOR И ДРУГИХ БИБЛИОТЕК ===== */

.elementor-widget-container .telegram-emoji,
.elementor-widget-container .telegram-sticker {
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

.elementor-text-editor .telegram-emoji,
.elementor-text-editor .telegram-sticker {
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* FIX для Flex/Grid контейнеров */
.flex-container .telegram-emoji,
.flex-container .telegram-sticker,
.grid-container .telegram-emoji,
.grid-container .telegram-sticker {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* FIX для inline-flex */
[style*="display:inline-flex"] .telegram-emoji,
[style*="display:inline-flex"] .telegram-sticker {
    flex-shrink: 0 !important;
}

/* ===== ВАЖНЫЕ ПЕРЕОПРЕДЕЛЕНИЯ ===== */

/* Гарантия что размеры не будут переопределены */
.telegram-emoji {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
}

.telegram-sticker {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

/* Принудительное применение кастомных размеров */
.telegram-emoji[style*="width"],
.telegram-sticker[style*="width"] {
    min-width: inherit !important;
    max-width: inherit !important;
}

/* ===== СПЕЦИАЛЬНЫЕ ФИКСЫ ДЛЯ TGS ===== */

/* Вариант 1: Уменьшение масштаба TGS анимаций */
.tgs-emoji,
.tgs-sticker {
    transform: scale(0.95) !important;
    transform-origin: center center !important;
}

/* Вариант 2: Паддинг для TGS чтобы не обрезалось */
.tgs-padded {
    padding: 2% !important;
    box-sizing: border-box !important;
}

/* Вариант 3: Автоматическое масштабирование через JavaScript */
.tgs-scaled {
    transform: scale(0.9) !important;
    transform-origin: center center !important;
}