@media (max-width:768px){
    .top-nav-links{
        display:none;
    }
    
    .top-nav{
        display:flex !important;
        visibility:visible !important;
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;
        z-index:10001 !important;
        height:50px !important;
        padding-top:env(safe-area-inset-top, 0px) !important;
        box-sizing:border-box !important;
    }
    
    .mobile-menu-overlay{
        z-index:10002 !important;
    }
    
    .mobile-menu{
        z-index:10003 !important;
    }
    
    .top-nav .app-logo{
        display:flex !important;
        visibility:visible !important;
    }
    
    .header-actions{
        display:flex !important;
        visibility:visible !important;
        align-items:center !important;
        gap:8px !important;
    }
    
    .refresh-btn{
        display:flex !important;
        visibility:visible !important;
        align-items:center !important;
        justify-content:center !important;
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        min-height:40px !important;
        padding:0 !important;
        margin:0 !important;
        background:rgba(255,255,255,0.1) !important;
        border:1px solid rgba(255,255,255,0.15) !important;
        border-radius:50% !important;
        color:#ffffff !important;
        font-size:20px !important;
        cursor:pointer !important;
        transition:background 0.15s ease, transform 0.1s ease !important;
        box-shadow:0 2px 8px rgba(0,0,0,0.2) !important;
        touch-action:manipulation !important;
        -webkit-tap-highlight-color:transparent !important;
        user-select:none !important;
        flex-shrink:0 !important;
    }
    
    .refresh-btn:hover{
        background:rgba(255,255,255,0.15) !important;
    }
    
    .refresh-btn:active{
        background:rgba(255,255,255,0.2) !important;
        transform:scale(0.95) !important;
    }
    
    .refresh-btn.refreshing{
        animation:spin 0.6s linear infinite !important;
    }
    
    @keyframes spin{
        to{ transform:rotate(360deg); }
    }
    
    .top-nav .menu-toggle{
        display:flex !important;
        visibility:visible !important;
        align-items:center !important;
        justify-content:center !important;
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        min-height:40px !important;
        padding:0 !important;
        margin:0 !important;
        background:rgba(255,255,255,0.1) !important;
        border:1px solid rgba(255,255,255,0.15) !important;
        border-radius:50% !important;
        color:#ffffff !important;
        font-size:20px !important;
        cursor:pointer !important;
        transition:background 0.15s ease, transform 0.1s ease !important;
        box-shadow:0 2px 8px rgba(0,0,0,0.2) !important;
        touch-action:manipulation !important;
        -webkit-tap-highlight-color:transparent !important;
        user-select:none !important;
        flex-shrink:0 !important;
    }
    
    .top-nav .menu-toggle:hover{
        background:rgba(255,255,255,0.15) !important;
    }
    
    .top-nav .menu-toggle:active{
        background:rgba(255,255,255,0.2) !important;
        transform:scale(0.95) !important;
    }
    
    body.telegram-layout{
        padding:0;
        padding-top:50px;
    }
    
    body.telegram-layout.chat-page-no-top-nav{
        padding-top:0;
    }
    
    body.telegram-layout.chat-page-no-top-nav .chat-header-telegram{
        position:sticky !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;
        z-index:100 !important;
        padding-top:calc(10px + env(safe-area-inset-top, 0px)) !important;
        height:calc(54px + env(safe-area-inset-top, 0px)) !important;
        min-height:calc(54px + env(safe-area-inset-top, 0px)) !important;
        max-height:calc(54px + env(safe-area-inset-top, 0px)) !important;
        background:#17212b !important;
    }
    
    body.telegram-layout.chat-page-no-top-nav .telegram-main{
        padding-top:0 !important;
    }
    
    body.telegram-layout:not(.conversations-page) .telegram-main.active .chat-header-telegram{
        position:sticky !important;
        top:0 !important;
        z-index:100 !important;
    }
    
    .telegram-app{
        height:100vh;
        height:calc(var(--vh, 1vh) * 100);
        max-height:100vh;
        max-height:calc(var(--vh, 1vh) * 100);
        padding-top:50px;
        box-sizing:border-box;
    }
    
    .telegram-sidebar{
        width:100%;
        position:fixed;
        left:0;
        top:50px;
        bottom:0;
        z-index:10000;
        background:#17212b;
        display:flex;
        flex-direction:column;
        transform:translateX(0);
        transition:transform 0.3s ease;
        box-sizing:border-box;
    }
    
    .telegram-sidebar.hidden{
        transform:translateX(-100%);
        visibility:hidden;
    }
    
    .telegram-main{
        width:100%;
        display:flex;
        flex-direction:column;
        position:fixed;
        top:50px;
        left:0;
        right:0;
        bottom:0;
        z-index:1;
        background:var(--color-bg-primary);
        box-sizing:border-box;
        overflow:hidden;
    }
    
    body.conversations-page .telegram-main{
        top:calc(50px + 100px);
        height:calc(100vh - 150px);
    }

    body.telegram-layout .image-lightbox{
        top:50px;
        bottom:0;
    }

    @supports (-webkit-touch-callout: none){
        body.telegram-layout .image-lightbox .lightbox-close{
            top:16px;
        }
    }
    
    .back-button-telegram{
        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;
        z-index:1000 !important;
        pointer-events:auto !important;
        position:relative;
        min-width:36px;
        min-height:36px;
    }
    
    .chat-header-telegram .back-button-telegram{
        z-index:1001;
    }
    
    .message{
        max-width:80%;
    }
    
    .bubble{
        font-size:14px;
        padding:7px 11px;
    }
    
    .chat-window-telegram{
        padding:10px 12px;
        padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    }
    
    .input-area-telegram{
        padding:10px 12px;
        padding-bottom:calc(16px + env(safe-area-inset-bottom, 8px));
    }
    
    .private-input-area{
        padding:10px 12px;
        padding-bottom:calc(16px + env(safe-area-inset-bottom, 8px));
    }
    
    .input-area{
        padding:10px 12px;
        padding-bottom:calc(16px + env(safe-area-inset-bottom, 8px));
    }
    
    .input-row-telegram textarea{
        font-size:16px;
        padding:7px 10px;
    }
    
    .send-btn-telegram{
        width:44px;
        height:44px;
        min-width:44px;
        min-height:44px;
        font-size:18px;
    }
    
    .conv-item{
        padding:10px 14px;
    }
    
    .conv-avatar{
        width:44px;
        height:44px;
        font-size:16px;
    }
    
    .conv-name{
        font-size:14px;
    }
    
    .conv-preview{
        font-size:13px;
    }
    
    .conversations-header{
        position:fixed;
        top:50px;
        left:0;
        right:0;
        background:#17212b;
        border-bottom:1px solid rgba(255,255,255,0.08);
        z-index:10000;
        padding:12px;
        box-sizing:border-box;
        min-height:100px;
    }
    
    .conversations-header-inner{
        display:flex;
        flex-direction:column;
        gap:12px;
    }
    
    .conversations-title{
        font-size:18px;
        color:#ffffff;
        font-weight:500;
    }
    
    .conversations-search-input{
        padding:9px 11px;
        font-size:14px;
        width:100%;
        box-sizing:border-box;
        border-radius:8px;
        border:1px solid rgba(255,255,255,0.1);
        background:rgba(255,255,255,0.05);
        color:#ffffff;
    }
    
    .conversations-search-input::placeholder{
        color:rgba(255,255,255,0.5);
    }
    
    .conversations-list{
        padding-top:0;
        overflow-y:auto;
        overflow-x:hidden;
        height:100%;
        background:#0e1621;
    }
    
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    textarea,
    .input-row textarea,
    .input-row-telegram textarea,
    .input-area textarea,
    .input-area-telegram textarea,
    .private-input-area textarea,
    .user-search-input-large,
    .conversations-search-input,
    .sidebar-search-input{
        font-size:16px;
    }
}

@media (max-width:480px){
    body.telegram-layout{
        padding:0;
        padding-top:50px;
    }
    
    .telegram-sidebar{
        width:100%;
    }
    
    .chat-header-telegram{
        padding:10px 12px;
    }
    
    .user-name-telegram{
        font-size:14px;
    }
    
    .user-status-telegram{
        font-size:12px;
    }
    
    .user-avatar-telegram{
        width:36px;
        height:36px;
    }
    
    .bubble{
        font-size:14px;
        padding:7px 11px;
    }
    
    .meta{
        font-size:11px;
    }
    
    .message{
        max-width:85%;
    }
    
    .input-row-telegram textarea{
        font-size:16px;
        padding:7px 10px;
    }
    
    .input-area-telegram,
    .private-input-area,
    .input-area{
        padding-bottom:calc(16px + env(safe-area-inset-bottom, 8px));
    }
    
    .send-btn-telegram{
        width:44px;
        height:44px;
        min-width:44px;
        min-height:44px;
    }
    
    .conv-item{
        padding:10px 12px;
    }
    
    .conv-avatar{
        width:40px;
        height:40px;
        font-size:15px;
    }
    
    .conv-name{
        font-size:14px;
    }
    
    .conv-preview{
        font-size:12px;
    }
    
    .sidebar-title{
        font-size:17px;
    }
    
    .login-inner{
        padding:20px;
    }
    
    .login-inner h1{
        font-size:18px;
    }
    
    .login-inner .subtitle{
        font-size:12px;
        margin-bottom:16px;
    }
    
    .login-inner button{
        font-size:14px;
        padding:11px 14px;
    }
    
    .lightbox-close{
        width:36px !important;
        height:36px !important;
        font-size:22px !important;
    }
}