/* =========================================================
   REINS — Messages CSS: Mobile State (.bp-messages-mobile)
   ---------------------------------------------------------
   מצב מובייל אמיתי — נקבע ע"י JS פנימי של התוסף (ResizeObserver
   על רוחב הקונטיינר בפועל, לא viewport media query), אז אין
   דרך לחזות מתי זה יופעל; ה-CSS כאן מגיב למחלקה עצמה, בכל רוחב.
   כולל גם מסך-הביניים "Tap to open messages".
========================================================= */

.bp-messages-wrap.bp-messages-mobile,
.bp-messages-chat-wrap.bp-messages-mobile,
.bp-messages-single-thread-wrap.bp-messages-mobile,
.bp-messages-wrap-group.bp-messages-mobile,
.bp-messages-wrap-main.bp-messages-mobile{
    background:var(--reins-bg) !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

.bp-messages-wrap.bp-messages-mobile .chat-header{
    border-bottom:1px solid var(--reins-border) !important;
    background:var(--reins-bg) !important;
}

.bp-messages-wrap.bp-messages-mobile .chat-header .back,
.bp-messages-wrap.bp-messages-mobile .chat-header .mobileClose,
.bp-messages-wrap.bp-messages-mobile .chat-header .bm-close{
    color:var(--reins-text) !important;
}

.bp-messages-wrap .bm-side-tabs.bpbm-mobile-only,
.bp-messages-wrap .chat-tabs{
    background:var(--reins-bg) !important;
    border-color:var(--reins-border) !important;
}

.bp-messages-wrap .bm-side-tabs.bpbm-mobile-only > div,
.bp-messages-wrap .chat-tabs > div{
    color:var(--reins-text) !important;
}

.bp-messages-wrap .bm-side-tabs.bpbm-mobile-only > div.active,
.bp-messages-wrap .chat-tabs > div.active{
    background:rgba(0,0,0,.03) !important;
    border-color:var(--reins-accent) !important;
}

#bp-better-messages-mini-mobile-open{
    background:var(--reins-accent) !important;
}

/* מסך-הביניים "Tap to open messages" (bp-messages-mobile-tap) */
.bp-messages-mobile-tap{
    background:rgba(255,255,255,.85) !important;
    color:var(--reins-text) !important;
}