/**
 * БЁРЧИ 2026 | UNIFIED IMMERSIVE FEED ENGINE
 * Файл: assets/css/feed-reels.css
 * Версия 16.4 | ИДЕАЛЬНЫЙ FLAT UI + Прямые углы для медиа
 */

/* === 1. ГЛОБАЛЬНЫЙ ФОН (ЕДИНОЕ ПРОСТРАНСТВО) === */
body.feed-body {
    background: var(--bg-main) !important;
}

/* Убиваем все старые свечения, градиенты и бутафорию */
.aurora-bg, 
.feed-stage::before, 
#app-container::before {
    display: none !important; 
}

/* === 2. КАРТОЧКА ПОСТА (НЕВИДИМАЯ ОБОЛОЧКА) === */
.wall-post-card {
    /* Главная магия: карточки больше не существует визуально */
    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    
    padding: 24px 15px !important; /* Отступы для текста от краев экрана */
    margin-bottom: 0 !important; /* Убрали все дыры между постами */
    
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* Убираем эффекты наведения, так как карточка невидима */
.wall-post-card:hover {
    box-shadow: none !important;
    background: transparent !important;
}

/* === 3. ТЕКСТ И ШАПКА === */
.post-caption {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--text-primary) !important;
    word-wrap: break-word !important;
    font-family: 'Inter', sans-serif !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
}

/* === 4. ИИ-ДИАЛОГИ И ИГРЫ ВНУТРИ ПОСТА === */
.ai-dialog-container,
.quiz-premium-container { 
    background: rgba(128, 128, 128, 0.05) !important; /* Легчайшее выделение для читаемости */
    border-radius: 20px !important; 
    padding: 16px !important; 
    border: 1px solid rgba(128, 128, 128, 0.1) !important; 
    width: 100% !important; 
    display: flex !important; 
    flex-direction: column !important; 
    box-sizing: border-box !important;
    margin-bottom: 16px !important;
}

.ai-dialog-container {
    overflow: hidden !important; 
}

/* Фикс для Квиза: даем высоту и снимаем overflow, чтобы кнопка не проваливалась */
.quiz-premium-container {
    min-height: 450px !important; /* Увеличили минимальную высоту */
    height: auto !important; /* Разрешаем тянуться по контенту */
    overflow: visible !important; 
    position: relative !important;
    padding: 24px 20px !important;
}

/* Заставляем внутренний движок игры растягивать родителя */
.quiz-premium-container .fg-engine-container {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 400px !important;
    display: flex !important;
    flex-direction: column !important;
}

.ai-dialog-header { 
    display: flex !important; 
    align-items: center !important; 
    gap: 8px !important; 
    margin-bottom: 16px !important; 
    padding-bottom: 12px !important; 
    border-bottom: 1px solid rgba(128, 128, 128, 0.1) !important; 
}

.ai-dialog-content { 
    max-height: 400px !important; 
    overflow-y: auto !important; 
    padding-right: 4px !important; 
    display: flex !important; 
    flex-direction: column !important; 
    scrollbar-width: thin !important; 
    scrollbar-color: var(--accent-primary) transparent !important; 
}

.ai-msg-bubble { 
    margin-bottom: 12px !important; 
    padding: 12px 16px !important; 
    border-radius: 16px !important; 
    font-size: 14px !important; 
    line-height: 1.4 !important; 
    color: var(--text-primary) !important; 
    width: fit-content !important; 
    max-width: 85% !important; 
    opacity: 0; 
    transform: translateY(15px); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
    flex-shrink: 0 !important; 
}

.ai-msg-bubble.visible { 
    opacity: 1 !important; 
    transform: translateY(0) !important; 
}

.ai-msg-user { 
    background: linear-gradient(135deg, var(--accent-primary), #8466ff) !important; 
    color: #fff !important; 
    margin-left: auto !important; 
    border-bottom-right-radius: 4px !important; 
}

.ai-msg-bot { 
    background: rgba(128, 128, 128, 0.08) !important; 
    border: none !important; 
    margin-right: auto !important; 
    border-bottom-left-radius: 4px !important; 
}

.typing-indicator { 
    display: flex !important; gap: 4px !important; padding: 4px 8px !important; 
    align-items: center !important; justify-content: center !important; height: 20px !important; 
}
.typing-indicator span { 
    width: 6px !important; height: 6px !important; background: var(--text-secondary) !important; 
    border-radius: 50% !important; animation: typingBounce 1.4s infinite ease-in-out both !important; 
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s !important; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s !important; }
@keyframes typingBounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }

/* Музыкальный тикер */
.post-music-ticker { 
    display: flex !important; 
    align-items: center !important; 
    gap: 10px !important; 
    background: transparent !important; 
    padding: 4px 0 !important; 
    cursor: pointer !important; 
    transition: 0.2s !important; 
    width: fit-content !important; 
    max-width: 100% !important; 
    margin-top: 8px !important;
}

.ticker-text-wrap { 
    overflow: hidden !important; 
    white-space: nowrap !important; 
    flex: 1 !important; 
    mask-image: linear-gradient(to right, #000 80%, transparent 100%) !important; 
    -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%) !important; 
}

.ticker-text { 
    display: inline-block !important; 
    padding-right: 100% !important; 
    animation: tickerScroll 8s linear infinite !important; 
    font-size: 13px !important; 
    font-weight: 600 !important; 
    color: var(--text-primary) !important; 
}

.audio-card-glass {
    background: transparent !important;
    border-radius: 16px !important;
    padding: 15px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
}

/* === 5. КНОПКИ ДЕЙСТВИЙ (ПРОЗРАЧНЫЕ, ВПИСАННЫЕ В ФОН) === */
.post-footer-actions {
    display: flex !important;
    gap: 20px !important;
    padding-top: 12px !important;
    align-items: center !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    border-top: none !important; /* Убиваем последнюю рамку в футере */
}

/* Очищаем кнопки от фонов, рамок и лишних паддингов */
.btn-like, .btn-comment, .btn-share {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
}

.btn-like i, .btn-comment i, .btn-share i {
    font-size: 20px !important;
}

.btn-share i {
    font-size: 18px !important;
}

.btn-like:hover, .btn-comment:hover, .btn-share:hover {
    color: var(--text-primary) !important;
    background: transparent !important;
}

.btn-like.liked {
    color: #ef4444 !important;
}
.btn-like.liked i {
    color: #ef4444 !important;
}

.critter-feed-btn {
    background: transparent !important; 
    border: none !important; 
    width: 32px !important; 
    height: 32px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: flex-end !important; 
    cursor: pointer !important; 
    transition: 0.2s !important;
    margin-left: auto !important;
    padding: 0 !important;
}

.critter-feed-btn:hover {
    transform: scale(1.1) !important;
    background: transparent !important;
}

/* === 6. НАСТОЯЩИЙ EDGE-TO-EDGE ДЛЯ МЕДИА НА МОБИЛЬНЫХ === */
@media (max-width: 768px) {
    /* Фулл-блид для картинок и видео: они растягиваются на весь экран */
    .wall-post-card div[style*="max-height: 600px"],
    .wall-post-card .quiz-card-wrapper {
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: calc(100% + 30px) !important;
        max-width: none !important;
        border-radius: 0 !important;
        border: none !important;
    }
    
    .wall-post-card div[style*="max-height: 600px"] img,
    .wall-post-card div[style*="max-height: 600px"] video {
        border-radius: 0 !important; 
    }

    /* ИИ-Диалоги тоже от края до края, но текст внутри имеет отступы */
    .wall-post-card .ai-dialog-container,
    .wall-post-card .quiz-premium-container {
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: calc(100% + 30px) !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        padding: 16px 15px !important;
    }

    /* На очень узких экранах прячем текст кнопки репоста */
    .btn-share .hide-mobile {
        display: none !important;
    }
    
    /* Добавляем немного свободного пространства снизу поста для дыхания контента */
    .wall-post-card {
        padding-bottom: 35px !important;
    }
}

/* Для ПК медиа-контейнеры ИМЕЛИ скругления, теперь ПРЯМЫЕ УГЛЫ */
@media (min-width: 769px) {
    .wall-post-card div[style*="max-height: 600px"] img,
    .wall-post-card div[style*="max-height: 600px"] video {
        border-radius: 0 !important; 
    }
}