/* Мобильные стили для экранов до 768px */

@media (max-width: 768px) {
    .container {
        padding: 200px 16px 16px;
    }
    
    /* Скрываем фиксированные панели на мобильных */
    .stream-title-container,
    .stream-description-container {
        display: none !important;
    }
    
    /* Показываем inline панель */
    .stream-info-panel-inline {
        display: block !important;
        margin-bottom: 16px;
    }
    
    /* Таймер на мобильных */
    .countdown-container {
        min-width: auto !important;
        width: auto !important;
        max-width: 90% !important;
        padding: 8px 12px !important;
        top: 10px !important;
        right: 10px !important;
        left: auto !important;
        transform: none !important;
        border-width: 2px !important;
        border-radius: var(--radius-sm) !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .countdown-title {
        font-size: 0.7rem !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }
    
    .countdown-display {
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }
    
    .countdown-item {
        min-width: 35px !important;
        padding: 4px 6px !important;
    }
    
    .countdown-value {
        font-size: 1rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }
    
    .countdown-label {
        font-size: 0.5rem !important;
        line-height: 1 !important;
        margin-top: 2px !important;
    }
    
    .countdown-separator {
        font-size: 0.9rem !important;
        margin: 0 2px !important;
    }
    
    .stream-title-value {
        font-size: 1.2rem !important;
    }
    
    .stream-description-value {
        font-size: 0.9rem !important;
    }
    
    .streams-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    
    .streams-panel {
        padding: 16px;
    }
    
    .panel-title {
        font-size: 1.5rem;
    }
    
    .panel-controls {
        flex-direction: column;
        gap: 8px;
    }
    
    .control-btn {
        font-size: 0.85rem;
        padding: 8px 16px;
    }
    
    .main-content-wrapper {
        flex-direction: column;
        gap: 16px;
        max-width: 100%;
        padding: 0 16px;
    }
    
    .main-player-section {
        padding: 16px;
        width: 100%;
    }
    
    .main-player-wrapper {
        border-radius: var(--radius-sm);
    }
    
    .main-stream-chat {
        flex: 1;
        width: 100%;
        max-height: 400px;
        min-height: 300px;
    }
    
    .chat-container iframe {
        min-height: 300px;
    }
    
    .chat-header {
        padding: 12px 16px;
    }
    
    .chat-title {
        font-size: 1.2rem !important;
    }
}

/* Мобильные стили для очень маленьких экранов */
@media (max-width: 480px) {
    .streams-grid {
        grid-template-columns: 1fr;
    }
    
    .countdown-container {
        max-width: 95% !important;
        padding: 6px 10px !important;
    }
    
    .chat-title {
        font-size: 1rem !important;
    }
}