@media (max-width: 768px) {
    :root {
        --sidebar-width: 100%;
        --sidebar-min-width: 100%;
        --sidebar-max-width: 100%;
        --info-width: 100%;
        --message-max-width: 85%;
    }

    .resize-handle { display: none; }
    .main-screen { position: relative; overflow: hidden; }

    .sidebar {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        z-index: 10;
        transition: transform 0.3s ease;
        transform: translateX(0);
    }

    .main-screen.chat-open .sidebar { transform: translateX(-100%); }

    .chat-area {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 20;
    }

    .main-screen.chat-open .chat-area { transform: translateX(0); }
    .main-screen.chat-open .back-btn-mobile { display: flex !important; }
    .chat-open .back-btn-mobile { display: flex !important; }
    .main-screen.chat-open .fab-new-chat, .main-screen.chat-open .fab-new-story { display: none !important; }

    .info-panel { width: 100%; z-index: 30; }
    .profile-screen { max-width: 100%; }

    .modal-container { width: 95%; max-height: 85vh; margin: 9px; }
    .modal-body { max-height: calc(85vh - 126px); }

    .emoji-picker {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        max-height: 350px;
        border-radius: 16px 16px 0 0;
        z-index: var(--z-sticky);
    }

    .emoji-grid { grid-template-columns: repeat(7, 1fr); }
    .emoji-item { max-height: 40px; max-width: 40px; font-size: 20px; }

    body { max-width: 100vw; overflow-x: hidden; }
    .chat-folder-list { overflow-x: auto; }
    .chat-item-name { max-width: 108px; }
    .chat-item-message { max-width: 135px; }

    .sidebar-menu {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        padding-top: 20px;
    }

    .close-menu-btn {
        top: 16px;
        right: 16px;
    }

    .menu-avatar-wrapper { width: 96px; height: 96px; }
    .menu-avatar { width: 96px; height: 96px; font-size: 36px; }
    .menu-avatar-badge { width: 28px; height: 28px; font-size: 14px; bottom: 0; right: 0; }

    .menu-profile {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        margin-bottom: 28px;
        padding: 0 20px;
    }

    .menu-profile:hover { background: transparent; }
    .menu-profile-info { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .menu-name { font-size: calc(20px * var(--text-scale, 1)); }
    .menu-username { font-size: calc(13px * var(--text-scale, 1)); }

    .menu-items {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .menu-group-title {
        font-size: 12px;
        color: var(--text-muted);
        padding: 0 16px 6px 16px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .menu-group {
        background: var(--bg-tertiary);
        border-radius: 16px;
        margin: 0 16px;
        padding: 4px 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .menu-item {
        padding: 14px 16px;
        gap: 14px;
    }

    .menu-item i {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.08);
        color: var(--text-secondary);
        font-size: 15px;
    }

    .menu-item[data-action="premium"] i {
        background: #451a03;
        color: #fbbf24;
    }

    .menu-item[data-action="aise"] i {
        background: #1e3a8a;
        color: #93c5fd;
    }

    .menu-divider { display: none; }

    .menu-footer {
        text-align: center;
        font-size: 12px;
        color: var(--text-muted);
        margin-top: auto;
        padding: 20px;
    }

    .auth-desktop-layout { display: none; }
    .auth-mobile-layout { display: flex; }
    .auth-container { max-width: 100%; border-radius: 16px; }
}

@media (min-width: 769px) {
    .auth-desktop-layout { display: flex; }
    .auth-mobile-layout { display: none; }
}

@media (max-width: 380px) {
    .emoji-grid { grid-template-columns: repeat(5, 1fr); }
    .chat-item-name { max-width: 72px; }
    .chat-item-message { max-width: 90px; }
    .chat-item-meta { font-size: 9px; }
    .message { max-width: 90%; }
    .auth-container { padding: 18px 14px; }
    .modal-container { width: 98%; margin: 4px; padding: 14px; }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .chat-input-area { padding-bottom: max(11px, env(safe-area-inset-bottom)); }
    .sidebar { padding-bottom: env(safe-area-inset-bottom); }
    .profile-screen { padding-bottom: env(safe-area-inset-bottom); }
    .sidebar-menu { padding-bottom: env(safe-area-inset-bottom); }
}