/* Omar Member V3 - UM Messaging RTL & Layout Fixes */

/* 1. Profile Navigation Fixes - RTL Alignment */
.um-profile-nav {
    text-align: right !important;
    direction: rtl !important;
}

/* 
 * Fixed Layout for Message Button on Other Profiles
 * We use absolute positioning to place the button inside the tab bar area (visually)
 * This prevents it from pushing the tabs down or appearing above them
 */

/* Container: Take no space but allow absolute positioning inside */
.um-profile-navbar {
    position: relative !important;
    height: 0 !important;
    z-index: 100 !important;
    display: block !important;
    overflow: visible !important;
}

/* Button: Positioned absolute to the LEFT (in RTL layout) inside the tab bar */
.um-profile-navbar .um-messaging-btn,
.um-profile-navbar>.um-messaging-btn,
div.um-profile-navbar div.um-messaging-btn {
    position: absolute !important;
    top: 10px !important;
    /* Align with tabs padding */
    left: 10px !important;
    /* Place at the far left (opposite to tabs) */
    margin: 0 !important;
    float: none !important;
    display: block !important;
}

.um-profile-navbar .um-messaging-btn a,
.um-profile-navbar>.um-messaging-btn a,
div.um-profile-navbar div.um-messaging-btn a {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* 2. Conversation List RTL Fix */
.um-message-conv {
    float: right !important;
    border-left: 1px solid #eee;
    border-right: none !important;
}

.um-message-conv-view {
    margin-right: 200px !important;
    margin-left: 0 !important;
    border-left: none !important;
}

.um-message-conv-pic {
    left: auto !important;
    right: 8px !important;
}

.um-message-conv-item {
    padding-left: 8px !important;
    padding-right: 60px !important;
    text-align: right !important;
}

.um-message-conv-item .um-online-status {
    right: auto !important;
    left: 8px !important;
}

.um-message-conv-new {
    left: auto !important;
    right: 4px !important;
}

/* 3. Messaging Bubbles RTL Fix */
.um-message-item {
    direction: rtl !important;
}

.um-message-item.left_m {
    flex-direction: row-reverse !important;
    text-align: right !important;
}

.um-message-item.right_m {
    flex-direction: row !important;
    text-align: left !important;
}

/* Adjust bubble arrow/alignment if they exist */
.um-message-item-content {
    text-align: right !important;
}

/* 4. Compose / Header Fixes */
.um-message-header-right {
    right: auto !important;
    left: 10px !important;
}

.um-message-header img.um-avatar {
    margin: 0 4px 0 8px !important;
}

/* 5. Emoticons RTL */
.um-message-emoji .um-message-emolist {
    left: auto !important;
    right: 0 !important;
}

.um-message-emolist span {
    float: right !important;
    margin: 5px 0 0 5px !important;
}

/* 6. Responsive Adjustments */
@media screen and (max-width: 500px) {
    .um-message-conv {
        width: 100% !important;
        float: none !important;
    }

    .um-message-conv-view {
        margin-right: 0 !important;
    }

    /* Reset layout for mobile: Stack button below header/tabs */
    .um-profile-navbar {
        height: auto !important;
        position: static !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }

    .um-profile-navbar .um-messaging-btn,
    .um-profile-navbar>.um-messaging-btn,
    div.um-profile-navbar div.um-messaging-btn {
        position: static !important;
        display: inline-block !important;
        /* Center firmly */
        margin: 5px auto !important;
        width: auto !important;
    }

    .um-profile-navbar .um-messaging-btn a,
    .um-profile-navbar>.um-messaging-btn a,
    div.um-profile-navbar div.um-messaging-btn a {
        width: auto !important;
    }
}

.uimob800 .um-message-conv-view {
    margin-right: 170px !important;
    margin-left: 0 !important;
}