/* ==========================================
   TAB BAR — нижняя навигация (изолированный модуль)
   Разметка: components/tab-bar.html
   Логика: js/modules/tab-bar.js
   Compact Island + V1/V4 (центр, outline → soft-fill)
   ========================================== */

/* Compact Island — приподнят, крупнее тап, сильнее стекло */
.app-tab-bar {
    position: fixed !important;
    left: 50% !important;
    bottom: calc(26px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-evenly !important;
    gap: 2px !important;
    width: 68% !important;
    max-width: 280px !important;
    min-width: 200px !important;
    height: 48px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    background: var(--bg-glass-sticky, linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 100%)) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    box-shadow:
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.28),
        0 10px 28px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06) !important;
    pointer-events: auto !important;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.app-tab-bar.is-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) translateY(calc(100% + 28px)) !important;
}

.app-tab-bar__item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 0 !important;
    min-width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 9999px !important;
    background: transparent !important;
    color: var(--text-secondary, #6B7280) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.app-tab-bar__item:active {
    transform: scale(0.94) !important;
}

/* V1: активная — цвет бренда, без точки; V4 — soft-fill силуэта */
.app-tab-bar__item.is-active {
    color: var(--brand-primary, #2E6653) !important;
    background: transparent !important;
}

.app-tab-bar__icon {
    display: block !important;
    flex-shrink: 0 !important;
    width: 22px !important;
    height: 22px !important;
    overflow: visible !important;
}

.app-tab-bar__stroke {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    transition: stroke-width 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.app-tab-bar__fill {
    fill: currentColor !important;
    stroke: none !important;
    opacity: calc(var(--tab-fill, 0) * 0.22) !important;
    transition: opacity 0.12s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.app-tab-bar__item.is-active .app-tab-bar__fill {
    opacity: calc(var(--tab-fill, 1) * 0.22) !important;
}

.app-tab-bar__item.is-active .app-tab-bar__stroke {
    stroke-width: 2.15 !important;
}

/* ——— Экран «Профиль» (#screen-profile) — preview зеркальной страницы ——— */
.tab-screen--profile {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: auto !important;
    padding: 0 !important;
    padding-bottom: 92px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.tab-screen--profile.hidden {
    display: none !important;
}

.profile-preview {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--content-gutter, 4px) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.profile-preview__header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.6)) !important;
    background: var(--bg-glass-sticky, linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.68) 100%)) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    box-shadow: var(--glass-highlight, inset 0 1px 1px 0 rgba(255, 255, 255, 0.7)), var(--shadow-glass, 0 8px 32px rgba(0, 0, 0, 0.06)) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.profile-preview__avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 9999px !important;
    background: var(--brand-light-bg, #EAF2EE) !important;
    color: var(--brand-primary, #2E6653) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.profile-preview__avatar-icon {
    display: block !important;
    flex-shrink: 0 !important;
}

.profile-preview__identity {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.profile-preview__name {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--text-primary, #111827) !important;
}

.profile-preview__meta {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    color: var(--text-secondary, #6B7280) !important;
}

.profile-preview__bio {
    margin: 8px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: var(--text-primary, #111827) !important;
}

.profile-preview__tabs {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 8px !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.6)) !important;
    background: var(--bg-glass-sticky, linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.68) 100%)) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    box-shadow: var(--glass-highlight, inset 0 1px 1px 0 rgba(255, 255, 255, 0.7)), var(--shadow-subtle, 0 4px 20px rgba(0, 0, 0, 0.03)) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.profile-preview__tab {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border: none !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--text-secondary, #6B7280) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: default !important;
    opacity: 0.85 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent !important;
}

.profile-preview__tab.is-active {
    background: var(--brand-light-bg, #EAF2EE) !important;
    color: var(--brand-primary, #2E6653) !important;
    opacity: 1 !important;
}

.profile-preview__empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 120px !important;
    padding: 24px 16px !important;
    border-radius: 16px !important;
    background: var(--bg-surface, #FFFFFF) !important;
    box-shadow: var(--shadow-subtle, 0 4px 20px rgba(0, 0, 0, 0.03)) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.profile-preview__empty-text {
    margin: 0 !important;
    text-align: center !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: var(--text-secondary, #6B7280) !important;
}

.profile-preview__bridge {
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(46, 102, 83, 0.14) !important;
    background: var(--brand-light-bg, #EAF2EE) !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

.profile-preview__bridge-text {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: var(--brand-dark, #1E5644) !important;
}

.profile-preview__menu {
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    border-radius: 16px !important;
    background: var(--bg-surface, #FFFFFF) !important;
    box-shadow: var(--shadow-subtle, 0 4px 20px rgba(0, 0, 0, 0.03)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.profile-preview__menu-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 52px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--border-light, rgba(226, 232, 240, 0.8)) !important;
    box-sizing: border-box !important;
}

.profile-preview__menu-item:last-child {
    border-bottom: none !important;
}

.profile-preview__menu-label {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--text-primary, #111827) !important;
}

.profile-preview__menu-badge {
    flex-shrink: 0 !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    background: var(--brand-light-bg, #EAF2EE) !important;
    color: var(--brand-primary, #2E6653) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

/* ——— Экран «Лента новостей» (#screen-stories) ———
   Ритм как у #screen-main (DESIGN_SYSTEM.md §5):
   phone-wrapper gutter → padding-top экрана → top-info-bar (margin-bottom)
   → signboard → контент. Без второго горизонтального inset и без flex-gap
   (иначе зазор с margin-bottom бара удваивается). */
.tab-screen--stories {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: auto !important;
    padding: 0 !important;
    padding-bottom: 92px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.tab-screen--stories.hidden {
    display: none !important;
}

/* Пульт координации — те же inset/gap/meta, что у .feed-signboard */
.news-signboard {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--sticky-float-top, 4px) !important;
    z-index: 20 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px 8px 12px !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.6)) !important;
    background: var(--bg-glass-sticky, linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.68) 100%)) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    box-shadow: var(--glass-highlight, inset 0 1px 1px 0 rgba(255, 255, 255, 0.7)), var(--shadow-glass, 0 8px 32px rgba(0, 0, 0, 0.06)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.news-signboard .search-control-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.news-signboard .search-row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    gap: 8px !important;
}

.news-signboard .search-input-wrapper {
    border-radius: 12px !important;
}

.news-signboard .hero__search-input,
.news-signboard .search-input {
    border-radius: 12px !important;
    opacity: 0.85 !important;
    cursor: pointer !important;
}

.news-signboard .add-product-btn {
    border-radius: 12px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #2E6653 0%, #1E5644 100%) !important;
    color: var(--text-on-brand, #FFFFFF) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow:
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.4),
        var(--shadow-subtle, 0 4px 20px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02)) !important;
    opacity: 0.72 !important;
    flex-shrink: 0 !important;
}

.news-signboard .add-product-btn:active {
    transform: scale(0.96) translateY(1px) !important;
}

/* Категории — как на витрине (gap 8px, padding-bottom 2px), без своих inset */
.news-signboard .categories-scroll,
.news-signboard .categories-row,
.news-signboard .categories-scroll-container {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 2px !important;
    gap: 8px !important;
}

.news-signboard .category-filter-btn,
.news-signboard .category-btn {
    padding: 6px 14px !important;
}

/* Мета-строка — слот 40px и gap 12px как у .feed-signboard */
.news-signboard .feed-controls-bar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.news-signboard .feed-controls-bar__meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 4px 0 0 0 !important;
    box-sizing: border-box !important;
}

/* Интерактивное уведомление — баннер мессенджера поверх меню */
.news-feed-notice {
    position: fixed !important;
    left: 50% !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    z-index: 50 !important;
    width: calc(100% - 24px) !important;
    max-width: 396px !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.6)) !important;
    background: var(--bg-glass-sticky, linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 100%)) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow:
        var(--glass-highlight, inset 0 1px 1px 0 rgba(255, 255, 255, 0.7)),
        0 12px 40px rgba(0, 0, 0, 0.14) !important;
    box-sizing: border-box !important;
    transform: translate(-50%, -120%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.45s !important;
}

.news-feed-notice.is-open {
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.news-feed-notice.is-closing {
    transform: translate(-50%, -120%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Новости / профиль: баннер на уровне .global-phone-wrapper — поверх main и Tab Bar */
.profile-notice,
#profile-notice,
#news-feed-notice {
    z-index: 55 !important;
}

.news-feed-notice__text {
    margin: 0 0 10px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--text-primary, #111827) !important;
}

.news-feed-notice__actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
}

.news-feed-notice__btn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 9999px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease !important;
}

.news-feed-notice__btn:active {
    transform: scale(0.97) !important;
}

.news-feed-notice__btn--ghost {
    border: none !important;
    background: transparent !important;
    color: var(--text-secondary, #6B7280) !important;
}

.news-feed-notice__btn--solid {
    border: 1px solid rgba(46, 102, 83, 0.22) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: var(--brand-primary, #2E6653) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.news-feed-vk {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 600px !important;
    box-sizing: border-box !important;
}

/* Воздух под контентом Tab Bar — только для #screen-stories/#screen-profile.
   #screen-main убран из списка: Tab Bar временно отключён (см. app.js),
   лишний зазор над футером не нужен. Верни #screen-main сюда при включении Tab Bar обратно. */
#screen-stories,
#screen-profile {
    padding-bottom: 92px !important;
}

/* ——— Свайп вкладок: короткая анимация входа (js/modules/tab-swipe.js) ———
   Применяется ТОЛЬКО к только что показанному экрану (свежий scrollTop=0,
   sticky-шапка ещё не «прилипла» — transform здесь безопасен, см. §3.2).
   Класс снимается сразу после анимации, экран возвращается в исходное
   состояние без transform/overflow — sticky продолжает работать как обычно. */
@keyframes tab-screen-enter-from-right {
    from { transform: translate3d(28px, 0, 0); opacity: 0.55; }
    to { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes tab-screen-enter-from-left {
    from { transform: translate3d(-28px, 0, 0); opacity: 0.55; }
    to { transform: translate3d(0, 0, 0); opacity: 1; }
}

.tab-screen-enter-right {
    animation: tab-screen-enter-from-right 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-screen-enter-left {
    animation: tab-screen-enter-from-left 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
    .tab-screen-enter-right,
    .tab-screen-enter-left {
        animation: none;
    }
}