/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
    .matches-list, .messages-list {
        max-width: 100%;
        padding: 0 15px;
    }

    .matches-list li {
        padding: 12px 45px 12px 12px;
    }

    .match-photo-container, .message-photo-container {
        width: 70px;
        height: 70px;
        min-width: 70px;
        margin-right: 15px;
    }

    .match-envelope {
        right: 30px;
        width: 22px;
        height: 22px;
    }

    .profile-card {
        height: 450px;
    }

    .matches-heading {
        font-size: 1.1rem !important;
        margin: 0 0 0 1rem !important;
    }

    .likes-heading {
        font-size: 1.1rem !important;
        margin-bottom: 10px;
    }

    .profile-section {
        flex-direction: column;
    }

    .profile-image-container {
        flex: 1;
    }

    #profile-image-preview {
        width: 100%;
        max-width: 300px;
        height: auto;
        aspect-ratio: 1/1;
    }

    .message-bubble {
        max-width: 80%;
    }
}

@media (max-width: 480px) {
    .matches-list li, .messages-list li {
        padding: 10px 40px 10px 10px;
    }

    .match-photo-container, .message-photo-container {
        width: 60px;
        height: 60px;
        min-width: 60px;
        margin-right: 12px;
    }

    .match-envelope {
        right: 10px;
        width: 20px;
        height: 20px;
    }

    .buttons-container button {
        padding: 12px 25px;
        font-size: 1.1rem;
        min-width: 70px;
    }

    .profile-card {
        height: 400px;
    }

    .profile-actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    .action-separator {
        display: none;
    }

    .message-partner-name {
        font-size: 1em;
    }

    .message-preview {
        font-size: 0.85em;
    }

    .slider-item {
        flex: 0 0 80px;
        height: 80px;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .user-matcher-footer {
        padding: 5px 0;
    }

    .user-matcher-footer a .material-icons {
        font-size: 1.2rem;
        margin-right: 3px;
    }

    .user-matcher-footer a span {
        font-size: 0.7rem;
    }
}

@media (max-width: 320px) {
    .match-photo-container {
        width: 50px;
        height: 50px;
        min-width: 50px;
        margin-right: 10px;
    }

    .match-envelope {
        right: 15px;
        width: 18px;
        height: 18px;
    }
}