/*
 * ==========================================================
 * FUTEMAX MATCH CHAT
 * Floating / draggable chat window
 * ==========================================================
 */

.mc-match-chat {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 99990;
    font-family: Rajdhani, Arial, sans-serif;
    color: #102039;
    pointer-events: none;
}


/*
 * ==========================================================
 * LAUNCHER
 * ==========================================================
 */

.mc-chat-launcher {
    pointer-events: auto;

    width: 210px;
    height: 52px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        0
        15px;

    border:
        1px solid
        rgba(15, 34, 57, .12);

    border-radius: 15px;

    background:
        rgba(255, 255, 255, .98);

    color: #102039;

    box-shadow:
        0 10px 30px
        rgba(15, 34, 57, .16);

    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.mc-chat-launcher:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 34px
        rgba(15, 34, 57, .20);
}

.mc-chat-launcher-icon {
    flex:
        0
        0
        34px;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #102039;

    color: #fff;
}

.mc-chat-launcher-icon svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.mc-chat-launcher-text {
    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;

    text-align: left;

    line-height: 1.1;
}

.mc-chat-launcher-text strong {
    overflow: hidden;

    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.mc-chat-launcher-text small {
    margin-top: 4px;

    color: #8090a5;

    font-size: 9px;
    font-weight: 600;

    white-space: nowrap;
}

.mc-chat-launcher-online {
    flex:
        0
        0
        8px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #16c784;

    box-shadow:
        0 0 0 3px
        rgba(22, 199, 132, .12);
}


/*
 * ==========================================================
 * PANEL
 * ==========================================================
 */

.mc-chat-panel {
    position: fixed;

    width:
        min(
            350px,
            calc(100vw - 16px)
        );

    height:
        min(
            500px,
            calc(100dvh - 100px)
        );

    display: grid;

    grid-template-rows:
        auto
        auto
        minmax(0, 1fr)
        auto
        auto;

    overflow: hidden;

    border:
        1px solid
        rgba(15, 34, 57, .12);

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 18px 55px
        rgba(8, 25, 45, .20);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(8px)
        scale(.985);

    transform-origin:
        bottom right;

    transition:
        opacity .16s ease,
        transform .16s ease,
        visibility .16s ease;

    pointer-events: none;
}

.mc-match-chat.is-open
.mc-chat-panel {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;
}

.mc-match-chat.is-open
.mc-chat-launcher {
    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


/*
 * ==========================================================
 * HEADER / DRAG HANDLE
 * ==========================================================
 */

.mc-chat-header {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        10px
        10px
        10px
        15px;

    border-bottom:
        1px solid
        #edf1f5;

    background: #fff;

    cursor: grab;

    user-select: none;
    touch-action: none;
}

.mc-match-chat.is-dragging
.mc-chat-header {
    cursor: grabbing;
}

.mc-match-chat.is-dragging
.mc-chat-panel {
    transition: none;
}

.mc-chat-header-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    line-height: 1.15;
}

.mc-chat-header-copy strong {
    color: #102039;

    font-size: 14px;
    font-weight: 800;
}

.mc-chat-online {
    margin-top: 4px;

    color: #16a56f;

    font-size: 11px;
    font-weight: 700;
}

.mc-chat-close {
    flex:
        0
        0
        34px;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #f2f5f8;

    color: #526277;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease;
}

.mc-chat-close:hover {
    background: #e8edf2;
    color: #102039;
}


/*
 * ==========================================================
 * NOTICE
 * ==========================================================
 */

.mc-chat-notice {
    padding:
        8px
        15px;

    border-bottom:
        1px solid
        #edf1f5;

    background: #f8fafc;

    color: #748399;

    font-size: 10px;
    font-weight: 600;

    line-height: 1.4;
}


/*
 * ==========================================================
 * MESSAGES
 * ==========================================================
 */

.mc-chat-messages {
    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;

    padding:
        14px
        14px
        18px;

    overscroll-behavior: contain;
}

.mc-chat-message {
    display: flex;

    gap: 9px;

    margin-bottom: 15px;
}

.mc-chat-avatar {
    flex:
        0
        0
        32px;

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background: #eef2f6;

    color: #526277;

    font-size: 11px;
    font-weight: 800;
}

.mc-chat-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.mc-chat-message-body {
    min-width: 0;
    flex: 1;
}

.mc-chat-message-meta {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 3px;
}

.mc-chat-message-meta strong {
    max-width: 190px;

    overflow: hidden;

    color: #15243a;

    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.mc-chat-message-meta time {
    color: #9aa6b5;

    font-size: 11px;
    font-weight: 600;
}

.mc-chat-message-text {
    color: #35445a;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.45;

    overflow-wrap: anywhere;
}

.mc-chat-loading,
.mc-chat-error,
.mc-chat-empty {
    min-height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    padding: 28px 16px;

    text-align: center;

    color: #8b99aa;

    font-size: 10px;
}

.mc-chat-empty strong {
    margin-bottom: 5px;

    color: #26364d;

    font-size: 11px;
}


/*
 * ==========================================================
 * LOGIN
 * ==========================================================
 */

.mc-chat-login {
    margin:
        0
        10px
        10px;

    min-height: 48px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    column-gap: 10px;

    padding:
        9px
        10px
        9px
        12px;

    border-radius: 12px;

    background: #f5f7fa;
}

.mc-chat-login[hidden] {
    display: none !important;
}

.mc-chat-login strong {
    display: block;

    color: #26364d;

    font-size: 10px;
    font-weight: 800;
}

.mc-chat-login span {
    display: none;
}

.mc-chat-login-button {
    min-height: 32px;

    padding:
        0
        14px;

    border: 0;

    border-radius: 9px;

    background: #13c98b;

    color: #fff;

    font-size: 9px;
    font-weight: 800;

    text-transform: uppercase;

    cursor: pointer;
}


/*
 * ==========================================================
 * MESSAGE FORM
 * ==========================================================
 */

.mc-chat-form {
    display: flex;
    align-items: flex-end;

    gap: 8px;

    padding:
        10px;

    border-top:
        1px solid
        #edf1f5;

    background: #fff;
}

.mc-chat-form[hidden] {
    display: none !important;
}

.mc-chat-input {
    flex: 1;

    min-width: 0;
    min-height: 40px;
    max-height: 96px;

    resize: none;

    padding:
        10px
        12px;

    border:
        1px solid
        #dfe5eb;

    border-radius: 11px;

    outline: none;

    background: #f8fafc;

    color: #203149;

    font-family: inherit;

    font-size: 11px;

    line-height: 18px;
}

.mc-chat-input:focus {
    border-color:
        rgba(22, 199, 132, .75);

    background: #fff;

    box-shadow:
        0 0 0 3px
        rgba(22, 199, 132, .08);
}

.mc-chat-send {
    flex:
        0
        0
        40px;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;

    border-radius: 11px;

    background: #102039;

    color: #fff;

    cursor: pointer;
}

.mc-chat-send:hover {
    background: #172d4b;
}

.mc-chat-send:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.mc-chat-send svg {
    width: 17px;
    height: 17px;

    fill: currentColor;
}


/*
 * Scrollbar
 */

.mc-chat-messages::-webkit-scrollbar {
    width: 4px;
}

.mc-chat-messages::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d8dee6;
}


/*
 * ==========================================================
 * MOBILE
 * ==========================================================
 */

@media (max-width: 767px) {

    .mc-match-chat {
        right: 8px;

        /*
         * Keep it above common sticky/footer ads.
         */
        bottom:
            calc(
                74px +
                env(safe-area-inset-bottom)
            );
    }


    /*
     * IMPORTANT:
     * No bottom sheet.
     *
     * It remains a normal floating rectangle.
     */
    .mc-chat-panel {
        position: fixed;

        width:
            min(
                318px,
                calc(100vw - 16px)
            );

        height:
            min(
                430px,
                calc(100dvh - 105px)
            );

        max-height:
            calc(
                100dvh -
                16px
            );

        border-radius: 17px;
    }


    .mc-chat-launcher {
        width: 190px;
        height: 48px;

        padding:
            0
            12px;

        border-radius: 14px;

        gap: 9px;
    }


    .mc-chat-launcher-icon {
        flex-basis: 31px;

        width: 31px;
        height: 31px;

        border-radius: 10px;
    }


    .mc-chat-launcher-icon svg {
        width: 17px;
        height: 17px;
    }


    .mc-chat-launcher-text strong {
        font-size: 11px;
    }


    .mc-chat-launcher-text small {
        font-size: 8px;
    }


    .mc-chat-header {
        min-height: 54px;

        padding:
            8px
            8px
            8px
            13px;
    }


    .mc-chat-header-copy strong {
        font-size: 14px;
    }


    .mc-chat-close {
        width: 32px;
        height: 32px;

        flex-basis: 32px;
    }


    .mc-chat-notice {
        padding:
            7px
            13px;

        font-size: 10px;
    }


    .mc-chat-messages {
        padding:
            12px
            12px
            14px;
    }


    .mc-chat-login {
        margin:
            0
            8px
            8px;
    }


    .mc-chat-form {
        padding: 8px;
    }
}


/*
 * Very small phones
 */

@media (max-width: 340px) {

    .mc-chat-panel {
        width:
            calc(
                100vw -
                12px
            );

        height:
            min(
                410px,
                calc(
                    100dvh -
                    90px
                )
            );
    }


    .mc-chat-launcher {
        width: 178px;
    }
}


/*
 * Reduced motion
 */

@media (
    prefers-reduced-motion:
    reduce
) {

    .mc-chat-panel,
    .mc-chat-launcher {
        transition: none;
    }
}


/*
 * ==========================================================
 * FUTEMAX CHAT V3
 * Compact popup above persistent launcher
 * ==========================================================
 */


/*
 * Launcher must ALWAYS remain visible.
 */
.mc-match-chat.is-open .mc-chat-launcher {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/*
 * The launcher is the permanent anchor.
 */
.mc-match-chat {
    --mc-chat-launcher-height: 52px;
    --mc-chat-gap: 10px;
}


/*
 * Compact popup.
 *
 * It opens immediately ABOVE the launcher instead of
 * replacing it or behaving like a bottom sheet.
 */
.mc-chat-panel {
    position: fixed !important;

    right: 0;

    bottom:
        calc(
            var(--mc-chat-launcher-height) +
            var(--mc-chat-gap)
        );

    left: auto;
    top: auto;

    width: 300px !important;
    height: 330px !important;

    max-width:
        calc(
            100vw -
            20px
        ) !important;

    max-height:
        min(
            330px,
            calc(
                100dvh -
                150px
            )
        ) !important;

    border-radius: 16px !important;

    transform-origin:
        bottom right !important;

    box-shadow:
        0 18px 48px
        rgba(8, 25, 45, .18) !important;
}


/*
 * Smaller header.
 */
.mc-chat-header {
    min-height: 50px !important;

    padding:
        8px
        8px
        8px
        13px !important;

    gap: 8px !important;
}


.mc-chat-header-copy strong {
    font-size: 14px !important;
}


.mc-chat-online {
    margin-top: 2px !important;

    font-size: 11px !important;
}


.mc-chat-close {
    width: 30px !important;
    height: 30px !important;

    flex-basis: 30px !important;

    font-size: 18px !important;
}


/*
 * Less vertical space wasted on the notice.
 */
.mc-chat-notice {
    padding:
        6px
        12px !important;

    font-size: 10px !important;

    line-height: 1.35 !important;
}


/*
 * Messages.
 */
.mc-chat-messages {
    padding:
        10px
        11px
        12px !important;
}


.mc-chat-message {
    gap: 8px !important;

    margin-bottom: 11px !important;
}


.mc-chat-avatar {
    flex-basis: 28px !important;

    width: 28px !important;
    height: 28px !important;
}


.mc-chat-message-meta strong {
    font-size: 12px !important;
}


.mc-chat-message-text {
    font-size: 12px !important;

    line-height: 1.4 !important;
}


/*
 * Empty chat state.
 *
 * Existing HTML remains valid. This prepares the compact
 * layout for the richer copy added below by JS.
 */
.mc-chat-empty {
    min-height: 100% !important;

    padding:
        15px
        12px !important;
}


.mc-chat-empty strong {
    margin-bottom: 6px !important;

    font-size: 14px !important;
}


/*
 * Login area.
 */
.mc-chat-login {
    min-height: 44px !important;

    margin:
        0
        8px
        8px !important;

    padding:
        7px
        8px
        7px
        10px !important;

    border-radius: 11px !important;
}


.mc-chat-login strong {
    font-size: 9px !important;
}


.mc-chat-login-button {
    min-height: 30px !important;

    padding:
        0
        12px !important;

    border-radius: 8px !important;

    font-size: 9px !important;
}


/*
 * Logged-in composer.
 */
.mc-chat-form {
    gap: 6px !important;

    padding: 8px !important;
}


.mc-chat-input {
    min-height: 36px !important;
    max-height: 72px !important;

    padding:
        8px
        10px !important;

    border-radius: 10px !important;

    font-size: 10px !important;
}


.mc-chat-send {
    flex-basis: 36px !important;

    width: 36px !important;
    height: 36px !important;

    border-radius: 10px !important;
}


/*
 * ==========================================================
 * MOBILE
 * ==========================================================
 */

@media (max-width: 767px) {

    .mc-match-chat {
        --mc-chat-launcher-height: 48px;

        right: 8px !important;

        bottom:
            calc(
                74px +
                env(safe-area-inset-bottom)
            );
    }


    /*
     * Keep exactly the long launcher style currently used.
     */
    .mc-chat-launcher {
        width: 190px !important;
        height: 48px !important;
    }


    /*
     * Small floating window above the long launcher.
     *
     * NOT a bottom sheet.
     */
    .mc-chat-panel {
        position: fixed !important;

        right: 0;

        bottom:
            calc(
                var(--mc-chat-launcher-height) +
                9px
            );

        left: auto;
        top: auto;

        width:
            min(
                286px,
                calc(
                    100vw -
                    24px
                )
            ) !important;

        height: 310px !important;

        max-height:
            min(
                310px,
                calc(
                    100dvh -
                    165px
                )
            ) !important;

        border-radius: 15px !important;
    }
}


/*
 * Small phones.
 */
@media (max-width: 360px) {

    .mc-chat-panel {
        width:
            min(
                274px,
                calc(
                    100vw -
                    20px
                )
            ) !important;

        height: 300px !important;

        max-height:
            min(
                300px,
                calc(
                    100dvh -
                    155px
                )
            ) !important;
    }
}


/*
 * ==========================================================
 * EMPTY STATE ENHANCEMENT
 * ==========================================================
 */

.mc-chat-empty {
    gap: 0;
}


.mc-chat-empty::before {
    content: "⚽";

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    margin-bottom: 9px;

    border-radius: 50%;

    background: #f2f7f5;

    font-size: 17px;
}


.mc-chat-empty::after {
    content: "Comente o jogo, dê seu palpite e acompanhe a torcida em tempo real.";

    display: block;

    max-width: 220px;

    margin-top: 6px;

    color: #8794a5;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.45;
}


/*
 * Open launcher gets a subtle active state instead
 * of disappearing.
 */
.mc-match-chat.is-open .mc-chat-launcher {
    border-color:
        rgba(
            22,
            199,
            132,
            .28
        ) !important;

    box-shadow:
        0 10px 32px
        rgba(
            8,
            25,
            45,
            .18
        ) !important;
}



/*
 * ==========================================================
 * FUTEMAX CHAT V3.1
 * Taller panel + clear launcher gap
 * ==========================================================
 */

@media (max-width: 767px) {

    /*
     * Keep launcher exactly where it is.
     */
    .mc-match-chat {
        --mc-chat-launcher-height: 48px;
    }


    /*
     * Taller chat window.
     * 16px visual gap above launcher.
     */
    .mc-chat-panel {
        right: 0;

        bottom:
            calc(
                var(--mc-chat-launcher-height) +
                16px
            );

        width:
            min(
                286px,
                calc(100vw - 24px)
            ) !important;

        height:
            min(
                400px,
                calc(100dvh - 175px)
            ) !important;

        max-height:
            calc(
                100dvh -
                175px
            ) !important;
    }


    /*
     * Give the message area more breathing room.
     */
    .mc-chat-messages {
        padding:
            16px
            14px
            18px !important;
    }


    .mc-chat-empty {
        padding:
            22px
            14px !important;
    }


    .mc-chat-empty::before {
        width: 42px !important;
        height: 42px !important;

        margin-bottom: 12px !important;

        font-size: 19px !important;
    }


    .mc-chat-empty strong {
        margin-bottom: 7px !important;

        font-size: 14px !important;
    }


    .mc-chat-empty::after {
        max-width: 225px !important;

        margin-top: 9px !important;

        font-size: 11px !important;

        line-height: 1.55 !important;
    }


    /*
     * Login footer gets a little more space too.
     */
    .mc-chat-login {
        min-height: 50px !important;

        margin:
            0
            9px
            9px !important;

        padding:
            9px
            9px
            9px
            11px !important;
    }

}


/*
 * Very small phones:
 * don't let the chat run outside the viewport.
 */
@media (max-width: 360px) {

    .mc-chat-panel {
        width:
            min(
                286px,
                calc(100vw - 20px)
            ) !important;

        height:
            min(
                380px,
                calc(100dvh - 165px)
            ) !important;

        max-height:
            calc(
                100dvh -
                165px
            ) !important;
    }

}



/*
 * ==========================================================
 * FUTEMAX CHAT V3.3
 * Final draggable positioning
 *
 * JS owns left/top/right/bottom after opening/dragging.
 * Never use !important on panel position properties.
 * ==========================================================
 */

.mc-chat-panel {
    position: fixed !important;
}


/*
 * Launcher always remains visible.
 */
.mc-match-chat.is-open .mc-chat-launcher {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/*
 * Header is the drag handle.
 */
.mc-chat-header[data-chat-drag-handle] {
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.mc-match-chat.is-dragging
.mc-chat-header[data-chat-drag-handle] {
    cursor: grabbing;
}


/*
 * Don't accidentally drag when using controls.
 */
.mc-chat-close,
.mc-chat-form,
.mc-chat-form *,
.mc-chat-login,
.mc-chat-login * {
    touch-action: auto;
}


@media (max-width: 767px) {

    /*
     * Default dimensions only.
     *
     * IMPORTANT:
     * Do not put left/right/top/bottom !important here.
     */
    .mc-chat-panel {
        width:
            min(
                286px,
                calc(100vw - 24px)
            ) !important;

        height:
            min(
                400px,
                calc(100dvh - 175px)
            ) !important;

        max-height:
            calc(
                100dvh - 175px
            ) !important;
    }
}


@media (max-width: 360px) {

    .mc-chat-panel {
        width:
            min(
                286px,
                calc(100vw - 20px)
            ) !important;

        height:
            min(
                380px,
                calc(100dvh - 165px)
            ) !important;

        max-height:
            calc(
                100dvh - 165px
            ) !important;
    }
}


/*
 * ==========================================================
 * FUTEMAX CHAT V3.3
 * FINAL OPEN / CLOSE VISIBILITY FIX
 *
 * JS owns:
 *   left / top / right / bottom
 *
 * CSS owns:
 *   visibility / opacity / interaction
 * ==========================================================
 */

/*
 * Closed state
 */
.mc-match-chat .mc-chat-panel {
    display: flex !important;
    flex-direction: column !important;

    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;

    transform:
        translateY(8px)
        scale(.985) !important;

    transition:
        opacity .16s ease,
        transform .16s ease,
        visibility 0s linear .16s !important;
}


/*
 * Open state
 */
.mc-match-chat.is-open .mc-chat-panel {
    display: flex !important;

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;

    transform:
        translateY(0)
        scale(1) !important;

    transition:
        opacity .16s ease,
        transform .16s ease !important;

    z-index: 2147483001 !important;
}


/*
 * aria-hidden is kept as an additional safety layer.
 */
.mc-match-chat .mc-chat-panel[aria-hidden="false"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}


/*
 * IMPORTANT:
 * Do not set left/top/right/bottom here.
 * br-match-chat.js controls the draggable position.
 */


/*
 * ==========================================================
 * FUTEMAX CHAT V4 FINAL
 *
 * Launcher:
 *   permanent fixed long button
 *
 * Panel:
 *   compact floating draggable window
 *
 * JS owns:
 *   left / top / right / bottom after dragging
 * ==========================================================
 */


/* ----------------------------------------------------------
 * SHELL
 * ---------------------------------------------------------- */

.mc-match-chat {
    --mc-chat-launcher-height: 48px;
    --mc-chat-gap: 12px;

    position: fixed !important;

    right: 16px !important;
    bottom:
        calc(
            18px +
            env(safe-area-inset-bottom)
        ) !important;

    z-index: 2147483000 !important;

    pointer-events: none !important;
}


/* ----------------------------------------------------------
 * PERMANENT LAUNCHER
 * ---------------------------------------------------------- */

.mc-match-chat .mc-chat-launcher,
.mc-match-chat.is-open .mc-chat-launcher {

    position: relative !important;

    width: 190px !important;
    height: var(--mc-chat-launcher-height) !important;

    display: flex !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    transform: none !important;

    z-index: 2147483002 !important;
}


/* ----------------------------------------------------------
 * PANEL — COMPACT FLOATING WINDOW
 * ---------------------------------------------------------- */

.mc-match-chat .mc-chat-panel {

    position: fixed !important;

    width: 286px !important;
    height: 310px !important;

    max-width:
        calc(100vw - 24px) !important;

    max-height:
        calc(100dvh - 120px) !important;

    border-radius: 16px !important;

    overflow: hidden !important;

    background: #fff !important;

    box-shadow:
        0 18px 48px
        rgba(8, 25, 45, .18) !important;

    display: flex !important;
    flex-direction: column !important;

    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;

    transform:
        translateY(6px)
        scale(.985) !important;

    transform-origin:
        bottom right !important;

    transition:
        opacity .16s ease,
        transform .16s ease,
        visibility 0s linear .16s !important;

    z-index: 2147483001 !important;
}


/* ----------------------------------------------------------
 * OPEN
 * ---------------------------------------------------------- */

.mc-match-chat.is-open .mc-chat-panel,
.mc-match-chat .mc-chat-panel[aria-hidden="false"] {

    visibility: visible !important;
    opacity: 1 !important;

    pointer-events: auto !important;

    transform:
        translateY(0)
        scale(1) !important;

    transition:
        opacity .16s ease,
        transform .16s ease !important;
}


/* ----------------------------------------------------------
 * HEADER
 * ---------------------------------------------------------- */

.mc-match-chat .mc-chat-header {

    min-height: 60px !important;

    padding:
        10px
        10px
        9px
        13px !important;

    flex: 0 0 auto !important;
}


.mc-match-chat
.mc-chat-header[data-chat-drag-handle] {

    cursor: grab !important;

    touch-action: none !important;

    user-select: none !important;
    -webkit-user-select: none !important;
}


.mc-match-chat.is-dragging
.mc-chat-header[data-chat-drag-handle] {

    cursor: grabbing !important;
}


/* ----------------------------------------------------------
 * NOTICE
 * ---------------------------------------------------------- */

.mc-match-chat .mc-chat-notice {

    flex: 0 0 auto !important;

    min-height: 28px !important;

    padding:
        7px
        12px !important;

    font-size: 10px !important;
}


/* ----------------------------------------------------------
 * MESSAGE AREA
 * ---------------------------------------------------------- */

.mc-match-chat .mc-chat-messages {

    flex:
        1
        1
        auto !important;

    min-height: 0 !important;

    overflow-y: auto !important;

    padding:
        12px
        12px
        10px !important;
}


/* Empty-state content should not eat the whole window */

.mc-match-chat .mc-chat-empty {

    min-height: 100% !important;

    padding:
        12px
        10px !important;

    display: flex !important;
    flex-direction: column !important;

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

    text-align: center !important;
}


.mc-match-chat .mc-chat-empty::before {

    width: 38px !important;
    height: 38px !important;

    margin-bottom: 9px !important;

    font-size: 17px !important;
}


.mc-match-chat .mc-chat-empty strong {

    margin-bottom: 5px !important;

    font-size: 14px !important;
}


.mc-match-chat .mc-chat-empty::after {

    max-width: 215px !important;

    margin-top: 6px !important;

    font-size: 11px !important;

    line-height: 1.45 !important;
}


/* ----------------------------------------------------------
 * LOGIN FOOTER
 * ---------------------------------------------------------- */

.mc-match-chat .mc-chat-login {

    flex: 0 0 auto !important;

    min-height: 48px !important;

    margin:
        0
        9px
        9px !important;

    padding:
        8px
        8px
        8px
        10px !important;

    border-radius: 11px !important;
}


/* ----------------------------------------------------------
 * MESSAGE FORM
 * ---------------------------------------------------------- */

.mc-match-chat .mc-chat-form {

    flex: 0 0 auto !important;
}


/* ----------------------------------------------------------
 * MOBILE
 * ---------------------------------------------------------- */

@media (max-width: 767px) {

    .mc-match-chat {

        right: 8px !important;

        bottom:
            calc(
                74px +
                env(safe-area-inset-bottom)
            ) !important;
    }


    .mc-match-chat .mc-chat-launcher,
    .mc-match-chat.is-open .mc-chat-launcher {

        width: 190px !important;
        height: 48px !important;
    }


    .mc-match-chat .mc-chat-panel {

        width:
            min(
                286px,
                calc(100vw - 20px)
            ) !important;

        height:
            min(
                310px,
                calc(100dvh - 150px)
            ) !important;

        max-height:
            calc(
                100dvh - 150px
            ) !important;
    }
}


/* ----------------------------------------------------------
 * SMALL MOBILE
 * ---------------------------------------------------------- */

@media (max-width: 360px) {

    .mc-match-chat .mc-chat-panel {

        width:
            min(
                278px,
                calc(100vw - 16px)
            ) !important;

        height:
            min(
                300px,
                calc(100dvh - 145px)
            ) !important;
    }
}



/*
 * Chat close button
 * Remove theme/global button margin.
 */
.mc-match-chat .mc-chat-close,
.mc-match-chat button.mc-chat-close {
    margin: 0 !important;
}



/*
 * ==========================================================
 * CHAT CLOSE BUTTON — PERFECT CIRCLE
 * ==========================================================
 */

.mc-match-chat .mc-chat-close,
.mc-match-chat button.mc-chat-close {

    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;
    min-height: 34px !important;

    max-width: 34px !important;
    max-height: 34px !important;

    flex:
        0 0 34px !important;

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

    border: 0 !important;
    border-radius: 50% !important;

    display: inline-flex !important;

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

    line-height: 1 !important;

    box-sizing: border-box !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}



/*
 * ==========================================================
 * CHAT V4 — TALLER PANEL
 * Keep current width, increase height only.
 * ==========================================================
 */

.mc-match-chat .mc-chat-panel {
    height: 360px !important;
}


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

    .mc-match-chat .mc-chat-panel {
        width:
            min(
                286px,
                calc(100vw - 20px)
            ) !important;

        height:
            min(
                400px,
                calc(100dvh - 150px)
            ) !important;
    }
}


/*
 * Very small phones
 */
@media (max-width: 360px) {

    .mc-match-chat .mc-chat-panel {
        height:
            min(
                400px,
                calc(100dvh - 145px)
            ) !important;
    }
}



/*
 * ==========================================================
 * FUTEMAX CHAT — DESKTOP 1210PX CONTENT ALIGNMENT
 *
 * Desktop only.
 * Keep launcher + chat inside the main 1210px content area.
 * Mobile remains unchanged.
 * ==========================================================
 */

@media (min-width: 768px) {

    .mc-match-chat {
        right:
            max(
                12px,
                calc(
                    (100vw - 1210px) / 2 + 12px
                )
            ) !important;

        bottom: 24px !important;
    }

}



/*
 * ==========================================================
 * FUTEMAX CHAT — DESKTOP LARGE VERSION
 *
 * Desktop:
 *   Panel    = 360 x 440
 *   Launcher = 220 x 52
 *
 * Mobile unchanged.
 * ==========================================================
 */

@media (min-width: 768px) {

    /*
     * Keep entire widget aligned inside
     * the centered 1210px content area.
     */
    .mc-match-chat {
        --mc-chat-launcher-height: 52px;

        right:
            max(
                12px,
                calc(
                    (100vw - 1210px) / 2 + 12px
                )
            ) !important;

        bottom: 24px !important;
    }


    /*
     * Bigger desktop launcher.
     */
    .mc-match-chat .mc-chat-launcher,
    .mc-match-chat.is-open .mc-chat-launcher {
        width: 220px !important;
        height: 52px !important;
    }


    /*
     * Bigger desktop chat window.
     */
    .mc-match-chat .mc-chat-panel {
        width: 360px !important;
        height: 440px !important;

        max-width:
            calc(100vw - 32px) !important;

        max-height:
            calc(100vh - 110px) !important;

        border-radius: 18px !important;
    }


    /*
     * Header
     */
    .mc-match-chat .mc-chat-header {
        min-height: 68px !important;

        padding:
            13px
            13px
            11px
            16px !important;
    }


    /*
     * Close button
     */
    .mc-match-chat .mc-chat-close,
    .mc-match-chat button.mc-chat-close {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;
        min-height: 38px !important;

        max-width: 38px !important;
        max-height: 38px !important;

        flex:
            0 0 38px !important;

        margin: 0 !important;

        border-radius: 50% !important;
    }


    /*
     * More room for actual messages.
     */
    .mc-match-chat .mc-chat-messages {
        padding:
            18px
            16px
            16px !important;
    }


    /*
     * Empty state
     */
    .mc-match-chat .mc-chat-empty {
        padding:
            22px
            16px !important;
    }


    .mc-match-chat .mc-chat-empty::before {
        width: 46px !important;
        height: 46px !important;

        margin-bottom: 12px !important;

        font-size: 20px !important;
    }


    .mc-match-chat .mc-chat-empty strong {
        font-size: 14px !important;
    }


    .mc-match-chat .mc-chat-empty::after {
        max-width: 260px !important;

        font-size: 11px !important;
        line-height: 1.5 !important;
    }


    /*
     * Login area.
     */
    .mc-match-chat .mc-chat-login {
        min-height: 56px !important;

        margin:
            0
            12px
            12px !important;

        padding:
            10px
            10px
            10px
            13px !important;

        border-radius: 12px !important;
    }

}



/*
 * ==========================================================
 * FUTEMAX CHAT
 * Remove login footer outer margin
 * ==========================================================
 */

.mc-match-chat .mc-chat-login {
    margin: 0 !important;
}


/*
 * Keep the bottom corners matching the chat panel.
 */
.mc-match-chat .mc-chat-login {
    border-radius:
        0
        0
        16px
        16px !important;
}


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

    .mc-match-chat .mc-chat-login {
        margin: 0 !important;
    }

}


/*
 * Desktop
 */
@media (min-width: 768px) {

    .mc-match-chat .mc-chat-login {
        margin: 0 !important;
    }

}



/*
 * ==========================================================
 * FUTEMAX CHAT
 * Login button - remove inherited Flatsome button margin
 * ==========================================================
 */

.mc-match-chat .mc-chat-login .mc-chat-login-button,
.mc-match-chat button.mc-chat-login-button {
    margin: 0 !important;
}


/*
 * Flatsome may apply .button / button margins.
 * Keep chat buttons isolated from theme button spacing.
 */
.mc-match-chat .mc-chat-login button {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
}



/*
 * ==========================================================
 * FUTEMAX CHAT
 * DRAGGABLE FLOATING COMPONENT
 * ==========================================================
 *
 * IMPORTANT:
 * - launcher itself is NOT positioned
 * - shell is moved by JS
 * - panel stays attached to shell
 */

.mc-match-chat .mc-chat-launcher {
    touch-action: none !important;

    user-select: none !important;
    -webkit-user-select: none !important;

    cursor: grab;
}


.mc-match-chat .mc-chat-launcher:active {
    cursor: grabbing;
}


/*
 * When JS has converted the shell to fixed positioning,
 * remove accidental theme margins.
 */
.mc-match-chat[style*="position: fixed"] {
    margin: 0 !important;
}


/*
 * Keep launcher clickable above nearby page content.
 */
.mc-match-chat .mc-chat-launcher {
    pointer-events: auto !important;
}