/* assets/css/mobile.css — мобильный дизайн SHub
   ============================================================
   Активируется только при <= 768px.
   На десктопе ВСЁ мобильное скрыто через .mobile-only и явные правила.
   ============================================================ */

/* ============================================================
   ПЕРЕМЕННЫЕ ДЛЯ МОБИЛЬНОГО
   ============================================================ */
:root {
    --mobile-bottom-nav-height: 64px;
    --mobile-header-height: 56px;
    --mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-safe-area-top: env(safe-area-inset-top, 0px);
    --mobile-touch-target: 44px;
}

/* ============================================================
   ⚡ ДЕСКТОП (> 768px)
   Скрываем ВСЁ мобильное, показываем десктопное.
   ВАЖНО: НЕ ставим pointer-events !important — иначе не перебьём
   внутри медиа-запроса.
   ============================================================ */
.mobile-only,
.mobile-bottom-nav,
.mobile-drawer,
.mobile-drawer-overlay,
.mobile-menu-btn,
.mobile-page-title {
    display: none !important;
    visibility: hidden !important;
}

.desktop-header {
    display: flex !important;
    visibility: visible !important;
}

.discord-sidebar {
    display: flex !important;
    visibility: visible !important;
}

/* ============================================================
   ⚡ МОБИЛЬНАЯ ВЕРСИЯ (<= 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* ---------- ПОКАЗЫВАЕМ/СКРЫВАЕМ ---------- */
    .desktop-header {
        display: none !important;
        visibility: hidden !important;
    }

    .discord-sidebar {
        display: none !important;
        visibility: hidden !important;
    }

    .mobile-only {
        display: flex !important;
        visibility: visible !important;
    }

    .mobile-menu-btn {
        display: flex !important;
        visibility: visible !important;
    }

    .mobile-page-title {
        display: flex !important;
        visibility: visible !important;
    }

    /* ============================================================
       БАЗОВЫЙ КАРКАС
       ============================================================ */
    html, body {
        overflow: hidden;
        height: 100dvh;
        height: 100vh;
        position: fixed;
        inset: 0;
        width: 100%;
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
    }

    .main-app.visible {
        display: flex !important;
        flex-direction: column;
        height: 100dvh;
        width: 100%;
        padding-top: var(--mobile-safe-area-top);
        padding-bottom: 0;
        overflow: hidden;
    }

    .main-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        padding-bottom: 0;
        min-height: 0;
    }

    /* ============================================================
       ⚡ МОБИЛЬНЫЙ ХЕДЕР
       ============================================================ */
    #mobileHeader.top-bar-enhanced {
        min-height: var(--mobile-header-height);
        padding: 8px 12px;
        padding-top: max(8px, var(--mobile-safe-area-top));
        background: rgba(12, 12, 30, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--glass-border);
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        position: relative;
        top: 0;
        z-index: 100;
        flex-shrink: 0;
        width: 100%;
        box-sizing: border-box;
        pointer-events: auto;
    }

    #mobileHeader::after {
        display: none;
    }

    #mobileHeader .header-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0;
        pointer-events: auto;
    }

    #mobileHeader .header-right {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        pointer-events: auto;
    }

    /* Кнопка-гамбургер */
    .mobile-menu-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--glass-border);
        color: var(--text-primary);
        align-items: center;
        justify-content: center;
        font-size: 17px;
        cursor: pointer;
        flex-shrink: 0;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease, transform 0.1s ease;
        pointer-events: auto;
        z-index: 1;
    }

    .mobile-menu-btn > * {
        pointer-events: none;
    }

    .mobile-menu-btn:active {
        transform: scale(0.92);
        background: rgba(124, 58, 237, 0.15);
    }

    /* Заголовок страницы */
    .mobile-page-title {
        flex-direction: column;
        line-height: 1.1;
        min-width: 0;
        flex: 1;
        overflow: hidden;
        justify-content: center;
        pointer-events: none; /* не перехватывает клики — там нет интерактива */
    }

    .mobile-page-title .title {
        font-size: 15px;
        font-weight: 700;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }

    .mobile-page-title .subtitle {
        font-size: 9px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 1.2px;
        opacity: 0.55;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }

    /* Баланс */
    #mobileHeader .header-balance {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 5px 10px 5px 7px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 10px;
        flex-shrink: 0;
        pointer-events: none;
    }

    #mobileHeader .balance-icon {
        width: 20px;
        height: 20px;
        min-width: 20px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
    }

    #mobileHeader .balance-icon i {
        font-size: 9px;
        color: #fff;
    }

    #mobileHeader .balance-value {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1;
        min-width: 16px;
        text-align: center;
    }

    /* Уведомления */
    #mobileHeader .header-actions {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-shrink: 0;
        pointer-events: auto;
    }

    #mobileHeader .header-action-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 10px;
        background: transparent;
        border: none;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        padding: 0;
        cursor: pointer;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease, color 0.15s ease;
        pointer-events: auto;
        z-index: 1;
    }

    #mobileHeader .header-action-btn > * {
        pointer-events: none;
    }

    #mobileHeader .header-action-btn:active {
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-primary);
    }

    #mobileHeader .notifications-btn .notifications-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        background: var(--danger);
        color: #fff;
        font-size: 8px;
        font-weight: 700;
        min-width: 16px;
        height: 16px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border: 2px solid rgba(12, 12, 30, 0.98);
        pointer-events: none;
    }

    /* ============================================================
       КОНТЕНТ
       ============================================================ */
    .content-area-enhanced {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 12px 12px calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom) + 20px);
        max-width: 100%;
        min-height: 0;
        overscroll-behavior: contain;
    }

    .page {
        max-width: 100%;
        width: 100%;
        padding: 0;
    }

    /* ============================================================
       ⚡ НИЖНЯЯ НАВИГАЦИЯ (BOTTOM TAB BAR)
       z-index: 300 — выше контента, но не выше drawer (500).
       pointer-events: auto ВСЕГДА.
       ============================================================ */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom));
        padding-bottom: var(--mobile-safe-area-bottom);
        background: rgba(12, 12, 30, 0.98);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-top: 1px solid var(--glass-border);
        display: flex !important;
        visibility: visible !important;
        align-items: stretch;
        justify-content: space-around;
        z-index: 300;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
        pointer-events: auto !important;
    }

    .mobile-bottom-nav::before {
        content: '';
        position: absolute;
        top: -1px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent);
        opacity: 0.4;
        pointer-events: none;
    }

    .mobile-nav-item {
        flex: 1;
        height: var(--mobile-bottom-nav-height);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        position: relative;
        padding: 0;
        font-family: var(--font);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.15s ease, transform 0.1s ease;
        pointer-events: auto !important;
        z-index: 1;
    }

    /* ⚡ Иконки и текст не перехватывают клики — клик идёт на кнопку */
    .mobile-nav-item > * {
        pointer-events: none;
    }

    .mobile-nav-item.hidden {
        display: none !important;
    }

    .mobile-nav-item i {
        font-size: 20px;
        line-height: 1;
        transition: transform 0.2s ease;
    }

    .mobile-nav-item span {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.3px;
        line-height: 1;
    }

    .mobile-nav-item.active {
        color: var(--primary-light);
    }

    .mobile-nav-item.active i {
        transform: translateY(-2px) scale(1.08);
        filter: drop-shadow(0 0 8px var(--primary-glow));
    }

    .mobile-nav-item:active {
        transform: scale(0.94);
    }

    .mobile-nav-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        background: linear-gradient(90deg, var(--primary), var(--secondary));
        border-radius: 0 0 3px 3px;
        box-shadow: 0 0 12px var(--primary-glow);
        pointer-events: none;
    }

    .mobile-nav-item .mobile-nav-badge {
        position: absolute;
        top: 6px;
        right: calc(50% - 20px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: var(--danger);
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid rgba(12, 12, 30, 0.98);
        pointer-events: none;
    }

    .mobile-nav-item .mobile-nav-badge.hidden {
        display: none !important;
    }

    /* ============================================================
       ⚡ DRAWER (выезжающее меню)
       z-index: 500 — выше всего.
       ============================================================ */

    /* Overlay — скрыт и не ловит клики пока закрыт */
    .mobile-drawer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 490;
        display: block !important;
        visibility: visible !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        will-change: opacity;
    }

    .mobile-drawer-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Сам drawer */
    .mobile-drawer {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 82vw;
        background: rgba(15, 15, 32, 0.99);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        z-index: 500;
        display: flex !important;
        visibility: visible !important;
        flex-direction: column;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding-top: var(--mobile-safe-area-top);
        border-right: 1px solid var(--glass-border);
        box-shadow: 8px 0 40px rgba(0, 0, 0, 0.7);
        overflow: hidden;
        will-change: transform;
        pointer-events: auto;
    }

    .mobile-drawer.open {
        transform: translateX(0);
    }

    /* Пока drawer закрыт — не ловит клики */
    .mobile-drawer:not(.open) {
        pointer-events: none;
    }

    /* Шапка */
    .mobile-drawer-header {
        padding: 20px 20px 16px;
        border-bottom: 1px solid var(--glass-border);
        display: flex;
        align-items: center;
        gap: 14px;
        flex-shrink: 0;
        position: relative;
        z-index: 1;
    }

    .mobile-drawer-avatar {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        box-shadow: 0 0 20px var(--primary-glow);
        flex-shrink: 0;
    }

    .mobile-drawer-user {
        flex: 1;
        min-width: 0;
    }

    .mobile-drawer-name {
        font-size: 15px;
        font-weight: 700;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }

    .mobile-drawer-group {
        font-size: 11px;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
        margin-top: 2px;
    }

    .mobile-drawer-close {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--glass-border);
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        cursor: pointer;
        flex-shrink: 0;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
        pointer-events: auto;
        z-index: 1;
    }

    .mobile-drawer-close > * {
        pointer-events: none;
    }

    .mobile-drawer-close:active {
        background: rgba(255, 255, 255, 0.08);
    }

    /* Скролл-область меню */
    .mobile-drawer-menu {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 12px 12px 24px;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
        overscroll-behavior: contain;
    }

    .mobile-drawer-section {
        margin-bottom: 8px;
    }

    .mobile-drawer-section.hidden {
        display: none !important;
    }

    .mobile-drawer-section-title {
        font-size: 10px;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        padding: 10px 12px 4px;
        opacity: 0.5;
    }

    .mobile-drawer-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 13px 14px;
        border-radius: 14px;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
        margin-bottom: 2px;
        -webkit-tap-highlight-color: transparent;
        border: 1px solid transparent;
        min-height: 46px;
        box-sizing: border-box;
        user-select: none;
        pointer-events: auto;
        z-index: 1;
    }

    /* ⚡ Дети не перехватывают — клик всплывает на item */
    .mobile-drawer-item > * {
        pointer-events: none;
    }

    .mobile-drawer-item i {
        width: 22px;
        text-align: center;
        font-size: 17px;
        color: var(--text-muted);
        flex-shrink: 0;
        transition: color 0.15s ease;
    }

    .mobile-drawer-item > span:not(.item-badge) {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-drawer-item:active {
        background: rgba(255, 255, 255, 0.06);
    }

    .mobile-drawer-item.active {
        background: rgba(124, 58, 237, 0.12);
        color: var(--text-primary);
        border-color: rgba(124, 58, 237, 0.25);
    }

    .mobile-drawer-item.active i {
        color: var(--primary-light);
    }

    .mobile-drawer-item .item-badge {
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        background: var(--danger);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-left: auto;
    }

    .mobile-drawer-item .item-badge.hidden {
        display: none !important;
    }

    /* Футер */
    .mobile-drawer-footer {
        padding: 16px 20px calc(16px + var(--mobile-safe-area-bottom));
        border-top: 1px solid var(--glass-border);
        flex-shrink: 0;
    }

    .mobile-drawer-logout {
        width: 100%;
        padding: 14px;
        background: rgba(239, 68, 68, 0.12);
        border: 1px solid rgba(239, 68, 68, 0.25);
        border-radius: 14px;
        color: #f87171;
        font-size: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        cursor: pointer;
        font-family: var(--font);
        -webkit-tap-highlight-color: transparent;
        min-height: var(--mobile-touch-target);
        pointer-events: auto;
        z-index: 1;
    }

    .mobile-drawer-logout > * {
        pointer-events: none;
    }

    .mobile-drawer-logout:active {
        background: rgba(239, 68, 68, 0.25);
    }

    /* ⚡ Блокировка скролла body при открытом drawer */
    body.drawer-open {
        overflow: hidden !important;
    }

    /* ============================================================
       ⚡ МОДАЛКИ КАК BOTTOM SHEETS
       ============================================================ */
    .modal {
        align-items: flex-end;
        padding: 0;
    }

    .modal.active {
        display: flex !important;
    }

    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 88dvh;
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        margin: 0;
        position: relative;
        padding-top: 12px;
    }

    .modal.active .modal-content {
        transform: translateY(0);
    }

    .modal-content::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.18);
        z-index: 10;
    }

    .modal-header {
        padding: 22px 18px 14px;
        border-bottom: 1px solid var(--glass-border);
    }

    .modal-header h3 {
        font-size: 16px;
    }

    .modal-body {
        padding: 18px;
        gap: 12px;
    }

    .modal-body input,
    .modal-body select,
    .modal-body textarea {
        padding: 14px 16px;
        font-size: 16px;
        border-radius: 12px;
    }

    .modal-footer {
        padding: 14px 18px calc(14px + var(--mobile-safe-area-bottom));
        gap: 10px;
    }

    .modal-footer .btn-primary,
    .modal-footer .btn-cancel {
        flex: 1;
        padding: 14px;
        font-size: 14px;
        min-height: var(--mobile-touch-target);
    }

    /* ============================================================
       КАРТОЧКИ
       ============================================================ */
    .schedule-grid-new,
    .events-grid-new,
    .shop-grid-new,
    .titles-grid,
    .students-list-new,
    .groups-list-new,
    .admin-shop-items-grid,
    .admin-events-grid,
    .promos-list-new {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pair-card-new,
    .event-card,
    .shop-item-new,
    .title-card,
    .student-card,
    .group-card-new {
        padding: 16px;
        border-radius: 16px;
    }

    .pair-name { font-size: 17px; }
    .event-title { font-size: 18px; }
    .shop-title { font-size: 16px; }

    .stat-card-new {
        padding: 14px 16px;
        min-width: 0;
    }

    .stat-card-new i { font-size: 22px; }
    .stat-card-new .stat-number { font-size: 20px; }

    .stats-cards {
        gap: 10px;
        margin-bottom: 16px;
    }

    .student-actions-row,
    .student-header > div:last-child {
        width: 100%;
    }

    .action-btn {
        padding: 10px 14px;
        font-size: 12px;
        flex: 1;
        justify-content: center;
        min-height: var(--mobile-touch-target);
    }

        /* ============================================================
       ⚡ МЕССЕНДЖЕР / ЧАТЫ / ПОДДЕРЖКА
       ============================================================ */
    .messenger-layout,
    .messenger-container,
    .admin-messenger-container {
        grid-template-columns: 1fr;
        height: calc(100dvh - var(--mobile-header-height) - var(--mobile-bottom-nav-height) - var(--mobile-safe-area-bottom) - 32px);
        max-height: none;
        border-radius: 16px;
        margin: 0;
        position: relative;
        overflow: hidden;
    }

    /* Sidebar на мобильном — накладывается поверх main */
    .messenger-sidebar,
    .chats-sidebar,
    .admin-chats-sidebar {
        width: 100%;
        max-height: none;
        border-right: none;
        border-bottom: none;
        position: absolute;
        inset: 0;
        z-index: 10;
        transition: transform 0.3s ease;
        background: var(--glass-bg);
        transform: translateX(0);
        will-change: transform;
    }

    /* ⚡ Скрываем sidebar ТОЛЬКО когда на layout есть класс 'chat-open'.
       Это единая точка правды — без конфликта классов. */
    .messenger-layout.chat-open .messenger-sidebar,
    .messenger-container.chat-open .chats-sidebar,
    .admin-messenger-container.chat-open .admin-chats-sidebar {
        transform: translateX(-100%);
        pointer-events: none;
    }

    /* ⚡ Принудительно игнорируем .hidden-sidebar — теперь всё через .chat-open */
    .messenger-sidebar.hidden-sidebar {
        /* никаких трансформов — управляем через .chat-open на родителе */
        transform: translateX(0);
    }

    .messenger-layout.chat-open .messenger-sidebar.hidden-sidebar {
        transform: translateX(-100%);
    }

    .messenger-main,
    .conversation-area {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 1;
    }

    .messenger-header .back-btn,
    .conversation-header .back-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: transparent;
        border: none;
        color: var(--text-secondary);
        font-size: 18px;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
        border-radius: 10px;
    }

    .messenger-header .back-btn:active,
    .conversation-header .back-btn:active {
        background: rgba(255, 255, 255, 0.05);
    }

    .message-item { max-width: 88%; }
    .message-bubble-messenger { padding: 10px 14px; font-size: 14px; }

    .messenger-input-area,
    .message-input-area,
    .common-message-input {
        padding: 10px 12px calc(10px + var(--mobile-safe-area-bottom));
        gap: 8px;
    }

    .messenger-input,
    .common-message-input textarea,
    .message-input-area textarea {
        font-size: 16px;
        min-height: 42px;
        border-radius: 20px;
        padding: 11px 16px;
    }

    .messenger-image-btn,
    .messenger-file-btn,
    .messenger-send-btn,
    .common-chat-image-btn,
    .common-chat-file-btn,
    .send-message-btn {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 17px;
        flex-shrink: 0;
    }

    .common-message-input .send-btn {
        padding: 0 16px;
        height: 42px;
        min-height: 42px;
        font-size: 13px;
        flex-shrink: 0;
    }

    /* ============================================================
       ⚡ AI-АССИСТЕНТ — СКРЫТИЕ В ЧАТАХ
       ============================================================ */
    .ai-floating-btn {
        bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom) + 16px);
        right: 16px;
        width: 56px;
        height: 56px;
        font-size: 22px;
        transition: opacity 0.25s ease, transform 0.25s ease;
        z-index: 150;
    }

    body:has(#common-chatPage.active) .ai-floating-btn,
    body:has(#common-chat-adminPage.active) .ai-floating-btn,
    body:has(#messengerPage.active) .ai-floating-btn,
    body:has(#chatPage.active) .ai-floating-btn,
    body:has(#chat-adminPage.active) .ai-floating-btn {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: scale(0.5) !important;
    }

    body.ai-hidden .ai-floating-btn {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: scale(0.5) !important;
    }

    .ai-modal {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    .ai-modal-content {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        border: none;
    }

    .ai-chat-header {
        padding: 14px 16px;
        padding-top: max(14px, var(--mobile-safe-area-top));
    }

    .ai-input-area {
        padding: 10px 12px calc(10px + var(--mobile-safe-area-bottom));
    }

    .ai-input-area textarea {
        font-size: 16px;
    }

    /* ============================================================
       РЕЙТИНГ
       ============================================================ */
    #leaderboardContainer,
    #leaderboardAdminContainer {
        padding: 12px 10px 24px;
    }

    .lb-arena {
        padding: 32px 12px 40px;
    }

    .lb-header {
        padding: 16px;
        gap: 12px;
        margin-bottom: 24px;
    }

    .lb-header-icon { width: 48px; height: 48px; min-width: 48px; font-size: 22px; }
    .lb-header-text h2 { font-size: 18px; }
    .lb-header-text p { font-size: 11px; }

    .lb-podium {
        grid-template-columns: 1fr 1.1fr 1fr;
        gap: 6px;
        padding: 16px 2px 0;
        margin-bottom: 24px;
    }

    .lb-podium-item {
        padding: 14px 6px 16px;
        border-radius: 14px;
    }

    .lb-podium-1 { padding-top: 28px; padding-bottom: 20px; }
    .lb-crown { font-size: 22px; top: -14px; }

    .lb-podium-rank-badge {
        width: 22px; height: 22px; font-size: 10px;
        top: 6px; right: 6px;
    }

    .lb-record-badge {
        font-size: 6px; padding: 2px 6px;
        top: 6px; left: 6px;
    }

    .lb-podium-avatar { width: 48px; height: 48px; min-width: 48px; font-size: 17px; }
    .lb-podium-1 .lb-podium-avatar { width: 60px; height: 60px; min-width: 60px; font-size: 22px; }

    .lb-podium-medal { font-size: 7px; padding: 2px 8px; letter-spacing: 0.5px; }
    .lb-podium-name { font-size: 11px; }
    .lb-podium-1 .lb-podium-name { font-size: 13px; }
    .lb-podium-group { font-size: 8px; }
    .lb-podium-score { font-size: 11px; padding: 4px 10px; gap: 4px; }
    .lb-podium-1 .lb-podium-score { font-size: 13px; }
    .lb-podium-score i { font-size: 9px; }

    .lb-rest-item {
        grid-template-columns: 48px 40px 1fr auto;
        gap: 8px;
        padding: 10px 12px;
    }

    .lb-rest-rank-num { font-size: 13px; }
    .lb-rest-rank-icon { font-size: 11px; }
    .lb-rest-avatar-wrap { width: 40px; height: 40px; }
    .lb-rest-avatar { width: 40px; height: 40px; min-width: 40px; font-size: 14px; }
    .lb-rest-name { font-size: 12px; }
    .lb-rest-group { font-size: 9px; margin-bottom: 6px; }
    .lb-rest-score { font-size: 11px; padding: 4px 8px; }
    .lb-rest-score i { font-size: 10px; }
    .lb-rest-bar { height: 4px; }

    /* ============================================================
       УВЕДОМЛЕНИЯ — bottom sheet
       ============================================================ */
    .notifications-modal {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 85dvh;
        border-radius: 24px 24px 0 0;
        animation: mobileSheetUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes mobileSheetUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .notifications-header {
        padding: 18px 16px 14px;
        position: relative;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .notifications-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.18);
    }

    .notifications-header h3 {
        font-size: 15px;
        padding-top: 8px;
        justify-content: space-between;
        width: 100%;
    }

    .notifications-actions {
        width: 100%;
        justify-content: flex-end;
        gap: 6px;
        flex-wrap: wrap;
    }

    .mark-all-read,
    .clear-read-btn,
    .clear-all-btn {
        padding: 8px 14px;
        font-size: 11px;
        min-height: 36px;
    }

    .notifications-list {
        max-height: 55dvh;
    }

    .notification-item {
        padding: 14px 16px;
        gap: 12px;
        min-height: var(--mobile-touch-target);
    }

    .notification-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 16px;
    }

    .notification-title { font-size: 13px; }
    .notification-message { font-size: 12px; }

    .notifications-footer {
        padding: 12px 16px calc(12px + var(--mobile-safe-area-bottom));
    }

    .notifications-footer .clear-all-btn {
        padding: 14px;
        font-size: 13px;
        min-height: var(--mobile-touch-target);
    }

    /* ============================================================
       ПАНЕЛЬ ОСНОВАТЕЛЯ
       ============================================================ */
    .founder-stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 20px;
    }

    .founder-stat-card {
        padding: 14px;
        gap: 12px;
        border-radius: 14px;
    }

    .founder-stat-card .stat-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 16px;
        border-radius: 10px;
    }

    .founder-stat-card .stat-label { font-size: 9px; }
    .founder-stat-card .stat-number { font-size: 18px; }

    .season-management {
        padding: 20px 16px;
    }

    .season-management h3 {
        font-size: 16px;
        padding-left: 10px;
    }

    .season-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .season-option {
        padding: 16px 10px 14px;
        min-height: 120px;
        border-radius: 14px;
    }

    .season-option .season-icon { font-size: 32px; }
    .season-option .season-name { font-size: 12px; }
    .season-option .season-badge { font-size: 8px; padding: 2px 8px; }

    /* ============================================================
       АДМИН-ПАНЕЛИ
       ============================================================ */
    .admin-shop-topbar,
    .admin-events-topbar {
        padding: 14px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        border-radius: 16px;
    }

    .admin-shop-topbar .topbar-left,
    .admin-events-topbar .topbar-left {
        gap: 12px;
    }

    .admin-shop-topbar .topbar-left .topbar-icon,
    .admin-events-topbar .topbar-left .topbar-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        border-radius: 12px;
    }

    .admin-shop-topbar .topbar-left .topbar-info h2,
    .admin-events-topbar .topbar-left .topbar-info h2 {
        font-size: 16px;
    }

    .admin-shop-topbar .topbar-right .btn-add-item,
    .admin-events-topbar .topbar-right .btn-add-event {
        width: 100%;
        justify-content: center;
        padding: 14px;
        min-height: var(--mobile-touch-target);
    }

    .admin-shop-stats-grid,
    .admin-events-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .admin-shop-stat-block,
    .admin-events-stat-block {
        padding: 12px;
        gap: 10px;
        border-radius: 12px;
    }

    .admin-shop-stat-block .stat-icon-box,
    .admin-events-stat-block .stat-icon-box {
        width: 36px;
        height: 36px;
        font-size: 15px;
        border-radius: 10px;
    }

    .admin-shop-stat-block .stat-content .stat-number,
    .admin-events-stat-block .stat-content .stat-number {
        font-size: 17px;
    }

    .admin-shop-filters,
    .admin-events-filters {
        flex-direction: column;
        gap: 10px;
    }

    .admin-shop-filters .filter-group,
    .admin-events-filters .filter-group {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .admin-shop-filters .filter-group::-webkit-scrollbar,
    .admin-events-filters .filter-group::-webkit-scrollbar {
        display: none;
    }

    .admin-shop-filters .filter-group .filter-chip,
    .admin-events-filters .filter-group .filter-chip {
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: 11px;
    }

    .promo-card-admin {
        grid-template-columns: 60px 1fr;
        padding: 16px;
        gap: 14px;
    }

    .promo-gift-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
        font-size: 26px;
        border-radius: 14px;
    }

    .promo-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .promo-btn {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }

    /* ============================================================
       ДОПОЛНИТЕЛЬНЫЕ УЛУЧШЕНИЯ
       ============================================================ */
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }

    @media (hover: none) {
        .discord-menu-item:hover,
        .pair-card-new:hover,
        .event-card:hover,
        .shop-item-new:hover,
        .title-card:hover {
            transform: none;
        }
    }

    .empty-state {
        padding: 40px 16px;
    }

    .empty-state i {
        font-size: 44px;
        margin-bottom: 12px;
    }

    .empty-state p { font-size: 14px; }

    #toastContainer {
        bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom) + 16px);
        left: 12px;
        right: 12px;
        transform: none;
        align-items: stretch;
    }

    .toast {
        width: 100%;
        padding: 12px 18px;
        font-size: 13px;
        border-radius: 14px;
    }

    .search-bar {
        padding: 0 14px;
        border-radius: 14px;
    }

    .search-bar input {
        padding: 12px 0;
        font-size: 15px;
    }

    .item-tooltip {
        display: none !important;
    }
}

/* ============================================================
   ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (<= 380px)
   ============================================================ */
@media (max-width: 380px) {
    .balance-label { display: none; }
    #mobileHeader .header-action-btn { width: 34px; height: 34px; font-size: 14px; }
    .mobile-nav-item span { font-size: 9px; }
    .mobile-nav-item i { font-size: 18px; }
    .admin-shop-stats-grid,
    .admin-events-stats-grid,
    .founder-stats-container {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ЛАНДШАФТНАЯ ОРИЕНТАЦИЯ (мобильный)
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) {
    :root {
        --mobile-bottom-nav-height: 52px;
        --mobile-header-height: 48px;
    }

    .mobile-nav-item i { font-size: 17px; }
    .mobile-nav-item span { font-size: 9px; }
}