/* =============================================
   MOBILE CSS: TELEGRAM GLASSMORPHISM
   ============================================= */

/* 1. ГЛОБАЛЬНЫЙ ФОН И ОПТИМИЗАЦИЯ */
body {
    overscroll-behavior-y: none; 
    -webkit-tap-highlight-color: transparent;
    /* Создаем мягкий фоновый градиент для эффекта стекла */
    background: linear-gradient(135deg, #e0e5ec 0%, #ffffff 100%);
    background-attachment: fixed;
}
[data-theme="dark"] body {
    background: linear-gradient(135deg, #0f1115 0%, #1a1d24 100%);
}

/* ОТКЛЮЧАЕМ ТЯЖЕЛЫЕ ДЕСКТОПНЫЕ ЭФФЕКТЫ */
.news-card::before, .pinned-card::before { display: none !important; }
.news-card:hover { transform: none !important; box-shadow: none !important; }

/* 2. ШАПКА (ЖИДКОЕ СТЕКЛО) */
header {
    padding: 10px 16px;
    flex-wrap: nowrap;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
    
    /* Эффект матового стекла */
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: saturate(200%) blur(25px);
    -webkit-backdrop-filter: saturate(200%) blur(25px);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
[data-theme="dark"] header {
    background: rgba(20, 22, 28, 0.65);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.stats, .priority-pins, .search-container { display: none; }
.logo { font-size: 1.5rem; }

/* 3. ЛЕЙАУТ */
.main-wrapper {
    flex-direction: column;
    overflow: hidden;
    padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px));
}
#columns-container {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px; /* Даем отступы по краям для карточек */
    gap: 12px;
}
.column { width: 100% !important; flex: none; margin-bottom: 0; }
.column-header { display: none; } 

/* 4. КАРТОЧКИ (ПОЛУПРОЗРАЧНЫЕ ПЛАШКИ) */
.news-list { padding: 0; margin: 0; gap: 10px; }

.news-card {
    padding: 14px 16px;
    border-radius: 16px; /* Более круглые края, как в современных аппках */
    
    /* Стеклянная карточка */
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    
    min-height: unset;
    contain-intrinsic-size: unset;
    will-change: transform, opacity; /* Подсказка браузеру для плавного свайпа */
}

[data-theme="dark"] .news-card {
    background: rgba(30, 33, 40, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.news-card.unread {
    /* Индикатор смещен внутрь */
    background: rgba(255, 255, 255, 0.85);
    border-left: 4px solid var(--accent-orange);
}
[data-theme="dark"] .news-card.unread {
    background: rgba(45, 50, 60, 0.6);
}

.news-card-source {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}

.news-title {
    font-size: 1rem;
    line-height: 1.35;
    margin-bottom: 8px;
    color: var(--text-main);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-meta { justify-content: flex-start; gap: 10px; }
.time-text { font-size: 0.75rem; font-weight: 500; opacity: 0.7; }
.dismiss-btn { display: none; }

/* 5. SIDEBAR (ВАЖНОЕ) */
.sidebar { display: none; }
.sidebar.active {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 90;
    
    /* Фон сайдбара тоже стеклянный */
    background: rgba(244, 245, 247, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    overflow-y: auto;
    width: 100%;
    border: none;
    padding-bottom: calc(85px + env(safe-area-inset-bottom, 0px));
    animation: slideUpFade 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="dark"] .sidebar.active { background: rgba(14, 14, 14, 0.85); }

@keyframes slideUpFade {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.sidebar-header {
    padding: 20px 16px;
    position: sticky;
    top: 0;
    background: transparent;
    z-index: 2;
    border-bottom: 0.5px solid rgba(0,0,0,0.05);
}
[data-theme="dark"] .sidebar-header { border-bottom: 0.5px solid rgba(255,255,255,0.05); }

.pinned-list { padding: 16px; gap: 12px; }
.pinned-card {
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
[data-theme="dark"] .pinned-card {
    background: rgba(30, 33, 40, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.unpin-btn { top: 14px; right: 16px; font-size: 1.5rem; opacity: 1; color: var(--text-muted); }

/* 6. НИЖНЯЯ ПАНЕЛЬ НАВИГАЦИИ (ТАБЫ) */
.mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 70px;
    
    /* Экстремальное размытие */
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: saturate(200%) blur(25px);
    -webkit-backdrop-filter: saturate(200%) blur(25px);
    border-top: 0.5px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.02);
    
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 100;
}

[data-theme="dark"] .mobile-nav {
    background: rgba(20, 22, 28, 0.65);
    border-top: 0.5px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    padding: 8px 24px;
    border-radius: 20px;
    transition: transform 0.1s ease; /* Только быстрый скейл при тапе */
}
.nav-item:active { transform: scale(0.92); }

.nav-item svg { width: 24px; height: 24px; fill: currentColor; }
.nav-item span { font-size: 0.65rem; font-weight: 600; }

.nav-item.active {
    color: var(--accent-orange);
}