/* X2O2 Mobile Genres */
@media (max-width: 767px) {

    .genre_lst .gnr_list_item {
        flex: 0 0 45% !important;
        width: 45% !important;
    }

    .genre_lst .gnr_list_item .name {
        position: absolute !important;
        top: 0 !important;
        left: 10px !important;
        right: auto !important;
        width: auto !important;
        max-width: calc(100% - 20px) !important;
        padding: 8px 0 !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font: normal normal bold 13.6px/17px Montserrat !important;
    }

    .genre_lst .gnr_list_item .song_count {
        position: absolute !important;
        top: 32px !important;
        left: 10px !important;
        right: auto !important;
        width: auto !important;
        padding: 0 !important;
        text-align: left !important;
        font: normal normal 500 8px/10px Montserrat !important;
    }
}
/* X2O2 Mobile Chat Composer - textarea above controls */
@media (max-width: 767px) {

    #new-message-form {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        padding: 8px 10px !important;
        gap: 0 !important;
    }

    /* Message input gets its own full-width row */
    #new-message-form > textarea {
        order: 1 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 50px !important;
        margin: 0 0 8px 0 !important;
        padding: 10px 8px !important;
    }

    /* Emoji and attachment controls go on the second row */
    #new-message-form > span {
        order: 2 !important;
        flex: 0 0 auto !important;
    }

    #new-message-form > span.pointer {
        margin: 0 8px 0 0 !important;
    }

    /* Send button stays on the second row at the right */
    #new-message-form #send-button {
        order: 2 !important;
        margin-left: auto !important;
        min-width: 100px !important;
        width: auto !important;
        height: 42px !important;
    }
}
/* X2O2 Mobile Chat - visible message input section */
@media (max-width: 767px) {

    #new-message-form > textarea {
        border: 1px solid #555 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        background-color: #111 !important;
    }
}
/* X2O2 Mobile Chat - touch scrolling for longer messages */
@media (max-width: 767px) {

    #new-message-form > textarea {
        height: 70px !important;
        min-height: 70px !important;
        max-height: 90px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        resize: none !important;
        box-sizing: border-box !important;
    }
}