/* =====================================
        GENERAL
===================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html,
body {
    width: 100%;
    min-height: 100%;
}


body {

    font-family:
        'Poppins',
        -apple-system,
        'Segoe UI',
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background:
        #f4f7fb;

    color:
        #1d2433;

}



/* =====================================
        PAGE
===================================== */

.support-page {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}



/* =====================================
        HEADER
===================================== */

.support-header {

    height: 72px;

    display: flex;

    align-items: center;

    padding:
        0 30px;

    background:
        #ffffff;

    border-bottom:
        1px solid #e7eaf0;

}



.support-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    color:
        #171d2b;

    font-size:
        18px;

    font-weight:
        700;

}



.support-logo img {

    width:
        38px;

    height:
        38px;

    object-fit:
        contain;

}



/* =====================================
        MAIN
===================================== */

.support-main {

    flex:
        1;

    display:
        flex;

    justify-content:
        center;

    padding:
        35px 20px;

}



.chat-container {

    width:
        100%;

    max-width:
        850px;

    height:
        calc(100vh - 150px);

    min-height:
        560px;

    background:
        #ffffff;

    border:
        1px solid #e4e8ef;

    border-radius:
        16px;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.06);

}



/* =====================================
        CHAT HEADER
===================================== */

.chat-header {

    padding:
        18px 22px;

    background:
        #ffffff;

    border-bottom:
        1px solid #e8ebf0;

}



.advisor-info {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}



.advisor-avatar {

    width:
        45px;

    height:
        45px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #f0f3f8;

    overflow:
        hidden;

}



.advisor-avatar img {

    width:
        34px;

    height:
        34px;

    object-fit:
        contain;

}



.advisor-info h1 {

    font-size:
        16px;

    font-weight:
        600;

    margin-bottom:
        3px;

}



.online-status {

    font-size:
        12px;

    color:
        #36a269;

}



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

.chat-messages {

    flex:
        1;

    overflow-y:
        auto;

    padding:
        25px 22px;

    background:
        #f8fafc;

}



.message {

    display:
        flex;

    gap:
        10px;

    margin-bottom:
        22px;

}



.message.user-message {

    flex-direction:
        row-reverse;

}



.message-avatar {

    width:
        34px;

    height:
        34px;

    min-width:
        34px;

    border-radius:
        50%;

    background:
        #eef2f7;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

}



.message-avatar img {

    width:
        27px;

    height:
        27px;

    object-fit:
        contain;

}



.message-content {

    max-width:
        72%;

}



.message-name {

    font-size:
        11px;

    font-weight:
        600;

    margin-bottom:
        5px;

    color:
        #687386;

}



.user-message .message-name {

    text-align:
        right;

}



.message-bubble {

    padding:
        11px 14px;

    border-radius:
        12px;

    background:
        #ffffff;

    border:
        1px solid #e4e8ef;

    font-size:
        14px;

    line-height:
        1.5;

    word-break:
        break-word;

}



.user-message .message-bubble {

    background:
        #edf3ff;

    border-color:
        #dce7ff;

}



/* =====================================
        INPUT AREA
===================================== */

.chat-input-area {

    padding:
        15px 18px 12px;

    background:
        #ffffff;

    border-top:
        1px solid #e8ebf0;

}



.chat-form {

    width:
        100%;

}



.input-wrapper {

    display:
        flex;

    align-items:
        flex-end;

    gap:
        10px;

}



#messageInput {

    flex:
        1;

    min-height:
        46px;

    max-height:
        130px;

    resize:
        none;

    padding:
        13px 14px;

    border:
        1px solid #d9dee7;

    border-radius:
        10px;

    outline:
        none;

    font-family:
        inherit;

    font-size:
        14px;

    color:
        #1d2433;

    background:
        #ffffff;

}



#messageInput:focus {

    border-color:
        #9aa9c0;

}



.send-button {

    height:
        46px;

    padding:
        0 20px;

    border:
        none;

    border-radius:
        10px;

    background:
        #1d2433;

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        opacity 0.2s ease;

}



.send-button:hover {

    opacity:
        0.88;

}



.send-button:disabled {

    opacity:
        0.55;

    cursor:
        not-allowed;

}



.chat-note {

    margin-top:
        8px;

    font-size:
        11px;

    color:
        #8993a3;

    text-align:
        center;

}



/* =====================================
        FOOTER
===================================== */

.support-footer {

    padding:
        15px 20px;

    text-align:
        center;

    color:
        #8993a3;

    font-size:
        11px;

}



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

@media (max-width: 600px) {

    .support-header {

        height:
            62px;

        padding:
            0 16px;

    }


    .support-logo {

        font-size:
            16px;

    }


    .support-logo img {

        width:
            34px;

        height:
            34px;

    }


    .support-main {

        padding:
            0;

    }


    .chat-container {

        height:
            calc(100vh - 62px);

        min-height:
            0;

        border:
            none;

        border-radius:
            0;

        box-shadow:
            none;

    }


    .chat-header {

        padding:
            14px 16px;

    }


    .advisor-avatar {

        width:
            40px;

        height:
            40px;

    }


    .advisor-avatar img {

        width:
            30px;

        height:
            30px;

    }


    .chat-messages {

        padding:
            20px 14px;

    }


    .message-content {

        max-width:
            82%;

    }


    .chat-input-area {

        padding:
            10px;

    }


    .send-button {

        padding:
            0 15px;

    }


    .support-footer {

        display:
            none;

    }

}

/* =====================================
        LOGO POLISH
===================================== */

.support-logo img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #080d19;
    padding: 4px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
    flex-shrink: 0;
}

.support-logo span {
    font-weight: 600;
    letter-spacing: -0.2px;
}

.message-bubble,
.chat-form textarea,
.support-logo,
.chat-note {
    font-family: inherit;
}

/* =====================================
        AVATARS
===================================== */

.message-avatar img,
.advisor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
    background: #080d19;
}

.message-avatar {
    background: #080d19;
    border: 1px solid #080d19;
}

.message-avatar.you-avatar {
    background: #1d2433;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2px;
    border: none;
}

.advisor-avatar {
    background: #080d19;
    border: 1px solid #080d19;
}

/* Prevent tap zoom / page scaling on touch devices */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, input, select, textarea, label { touch-action: manipulation; }
input, select, textarea { font-size: 16px; }