/* Global safe-area / fixed navigation reset.
   The previous version added margin-bottom to the fixed menu, which made the
   navigation appear to float above the bottom of the screen. */
html, body { margin-top:0; }
body { margin-bottom:0 !important; padding-bottom:78px !important; box-sizing:border-box; }
.top { padding-top:5px !important; }
.stickyMenu { padding-bottom:0 !important; margin-bottom:0 !important; }
@media (max-width:600px) { body { padding-bottom:72px !important; } }
body { background-color:#fff !important; }


/* =========================================================
   AVOCATO MOBILE SAFE AREA
   ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   مساحة أعلى التطبيق أسفل Android Status Bar
   --------------------------------------------------------- */

body {
    padding-top: env(safe-area-inset-top, 0px) !important;

    /*
     * مساحة أسفل التطبيق:
     * Bottom menu + Android navigation/gesture area
     */
    padding-bottom: calc(
        70px + env(safe-area-inset-bottom, 0px)
    ) !important;
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.top {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    min-height: 80px;
}


/* ---------------------------------------------------------
   Bottom Navigation
   --------------------------------------------------------- */

.stickyMenu {
    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;

    height: calc(
        62px + env(safe-area-inset-bottom, 0px)
    ) !important;

    padding-bottom:
        env(safe-area-inset-bottom, 0px) !important;

    z-index: 99990 !important;

    background: #231F20 !important;

    border-top: 1px solid #80191D !important;
}


.stickyMenu ul {
    width: 100% !important;
    height: 62px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    overflow: hidden !important;

    list-style: none !important;

    background: #231F20 !important;
}


.stickyMenu li {
    float: none !important;

    flex: 1 1 33.333% !important;

    width: auto !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


.stickyMenu li a {
    width: 100% !important;
    height: 62px !important;

    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    color: #fff !important;

    text-decoration: none !important;
}


.stickyMenu i {
    font-size: 30px !important;

    line-height: 1 !important;
}


/* ---------------------------------------------------------
   كل المحتوى فوق الـ Bottom Menu
   --------------------------------------------------------- */

#deviceready,
.av-modern,
.av-page-head,
.av-feed,
.av-composer,
.av-pagination {
    max-width: 100% !important;
}


/*
 * مهم جدًا للصفحات الطويلة:
 * آخر عنصر لا يختفي خلف الـ Bottom Menu
 */

body::after {
    content: "";
    display: block;

    width: 100%;

    height: calc(
        80px + env(safe-area-inset-bottom, 0px)
    );
}


/* =========================================================
   SUPPORT CHAT
   ========================================================= */


/*
 * الحاوية نفسها لازم تكون بعرض الشاشة
 */

.support-chat,
.chat-container,
.chat-box,
.messages-container,
.messages,
.chat-messages {
    width: 100% !important;
    max-width: 100% !important;

    overflow-x: hidden !important;
}


/*
 * الرسالة نفسها:
 * ممنوع تكون بعرض ثابت صغير
 */

.message,
.chat-message,
.message-bubble,
.chat-bubble,
.support-message {
    width: auto !important;

    max-width: 78% !important;

    min-width: 70px !important;

    height: auto !important;
    min-height: 45px !important;

    padding: 10px 14px !important;

    line-height: 1.7 !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
    word-break: normal !important;

    box-sizing: border-box !important;
}


/*
 * رسالة المستخدم
 */

.message.sent,
.chat-message.sent,
.message-bubble.sent,
.chat-bubble.sent,
.support-message.sent {
    margin-left: auto !important;
    margin-right: 8px !important;
}


/*
 * رسالة الدعم
 */

.message.received,
.chat-message.received,
.message-bubble.received,
.chat-bubble.received,
.support-message.received {
    margin-left: 8px !important;
    margin-right: auto !important;
}


/*
 * النص داخل الرسالة
 */

.message p,
.chat-message p,
.message-bubble p,
.chat-bubble p,
.support-message p {
    width: auto !important;
    max-width: 100% !important;

    margin: 0 !important;

    white-space: normal !important;

    overflow-wrap: anywhere !important;
    word-break: normal !important;

    line-height: 1.7 !important;

    font-size: 15px !important;
}


/*
 * لو فيه flex داخل الرسائل
 */

.message *,
.chat-message *,
.message-bubble *,
.chat-bubble *,
.support-message * {
    max-width: 100%;
}


/* ---------------------------------------------------------
   Support input
   --------------------------------------------------------- */

.chat-input,
.support-input,
.message-input {
    width: calc(100% - 20px) !important;

    max-width: none !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   منع أي عنصر من عمل Horizontal Scroll
   --------------------------------------------------------- */

img,
video,
iframe,
table {
    max-width: 100% !important;
}

input,
textarea,
select,
button {
    max-width: 100% !important;
}